/* ==========================================================================
   BillerFirms soft layer (v3)
   Loaded after mb-theme.css on every page. Same colours, a softer, cleaner feel:
   rounder shapes, pill buttons, layered light shadows, calm pastel sections,
   a friendlier heading font and small, quiet motion. Remove the <link> to switch it off.
   ========================================================================== */

:root {
  --mbx-radius-sm: 12px;
  --mbx-radius: 20px;
  --mbx-radius-lg: 28px;
  --mbx-line: #e7eaf1;
  --mbx-line-2: #f0f2f7;
  --mbx-bg-soft: #f7f6fb;
  --mbx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --mbx-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .06);
  --mbx-shadow-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 24px 56px rgba(15, 23, 42, .10);
  --mbx-head-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mbx-cream: #fbf7f2;
  --mbx-lilac: #eef7f2;
  --mbx-peach: #eef7f2;
  --mbx-mint: #eefaf3;
}

/* ---------- Type ---------- */
.mbx-h1, .mbx-h2, .mbx-h3, .mbx-dh__title, .mbx-card__title, .mbx-prof-id__name, .mbx-rl__name, h1.mbx-h1, .mbx-hero--home h1 {
  font-family: var(--mbx-head-font);
  letter-spacing: -.025em;
}
.mbx-h1 { font-weight: 800; line-height: 1.08; }
.mbx-h2 { font-weight: 800; line-height: 1.14; }
.mbx-lead { color: #5d6b80; line-height: 1.7; }
.mbx-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mbx-lilac); color: var(--mbx-brand);
  border: 1px solid #dbe9e1; border-radius: 999px;
  padding: 6px 12px; letter-spacing: .06em; font-size: 11.5px;
}

/* ---------- Buttons: pills, a little lift ---------- */
.mbx-btn { border-radius: 999px; font-weight: 650; padding: 13px 24px; transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; }
.mbx-btn:hover { transform: translateY(-1px); }
.mbx-btn:active { transform: translateY(0); }
.mbx-btn--sm { padding: 9px 16px; }
.mbx-btn--lg { padding: 16px 30px; }
.mbx-btn--primary { background: linear-gradient(180deg, #0d1a15, var(--mbx-brand)); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(11,153,110,.22); }
.mbx-btn--primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px rgba(11,153,110,.30); }
.mbx-btn--accent { background: linear-gradient(180deg, #0b996e, var(--mbx-accent)); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px rgba(11,153,110,.24); }
.mbx-btn--accent:hover { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(11,153,110,.32); }
.mbx-btn--outline { border-color: #dfe3ec; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.mbx-btn--outline:hover { border-color: #c9cfdc; background: #fafbfd; }
.mbx-btn--dark { box-shadow: 0 6px 16px rgba(13,26,21,.2); }

/* ---------- Surfaces ---------- */
.mbx-card { border-color: var(--mbx-line); border-radius: 24px; box-shadow: var(--mbx-shadow-sm); }
.mbx-side .mbx-card { border-radius: 20px; }
.mbx-section--soft { background: linear-gradient(180deg, var(--mbx-cream), #fff 85%); }
.mbx-header { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: rgba(231,234,241,.8); }
.mbx-header.is-scrolled { box-shadow: 0 6px 24px rgba(15,23,42,.06); }

/* ---------- Forms ---------- */
.mbx-input, .mbx-select, .mbx-textarea { border-radius: 14px; border-color: #dbe0ea; padding: 11px 14px; transition: border-color .15s, box-shadow .15s, background .15s; }
.mbx-input, .mbx-select { height: 48px; }
.mbx-input:hover, .mbx-select:hover, .mbx-textarea:hover { border-color: #c5ccda; }
.mbx-input:focus, .mbx-select:focus, .mbx-textarea:focus { border-color: var(--mbx-brand); box-shadow: 0 0 0 4px rgba(11,153,110,.12); }
.mbx-label { font-weight: 650; }

/* ---------- Small pieces ---------- */
.mbx-alert { border-radius: 16px; }
.mbx-tag { border-radius: 999px; }
.mbx-dkpi { border-radius: 20px; box-shadow: var(--mbx-shadow-sm); transition: box-shadow .2s, transform .2s; }
a.mbx-dkpi:hover { transform: translateY(-2px); box-shadow: var(--mbx-shadow); }
.mbx-dkpi__ic { border-radius: 14px; }
.mbx-table-wrap { border-radius: 18px; }
.mbx-subnav { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- Quiet motion: things rise in as you scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mbx-rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .mbx-rise.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Home infographics
   ========================================================================== */
.mbx-ig { overflow: hidden; }
.mbx-ig--soft { background: linear-gradient(180deg, var(--mbx-lilac), #fff 90%); }
.mbx-ig__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.mbx-ig__row--rev { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mbx-ig__text .mbx-h2 { margin-top: 10px; }
.mbx-ig__steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.mbx-ig__steps li { display: flex; gap: 14px; align-items: flex-start; }
.mbx-ig__steps li > span { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--mbx-peach); color: #0b996e; font-weight: 800; }
.mbx-ig__steps b { display: block; color: var(--mbx-ink); }
.mbx-ig__steps small { color: var(--mbx-muted); font-size: 14px; }
.mbx-ig__ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.mbx-ig__ticks i { color: #17a35a; margin-right: 8px; }
.mbx-ig__art { position: relative; }

.mbx-ig1, .mbx-ig2 { position: relative; width: 100%; max-width: 540px; margin: 0 auto; font-size: 14px; }
.mbx-ig1 { aspect-ratio: 520 / 500; }
.mbx-ig2 { aspect-ratio: 520 / 480; }
.mbx-ig1__lines, .mbx-ig2__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mbx-ig1__lines path, .mbx-ig2__lines path { fill: none; stroke: #cfd5e3; stroke-width: 1.6; stroke-dasharray: 5 6; }
.mbx-ig1__lines path.is-soft { stroke: #e3e7ef; }
@media (prefers-reduced-motion: no-preference) {
  .mbx-ig1__lines path, .mbx-ig2__lines path { animation: mbxDash 1.6s linear infinite; }
  .mbx-ig1__chip, .mbx-ig2__node, .mbx-ig2__mail { animation: mbxFloat 5s ease-in-out infinite; }
  .mbx-ig1__chip--b { animation-delay: -1.6s; }
  .mbx-ig1__chip--c { animation-delay: -3.2s; }
  .mbx-ig2__node:nth-of-type(odd) { animation-delay: -2.1s; }
  .mbx-ig1__pill i, .mbx-ig2__lead i { animation: mbxPulse 2.4s ease-in-out infinite; }
}
@keyframes mbxDash { to { stroke-dashoffset: -22; } }
@keyframes mbxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mbxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 1) request, matching, matches */
.mbx-ig1__req { position: absolute; left: 2%; top: 8.8%; width: 63%; display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--mbx-line); border-radius: 18px; padding: 12px 14px; box-shadow: var(--mbx-shadow); z-index: 2; }
.mbx-ig1__avatar { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #a8e3c8, #a8e3c8); color: #06664a; font-weight: 800; }
.mbx-ig1__req small { display: block; color: #94a3b8; font-size: 11.5px; }
.mbx-ig1__req b { display: block; color: var(--mbx-ink); font-size: 14.5px; }
.mbx-ig1__req em { font-style: normal; color: var(--mbx-muted); font-size: 12.5px; }
.mbx-ig1__pill { position: absolute; left: 51.5%; top: 26.4%; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--mbx-lilac); border: 1px solid #dbe9e1; color: #0d1a15; font-weight: 700; font-size: 13px; z-index: 2; white-space: nowrap; }
.mbx-ig1__chip { position: absolute; display: inline-flex; gap: 8px; align-items: center; padding: 9px 13px; border-radius: 14px; background: #fff; border: 1px solid var(--mbx-line); box-shadow: var(--mbx-shadow); font-weight: 600; font-size: 13px; color: #1f2937; white-space: nowrap; z-index: 3; }
.mbx-ig1__chip i { color: #0b996e; }
.mbx-ig1__chip--a { left: 50%; top: 39.6%; }
.mbx-ig1__chip--a i { color: #17a35a; }
.mbx-ig1__chip--b { left: -2%; top: 43%; }
.mbx-ig1__chip--b i { color: #ffb21e; }
.mbx-ig1__chip--c { right: -3%; top: 52%; }
.mbx-ig1__win { position: absolute; left: 11.5%; top: 52%; width: 77%; background: #fff; border: 1px solid var(--mbx-line); border-radius: 22px; box-shadow: var(--mbx-shadow-lg); padding: 12px 14px 16px; z-index: 2; }
.mbx-ig1__bar { display: flex; gap: 6px; margin-bottom: 10px; }
.mbx-ig1__bar i { width: 9px; height: 9px; border-radius: 50%; background: #e3e7ef; }
.mbx-ig1__bar i:first-child { background: #a8e3c8; }
.mbx-ig1__bar i:nth-child(2) { background: #ffd98a; }
.mbx-ig1__bar i:last-child { background: #a7e3bd; }
.mbx-ig1__title { font-weight: 800; color: var(--mbx-ink); font-family: var(--mbx-head-font); margin-bottom: 10px; }
.mbx-ig1__title span { font: 600 11px var(--mbx-font); color: #94a3b8; border: 1px solid var(--mbx-line); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.mbx-ig1__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbx-ig1__co { border: 1px solid #eef1f6; border-radius: 16px; padding: 12px; display: grid; gap: 4px; background: linear-gradient(180deg, #fff, #fafbfd); }
.mbx-ig1__co img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #eef1f6; object-fit: contain; background: #fff; padding: 3px; }
.mbx-ig1__co b { font-size: 13px; color: var(--mbx-ink); line-height: 1.3; }
.mbx-ig1__stars i { color: #ffb21e; font-size: 10px; }
.mbx-ig1__co small { color: var(--mbx-muted); font-size: 11.5px; }
.mbx-ig1__co em { font-style: normal; margin-top: 4px; text-align: center; padding: 6px 0; border-radius: 999px; background: var(--mbx-ink); color: #fff; font-size: 12px; font-weight: 700; }

/* 2) everything that brings practices to you */
.mbx-ig2__node { position: absolute; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--mbx-line); box-shadow: var(--mbx-shadow); font-weight: 600; font-size: 13px; color: #1f2937; white-space: nowrap; z-index: 2; }
.mbx-ig2__node i { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--mbx-mint); color: #17a35a; font-size: 12px; }
.mbx-ig2__node--top { left: 50%; top: 0; transform: translateX(-50%); animation: none !important; }
.mbx-ig2__node--top i { background: var(--mbx-lilac); color: #0d1a15; }
.mbx-ig2__panel { position: absolute; left: 24%; top: 19%; width: 52%; min-height: 58%; border-radius: 26px; padding: 18px; background: radial-gradient(120% 80% at 0% 0%, #0d1a15 0%, transparent 60%), linear-gradient(160deg, #1b2a24, #0d1a15); box-shadow: var(--mbx-shadow-lg); color: #fff; display: grid; gap: 12px; align-content: start; z-index: 1; }
.mbx-ig2__score { display: flex; gap: 12px; align-items: center; }
.mbx-ig2__score b, .mbx-ig2__lead b { display: block; font-size: 13.5px; }
.mbx-ig2__score small, .mbx-ig2__lead small { color: rgba(255,255,255,.7); font-size: 11.5px; }
.mbx-ig2__lead { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px 12px; }
.mbx-ig2__lead i { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #0b996e; font-size: 13px; }
.mbx-ig2__lead--2 i { background: #ffb21e; color: #1f2937; }
.mbx-ig2__mail { position: absolute; left: 20%; top: 69%; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid #dbe9e1; color: #0d1a15; box-shadow: var(--mbx-shadow); z-index: 2; }

@media (max-width: 960px) {
  .mbx-ig__row, .mbx-ig__row--rev { grid-template-columns: 1fr; gap: 34px; }
  .mbx-ig__row--rev .mbx-ig__art { order: 2; }
}
@media (max-width: 560px) {
  .mbx-ig1, .mbx-ig2 { font-size: 12px; }
  .mbx-ig1__chip, .mbx-ig2__node { font-size: 11.5px; padding: 7px 10px; }
  .mbx-ig1__chip--b, .mbx-ig1__chip--c { display: none; }
  .mbx-ig1__req { width: 82%; }
  .mbx-ig1__pill { left: 44%; }
  .mbx-ig1__win { left: 3%; width: 94%; }
  .mbx-ig2__panel { left: 18%; width: 64%; }
}

/* ==========================================================================
   Company profile: review insights v2 (clean two-card layout)
   ========================================================================== */
.mbx-ri__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mbx-ri__actions .mbx-pshare__menu { right: 0; left: auto; }
.mbx-ri__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mbx-ri__card { border: 1px solid #eceff5; border-radius: 22px; padding: 22px 24px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.mbx-ri__label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.mbx-ri__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; background: linear-gradient(150deg, #eef7f2, #fff 70%); }
.mbx-ri__overall { display: grid; justify-items: center; gap: 4px; text-align: center; padding-right: 22px; border-right: 1px solid #dbe9e1; }
.mbx-ri__big { font-family: var(--mbx-head-font); font-size: 52px; line-height: 1; font-weight: 800; color: var(--mbx-ink); }
.mbx-ri__overall small { color: var(--mbx-muted); font-size: 12.5px; white-space: nowrap; }
.mbx-ri__bars { display: grid; gap: 8px; }
.mbx-ri__barrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; color: #475569; }
.mbx-ri__barrow i { color: #ffb21e; font-size: 10px; }
.mbx-ri__barrow b { text-align: right; color: var(--mbx-ink); font-weight: 700; }
.mbx-ri__track { display: block; height: 8px; border-radius: 999px; background: #eef7f2; overflow: hidden; }
.mbx-ri__track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0b996e, #0b996e); }
.mbx-ri__rings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.mbx-ri__ring { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; color: #475569; }
.mbx-ri__tools { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; align-items: center; margin: 18px 0 14px; }
.mbx-ri__search { display: flex; align-items: center; gap: 10px; height: 48px; border: 1px solid #e3e8ef; border-radius: 999px; padding: 0 18px; background: #fff; }
.mbx-ri__search i { color: #94a3b8; }
.mbx-ri__search input { border: 0; outline: 0; flex: 1; min-width: 0; height: 100%; font: inherit; background: transparent; }
.mbx-ri__search:focus-within { border-color: var(--mbx-brand); box-shadow: 0 0 0 4px rgba(11,153,110,.12); }
.mbx-ri__sort.mbx-select { border-radius: 999px; height: 48px; }
.mbx-ri__topics { padding: 16px 0 6px; border-top: 1px solid #eef1f5; }
.mbx-ri__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mbx-ri__chip { margin: 0; }
@media (max-width: 900px) {
  .mbx-ri__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mbx-ri__score { grid-template-columns: 1fr; }
  .mbx-ri__overall { border-right: 0; padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid #dbe9e1; }
  .mbx-ri__rings { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .mbx-ri__tools { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v4: softer Google fonts + Brevo-style light home page and sign-in
   ========================================================================== */
:root { --mbx-font: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body, .mbx-btn, .mbx-input, .mbx-select, .mbx-textarea, button, input, select, textarea { font-family: var(--mbx-font); }
body { color: #3b4658; }
.mbx-section-head .mbx-link { border: 1px solid #dbe9e1; border-radius: 999px; padding: 9px 16px; background: #fff; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.mbx-section-head .mbx-link:hover { text-decoration: none; border-color: #dbe9e1; box-shadow: 0 4px 14px rgba(11,153,110,.10); }
.mbx-section { padding: 88px 0; }

/* ---------- Hero: light and airy ---------- */
.mbx-hero--home { background:
    radial-gradient(900px 520px at 88% -12%, #eef7f2 0%, transparent 62%),
    radial-gradient(760px 460px at -8% 112%, #eef7f2 0%, transparent 62%),
    linear-gradient(180deg, #eef7f2 0%, #eef7f2 100%);
  color: var(--mbx-ink); }
.mbx-hero--home::before { display: none; }
.mbx-hero--home .mbx-h1 { color: var(--mbx-ink); font-size: clamp(2.3rem, 5vw, 3.7rem); }
.mbx-hero__h1-accent { background: linear-gradient(90deg, #0b996e 0%, #06664a 30%, #0d1a15 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mbx-hero__sub { color: #5d6b80; }
.mbx-hero__badge { background: #fff; border-color: #dbe9e1; color: var(--mbx-ink); box-shadow: 0 4px 14px rgba(11,153,110,.08); }
.mbx-hero__badge:hover { background: #fff; color: var(--mbx-ink); box-shadow: 0 6px 18px rgba(11,153,110,.14); }
.mbx-hero--home .mbx-search { background: #fff; border: 1px solid #dbe9e1; border-radius: 999px; box-shadow: 0 14px 38px rgba(13,26,21,.10); }
.mbx-hero__popular { color: #64748b; }
.mbx-hero--home .mbx-chip-dark { color: #334155; border-color: #dbe9e1; background: rgba(255,255,255,.75); }
.mbx-hero--home .mbx-chip-dark:hover { background: #fff; color: var(--mbx-ink); border-color: #dbe9e1; }
.mbx-hero__trust { border-top: 0; padding-bottom: 46px; }
.mbx-hero--home .mbx-stats { gap: 14px; }
.mbx-hero--home .mbx-stat { background: rgba(255,255,255,.85); border: 1px solid #dbe9e1 !important; border-radius: 20px; box-shadow: 0 6px 20px rgba(13,26,21,.05); padding: 22px 16px; }
.mbx-hero--home .mbx-stat__num { color: var(--mbx-ink); font-family: var(--mbx-head-font); }
.mbx-hero--home .mbx-stat__label { color: #64748b; }
.mbx-demo__window { box-shadow: 0 30px 70px rgba(13,26,21,.16), 0 0 0 1px #dbe9e1; border-radius: 20px; }

/* ---------- Categories: pastel tiles ---------- */
.mbx-cats { gap: 16px; }
.mbx-cat { flex-direction: column; gap: 14px; padding: 24px; border: 1px solid #eceff5; border-radius: 24px; min-height: 196px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.mbx-cat::after { content: 'Explore \2192'; margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--mbx-brand); }
.mbx-cat:hover { border-color: #dbe9e1; box-shadow: 0 16px 36px rgba(13,26,21,.08); transform: translateY(-3px); }
.mbx-cat__icon { width: 54px; height: 54px; border-radius: 17px; font-size: 21px; }
.mbx-cat__title { font-family: var(--mbx-head-font); font-size: 16px; }
.mbx-cats .mbx-cat:nth-child(4n+1) .mbx-cat__icon { background: #eef7f2; color: #0d1a15; }
.mbx-cats .mbx-cat:nth-child(4n+2) .mbx-cat__icon { background: #eef7f2; color: #0b996e; }
.mbx-cats .mbx-cat:nth-child(4n+3) .mbx-cat__icon { background: #e9f8ef; color: #17a35a; }
.mbx-cats .mbx-cat:nth-child(4n+4) .mbx-cat__icon { background: #eef7f2; color: #0d1a15; }

/* ---------- What practices are saying: soft quote cards ---------- */
.mbx-reviews { gap: 18px; }
.mbx-review { position: relative; background: #eef7f2; border: 1px solid #dbe9e1; border-radius: 26px; padding: 30px 28px 24px; box-shadow: none; transition: transform .2s, box-shadow .2s; }
.mbx-review:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13,26,21,.08); }
.mbx-review::before { content: '\201C'; position: absolute; top: 6px; right: 22px; font-family: Georgia, serif; font-size: 86px; line-height: 1; color: #0b996e; opacity: .18; }
.mbx-reviews .mbx-review:nth-child(3n+2) { background: #eef7f2; border-color: #dbe9e1; }
.mbx-reviews .mbx-review:nth-child(3n+2)::before { color: #0d1a15; }
.mbx-reviews .mbx-review:nth-child(3n+3) { background: #f2fbf6; border-color: #dff2e7; }
.mbx-reviews .mbx-review:nth-child(3n+3)::before { color: #17a35a; }
.mbx-review__title { font-family: var(--mbx-head-font); font-size: 17px; }
.mbx-review__body { color: #4b5768; }
.mbx-review__foot { border-top-color: rgba(15,23,42,.07); }
.mbx-review__avatar { background: linear-gradient(135deg, #a8e3c8, #0b996e); }
.mbx-reviews .mbx-review:nth-child(3n+2) .mbx-review__avatar { background: linear-gradient(135deg, #a8e3c8, #0d1a15); }
.mbx-reviews .mbx-review:nth-child(3n+3) .mbx-review__avatar { background: linear-gradient(135deg, #8fe0b0, #17a35a); }

/* ---------- Companies near you: state cards ---------- */
.mbx-states { gap: 12px; }
.mbx-state { position: relative; padding: 15px 16px 15px 54px; border: 1px solid #eceff5; border-radius: 18px; background: #fff; font-weight: 600; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mbx-state::before { content: '\f3c5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #eef7f2; color: #0b996e; font-size: 13px; }
.mbx-state:hover { color: var(--mbx-ink); border-color: #dbe9e1; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,26,21,.07); }
.mbx-state__n { background: #eef7f2; color: #0d1a15; font-weight: 700; }

/* ---------- Blog: rounded image cards ---------- */
.mbx-posts { gap: 20px; }
.mbx-post { border: 1px solid #eceff5; border-radius: 26px; padding: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.mbx-post:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13,26,21,.08); }
.mbx-post__img { border-radius: 18px; }
.mbx-post__body { padding: 16px 10px 10px; display: flex; flex-direction: column; flex: 1; }
.mbx-post__meta { display: inline-block; align-self: flex-start; background: #eef7f2; color: #0d1a15; padding: 4px 10px; border-radius: 999px; font-size: 11px; }
.mbx-post__title { font-family: var(--mbx-head-font); font-size: 17.5px; }
.mbx-post__body::after { content: 'Read article \2192'; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--mbx-brand); }

/* ---------- How it works: 3-step flow ---------- */
.mbx-flow { max-width: 520px; margin: 0 auto; display: grid; gap: 0; }
.mbx-flow__step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.mbx-flow__num { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-family: var(--mbx-head-font); font-weight: 800; font-size: 18px; background: #eef7f2; color: #0b996e; box-shadow: 0 6px 16px rgba(11,153,110,.15); }
.mbx-flow__num--brand { background: #eef7f2; color: #0d1a15; box-shadow: 0 6px 16px rgba(11,153,110,.15); }
.mbx-flow__num--ok { background: #e9f8ef; color: #17a35a; box-shadow: 0 6px 16px rgba(23,163,90,.15); }
.mbx-flow__card { background: #fff; border: 1px solid #eceff5; border-radius: 22px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.mbx-flow__card--brand { background: linear-gradient(160deg, #eef7f2, #fff 70%); border-color: #dbe9e1; }
.mbx-flow__card small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.mbx-flow__card > b { display: block; font-family: var(--mbx-head-font); color: var(--mbx-ink); font-size: 16px; margin: 4px 0 10px; }
.mbx-flow__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mbx-flow__tags span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: #f7f8fb; border: 1px solid #eef0f5; font-size: 12.5px; font-weight: 600; color: #334155; }
.mbx-flow__tags i { color: #0b996e; font-size: 11px; }
.mbx-flow__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mbx-flow__checks li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #dbe9e1; font-size: 12.5px; font-weight: 600; color: #0d1a15; }
.mbx-flow__checks i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #17a35a; color: #fff; font-size: 8px; }
.mbx-flow__matches { display: grid; gap: 8px; }
.mbx-flow__co { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #eef0f5; border-radius: 16px; background: #fbfcfe; }
.mbx-flow__co img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #eef0f5; object-fit: contain; background: #fff; padding: 3px; }
.mbx-flow__co b { display: block; font-size: 13.5px; color: var(--mbx-ink); }
.mbx-flow__co small { color: var(--mbx-muted); font-size: 12px; }
.mbx-flow__co small i { color: #ffb21e; }
.mbx-flow__co em { font-style: normal; padding: 6px 12px; border-radius: 999px; background: var(--mbx-ink); color: #fff; font-size: 12px; font-weight: 700; }
.mbx-flow__arrow { margin: 6px 0 6px 15px; width: 16px; text-align: center; color: #c4c9d6; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .mbx-flow__arrow i { animation: mbxNudge 1.6s ease-in-out infinite; }
  .mbx-flow__checks li { animation: mbxPop .5s ease both; }
  .mbx-flow__checks li:nth-child(2) { animation-delay: .1s; } .mbx-flow__checks li:nth-child(3) { animation-delay: .2s; }
  .mbx-flow__checks li:nth-child(4) { animation-delay: .3s; } .mbx-flow__checks li:nth-child(5) { animation-delay: .4s; }
}
@keyframes mbxNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes mbxPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- Sign in / sign up ---------- */
.mbx-auth-body { background: radial-gradient(800px 500px at 100% 0%, #eef7f2 0%, transparent 60%), radial-gradient(700px 480px at 0% 100%, #eef7f2 0%, transparent 60%), #eef7f2; }
.mbx-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mbx-auth__brand { background: transparent !important; color: var(--mbx-ink); padding: 44px 56px; }
.mbx-auth__brand::before { display: none; }
.mbx-auth__main { padding: 40px 24px; }
.mbx-auth__box { background: #fff; border: 1px solid #dbe9e1; border-radius: 30px; padding: 38px 36px; box-shadow: 0 24px 60px rgba(13,26,21,.10); max-width: 470px; }
.mbx-auth__box .mbx-h2 { font-size: 1.9rem !important; }
.mbx-auth__head { font-family: var(--mbx-head-font); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--mbx-ink); margin: 0 0 14px; }
.mbx-auth__head span { background: linear-gradient(90deg, #0b996e, #0d1a15); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mbx-auth__lead { color: #5d6b80; font-size: 1.05rem; line-height: 1.6; margin: 0 0 26px; max-width: 440px; }
.mbx-auth__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mbx-auth__perks li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: #334155; }
.mbx-auth__perks i { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; }
.mbx-auth__perks li:nth-child(1) i { background: #eef7f2; color: #0d1a15; }
.mbx-auth__perks li:nth-child(2) i { background: #eef7f2; color: #0b996e; }
.mbx-auth__perks li:nth-child(3) i { background: #e9f8ef; color: #17a35a; }
.mbx-auth__art { position: relative; height: 190px; margin-top: 30px; max-width: 440px; }
.mbx-auth__art > div { position: absolute; background: #fff; border: 1px solid #dbe9e1; border-radius: 18px; box-shadow: 0 14px 34px rgba(13,26,21,.10); padding: 12px 14px; font-size: 13px; }
.mbx-auth__art .is-review { left: 0; top: 0; width: 72%; }
.mbx-auth__art .is-review i { color: #ffb21e; font-size: 11px; }
.mbx-auth__art .is-review b { display: block; color: var(--mbx-ink); margin: 4px 0 2px; }
.mbx-auth__art .is-review small { color: var(--mbx-muted); }
.mbx-auth__art .is-match { right: 0; top: 104px; display: flex; gap: 10px; align-items: center; }
.mbx-auth__art .is-match span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #e9f8ef; color: #17a35a; }
.mbx-auth__art .is-match b { display: block; color: var(--mbx-ink); }
.mbx-auth__art .is-match small { color: var(--mbx-muted); }
@media (prefers-reduced-motion: no-preference) { .mbx-auth__art > div { animation: mbxFloat 6s ease-in-out infinite; } .mbx-auth__art .is-match { animation-delay: -3s; } }
@media (max-width: 960px) {
  .mbx-auth { grid-template-columns: 1fr; }
  .mbx-auth__box { padding: 28px 20px; border-radius: 24px; }
}

/* hero demo on the light hero */
.mbx-hero--home .mbx-demo__hero { background: linear-gradient(160deg, #f6f3ff, #eef7f2); color: var(--mbx-ink); }
.mbx-hero--home .mbx-demo__hero > b { color: var(--mbx-ink); }
.mbx-hero--home .mbx-demo__caption span { color: #64748b; border-color: #dbe9e1; background: rgba(255,255,255,.7); }
.mbx-hero--home .mbx-demo__caption span.is-on { color: #0d1a15; border-color: #dbe9e1; background: #eef7f2; }
.mbx-flow__co small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--mbx-muted); }
.mbx-state__txt { display: grid; line-height: 1.25; } .mbx-state__txt b { color: var(--mbx-ink); font-size: 15px; font-family: var(--mbx-head-font); } .mbx-state__txt small { color: var(--mbx-muted); font-weight: 500; font-size: 12.5px; }
@media (max-width: 640px) { .mbx-states { grid-template-columns: 1fr 1fr !important; gap: 8px; } .mbx-state { padding: 12px 10px 12px 46px; } .mbx-state::before { left: 10px; width: 26px; height: 26px; } .mbx-state__txt small, .mbx-state > i { display: none; } .mbx-state__txt b { font-size: 14px; } }

/* ==========================================================================
   v5: Google Sans, trusted green + black (Brevo style), one accent colour
   ========================================================================== */
:root {
  --mbx-font: 'Google Sans', 'Google Sans Text', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mbx-head-font: 'Google Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mbx-green: #0b996e;
  --mbx-green-dark: #087a58;
  --mbx-green-soft: #eaf6ef;
  --mbx-green-line: #cfe9dc;
}
.mbx-h1, .mbx-h2, .mbx-hero--home .mbx-h1, .mbx-auth__head, .mbx-ri__big { font-weight: 700; letter-spacing: -.02em; }
.mbx-h3, .mbx-card__title, .mbx-dh__title { font-weight: 700; }

/* Buttons: solid colours only, so hover never flashes white */
.mbx-btn { background-image: none !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.mbx-btn--primary { background-color: var(--mbx-brand); color: #fff; box-shadow: 0 6px 16px rgba(13,26,21,.16); }
.mbx-btn--primary:hover { background-color: var(--mbx-brand-dark); color: #fff; box-shadow: 0 10px 22px rgba(13,26,21,.22); }
.mbx-btn--accent { background-color: var(--mbx-green); color: #fff; box-shadow: 0 6px 16px rgba(11,153,110,.22); }
.mbx-btn--accent:hover { background-color: var(--mbx-green-dark); color: #fff; box-shadow: 0 10px 22px rgba(11,153,110,.28); }
.mbx-btn--outline { background-color: #fff; }
.mbx-btn--outline:hover { background-color: #f6faf8; border-color: #b9d9c9; color: var(--mbx-ink); }

/* Links and small labels */
.mbx-link { color: var(--mbx-ink); }
.mbx-link:hover { color: var(--mbx-green-dark); }
.mbx-eyebrow { background: var(--mbx-green-soft); border-color: var(--mbx-green-line); color: var(--mbx-green-dark); }

/* One accent colour in headlines (no multicolour gradients) */
.mbx-hero__h1-accent, .mbx-auth__head span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mbx-green); }

/* Light green hero like Brevo */
.mbx-hero--home { background:
    radial-gradient(900px 520px at 88% -12%, #d8f2e4 0%, transparent 62%),
    radial-gradient(760px 460px at -8% 112%, #e4f6ec 0%, transparent 62%),
    linear-gradient(180deg, #f2faf5 0%, #fbfdfc 100%); }
.mbx-auth-body { background: radial-gradient(800px 500px at 100% 0%, #d8f2e4 0%, transparent 60%), radial-gradient(700px 480px at 0% 100%, #e4f6ec 0%, transparent 60%), #f7fbf9; }
.mbx-hero__badge b { background: var(--mbx-green); }
.mbx-section--soft { background: linear-gradient(180deg, #f4faf6, #fff 85%); }
.mbx-ig--soft { background: linear-gradient(180deg, #f2f9f5, #fff 90%); }

/* Same calm colour for all tiles and quote cards */
.mbx-cats .mbx-cat .mbx-cat__icon { background: var(--mbx-green-soft) !important; color: var(--mbx-green) !important; }
.mbx-cat::after { color: var(--mbx-green-dark); }
.mbx-cat:hover { border-color: var(--mbx-green-line); }
.mbx-reviews .mbx-review { background: #f5fbf8 !important; border-color: #dcefe4 !important; }
.mbx-reviews .mbx-review::before { color: var(--mbx-green) !important; }
.mbx-reviews .mbx-review .mbx-review__avatar { background: var(--mbx-green) !important; }
.mbx-state::before { background: var(--mbx-green-soft); color: var(--mbx-green); }
.mbx-state__n, .mbx-post__meta { background: var(--mbx-green-soft); color: var(--mbx-green-dark); }
.mbx-post__body::after { color: var(--mbx-green-dark); }
.mbx-auth__perks li i { background: var(--mbx-green-soft) !important; color: var(--mbx-green) !important; }
.mbx-ri__track span { background: var(--mbx-green); }
.mbx-ri__score { background: linear-gradient(150deg, #f2faf6, #fff 70%); }
.mbx-ri__overall { border-right-color: #e3efe8; }

/* How it works: thick animated dashed links between the steps (no numbers) */
.mbx-flow__step { grid-template-columns: minmax(0, 1fr) !important; }
.mbx-flow__num { display: none !important; }
.mbx-flow__arrow { display: none !important; }
.mbx-flow__link { position: relative; height: 46px; }
.mbx-flow__link::before { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, var(--mbx-green) 0 9px, transparent 9px 17px); background-size: 3px 17px; }
.mbx-flow__link::after { content: ''; position: absolute; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-green); box-shadow: 0 0 0 4px rgba(11,153,110,.16); }
.mbx-flow__link--l::before { left: 34px; } .mbx-flow__link--l::after { left: 30.5px; }
.mbx-flow__link--r::before { right: 34px; } .mbx-flow__link--r::after { right: 30.5px; }
@media (prefers-reduced-motion: no-preference) {
  .mbx-flow__link::before { animation: mbxFlowDash .9s linear infinite; }
}
@keyframes mbxFlowDash { from { background-position: 0 0; } to { background-position: 0 17px; } }
.mbx-flow__card--brand { background: linear-gradient(160deg, #f1faf5, #fff 70%) !important; border-color: var(--mbx-green-line) !important; }
.mbx-flow__checks li { border-color: var(--mbx-green-line); color: var(--mbx-green-dark); }
.mbx-flow__tags i { color: var(--mbx-green); }
.mbx-flow__card small { color: var(--mbx-green-dark); }

/* ==========================================================================
   v6: Brevo palette. Lime (#c0ffa5) is a background colour, buttons are black,
   secondary buttons are outlined and fill on hover. Deep green only for small accents.
   ========================================================================== */
:root {
  --mbx-lime: #c0ffa5;
  --mbx-lime-soft: #eaffe0;
  --mbx-lime-pale: #f5fff0;
  --mbx-green: #0a7d57;
  --mbx-green-dark: #06603f;
  --mbx-green-soft: #e6f8ea;
  --mbx-green-line: #c8ecd2;
}

/* filled = black (main actions) */
.mbx-btn--primary, .mbx-btn--accent, .mbx-btn--dark { background-color: #111111 !important; color: #fff !important; border-color: #111111 !important; box-shadow: none !important; }
.mbx-btn--primary:hover, .mbx-btn--accent:hover, .mbx-btn--dark:hover { background-color: #2b2b2b !important; border-color: #2b2b2b !important; color: #fff !important; }
/* outline = empty, fills black on hover (like "Talk to sales") */
.mbx-btn--outline { background-color: transparent !important; color: #111111 !important; border: 1.5px solid #111111 !important; box-shadow: none !important; }
.mbx-btn--outline:hover { background-color: #111111 !important; color: #fff !important; border-color: #111111 !important; }
.mbx-btn--outline:hover i, .mbx-btn--primary i, .mbx-btn--accent i { color: inherit !important; }
/* header register button */
.mbx-reg__btn { background: #111111 !important; border-radius: 999px !important; }
.mbx-reg__btn:hover, .mbx-reg:hover .mbx-reg__btn, .mbx-reg:focus-within .mbx-reg__btn { background: #2b2b2b !important; color: #fff !important; }

/* lime hero and calm lime tints */
.mbx-hero--home { background: linear-gradient(180deg, var(--mbx-lime) 0%, #d6ffc4 62%, var(--mbx-lime-pale) 100%) !important; }
.mbx-hero__h1-accent, .mbx-auth__head span { color: var(--mbx-green) !important; }
.mbx-hero__badge { border-color: rgba(17,17,17,.12); }
.mbx-hero__badge b { background: #111111 !important; }
.mbx-hero--home .mbx-search { border-color: rgba(17,17,17,.10); box-shadow: 0 14px 34px rgba(17,17,17,.08); }
.mbx-hero--home .mbx-stat { background: rgba(255,255,255,.72); border-color: rgba(17,17,17,.06) !important; }
.mbx-hero--home .mbx-chip-dark { background: rgba(255,255,255,.6); border-color: rgba(17,17,17,.12); color: #1f2a24; }
.mbx-hero--home .mbx-demo__hero { background: linear-gradient(160deg, var(--mbx-lime-soft), #fff); }
.mbx-auth-body { background: radial-gradient(800px 520px at 100% 0%, var(--mbx-lime) 0%, transparent 60%), radial-gradient(700px 480px at 0% 100%, var(--mbx-lime-soft) 0%, transparent 60%), #fbfff8 !important; }
.mbx-section--soft, .mbx-ig--soft { background: linear-gradient(180deg, var(--mbx-lime-pale), #fff 85%) !important; }
.mbx-eyebrow { background: var(--mbx-lime-soft) !important; border-color: #cdf3b8 !important; color: #1f4a12 !important; }

/* outline icons (Tabler) in the category tiles */
.mbx-cat__icon .ti { font-size: 26px; line-height: 1; }
.mbx-cats .mbx-cat .mbx-cat__icon { background: var(--mbx-lime-soft) !important; color: #1f4a12 !important; border: 1px solid #d8f6c6; }

/* On dark surfaces the main button turns lime (black text), outline buttons turn white */
.mbx-hero:not(.mbx-hero--home) .mbx-btn--accent, .mbx-hero:not(.mbx-hero--home) .mbx-btn--primary,
.mbx-split__card--dark .mbx-btn--accent, .mbx-split__card--dark .mbx-btn--primary,
.mbx-footer .mbx-btn--accent, .mbx-footer .mbx-btn--primary,
.mbx-phead .mbx-btn--accent, .mbx-phead .mbx-btn--primary,
.mbx-gm .mbx-btn--accent, .mbx-gm .mbx-btn--primary, .mbx-dircta .mbx-btn--accent, .mbx-dircta .mbx-btn--primary,
.mbx-rank .mbx-btn--accent, .mbx-rl__bg .mbx-btn--accent {
  background-color: var(--mbx-lime) !important; border-color: var(--mbx-lime) !important; color: #111111 !important; }
.mbx-hero:not(.mbx-hero--home) .mbx-btn--accent:hover, .mbx-hero:not(.mbx-hero--home) .mbx-btn--primary:hover,
.mbx-split__card--dark .mbx-btn--accent:hover, .mbx-split__card--dark .mbx-btn--primary:hover,
.mbx-footer .mbx-btn--accent:hover, .mbx-footer .mbx-btn--primary:hover,
.mbx-phead .mbx-btn--accent:hover, .mbx-phead .mbx-btn--primary:hover,
.mbx-gm .mbx-btn--accent:hover, .mbx-gm .mbx-btn--primary:hover, .mbx-dircta .mbx-btn--accent:hover, .mbx-dircta .mbx-btn--primary:hover,
.mbx-rank .mbx-btn--accent:hover, .mbx-rl__bg .mbx-btn--accent:hover {
  background-color: #d4ffbf !important; border-color: #d4ffbf !important; color: #111111 !important; }
.mbx-hero:not(.mbx-hero--home) .mbx-btn--outline, .mbx-split__card--dark .mbx-btn--outline, .mbx-footer .mbx-btn--outline,
.mbx-phead .mbx-btn--outline, .mbx-gm .mbx-btn--outline, .mbx-dircta .mbx-btn--outline {
  color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
.mbx-hero:not(.mbx-hero--home) .mbx-btn--outline:hover, .mbx-split__card--dark .mbx-btn--outline:hover, .mbx-footer .mbx-btn--outline:hover,
.mbx-phead .mbx-btn--outline:hover, .mbx-gm .mbx-btn--outline:hover, .mbx-dircta .mbx-btn--outline:hover {
  background-color: #fff !important; color: #111111 !important; border-color: #fff !important; }
.mbx-hero:not(.mbx-hero--home) .mbx-hero__badge b { background: var(--mbx-lime) !important; color: #111 !important; }

/* ==========================================================================
   v7: a few calm Brevo accents (cream, lilac, sky next to lime)
   ========================================================================== */
:root { --mbx-cream: #fbf6e8; --mbx-lilac2: #ece9ff; --mbx-sky: #e5f3ff; }

/* hero stats: dashed 2px borders, one soft colour each */
.mbx-hero--home .mbx-stat { border: 2px dashed rgba(17,17,17,.16) !important; box-shadow: none; }
.mbx-hero--home .mbx-stat:nth-child(1) { background: #ffffffcc; }
.mbx-hero--home .mbx-stat:nth-child(2) { background: var(--mbx-cream); border-color: #e6d9b0 !important; }
.mbx-hero--home .mbx-stat:nth-child(3) { background: var(--mbx-lilac2); border-color: #cbc4f3 !important; }
.mbx-hero--home .mbx-stat:nth-child(4) { background: var(--mbx-sky); border-color: #bcdcf4 !important; }

/* review quotes: cream / lilac / lime like Brevo's story cards */
.mbx-reviews .mbx-review:nth-child(3n+1) { background: var(--mbx-cream) !important; border-color: #efe5c6 !important; }
.mbx-reviews .mbx-review:nth-child(3n+2) { background: var(--mbx-lilac2) !important; border-color: #dcd7fb !important; }
.mbx-reviews .mbx-review:nth-child(3n+3) { background: var(--mbx-lime-soft) !important; border-color: #d3f5c1 !important; }
.mbx-reviews .mbx-review::before { color: #111 !important; opacity: .12; }
.mbx-reviews .mbx-review .mbx-review__avatar { background: #111 !important; }

/* split cards and the "for companies" infographic panel get the lilac tint */
.mbx-split__card--brand { background: var(--mbx-lilac2) !important; border-color: #dcd7fb !important; }
.mbx-ig--soft { background: linear-gradient(180deg, #f4f2ff, #fff 90%) !important; }
.mbx-post__meta { background: var(--mbx-cream) !important; color: #6b5414 !important; }

/* company cards on phones: big "View profile", small "Compare" */
@media (max-width: 960px) {
  .mbx-crow__cta { flex-direction: column !important; align-items: stretch; gap: 10px; }
  .mbx-crow__cta .mbx-btn { flex: none !important; width: 100%; height: 50px; font-size: 15.5px; }
  .mbx-crow__cta .mbx-cmpbtn { align-self: center; width: auto; padding: 6px 14px; font-size: 13px; border-style: dashed; }
}

/* sign-in illustration: animated dashed link between the two cards */
.mbx-auth__link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.mbx-auth__link path { fill: none; stroke: var(--mbx-green); stroke-width: 2.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.mbx-auth__art > div { z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .mbx-auth__link path { animation: mbxDash 1.2s linear infinite; } }

/* company cards on phones: logo + name/rating side by side, text uses the full width */
@media (max-width: 640px) {
  .mbx-crow { border-radius: 18px; }
  .mbx-crow__main { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 16px 14px !important; align-items: center; }
  .mbx-crow__main > a.mbx-crow__logolink { grid-row: 1 / span 2; align-self: start; }
  .mbx-crow__main > div { display: contents; }
  .mbx-crow__main > div > div:first-child { grid-column: 2; gap: 6px !important; }
  .mbx-crow__main .mbx-rating { grid-column: 2; margin-top: 2px !important; flex-wrap: nowrap; white-space: nowrap; font-size: 13px; }
  .mbx-crow__main .mbx-rating .mbx-stars { font-size: 12px; }
  .mbx-crow__main > div > [x-data] { grid-column: 1 / -1; margin-top: 10px; }
  .mbx-crow__logo { width: 52px !important; height: 52px !important; border-radius: 12px; }
  .mbx-crow__name { font-size: 17px; line-height: 1.25; }
  .mbx-crow__desc { font-size: 14px; margin-top: 0; }
  .mbx-crow__facts { display: flex !important; flex-wrap: wrap; gap: 8px 16px !important; padding: 14px 16px !important; font-size: 13.5px; }
  .mbx-crow__facts .mbx-tags { flex-basis: 100%; margin-top: 2px; }
  .mbx-crow__cta { padding: 14px 16px 16px !important; }
}

/* v8: sign-in illustration moves as one piece so the link stays attached */
.mbx-auth__art { width: 440px; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .mbx-auth__art > div { animation: none !important; }
  .mbx-auth__art { animation: mbxFloat 6s ease-in-out infinite; }
}
.mbx-auth__link path { stroke: #0a7d57; stroke-width: 2.5; stroke-dasharray: 6 7; opacity: .55; }
.mbx-auth__dot { fill: #fff; stroke: #0a7d57; stroke-width: 2.5; }
.mbx-auth__runner { fill: #0a7d57; filter: drop-shadow(0 0 4px rgba(10,125,87,.45)); }
@media (prefers-reduced-motion: reduce) { .mbx-auth__runner { display: none; } }

/* v8: company card buttons on desktop fill the action column */
@media (min-width: 961px) {
  .mbx-crow__cta { padding: 22px 20px !important; gap: 10px; }
  .mbx-crow__cta .mbx-btn { width: 100%; height: 46px; font-size: 15px; justify-content: center; }
  .mbx-crow__cta .mbx-cmpbtn { width: 100%; height: 40px; justify-content: center; font-size: 14px; }
}
@media (min-width: 961px) {
  .mbx-crow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 230px !important; }
  .mbx-crow__cta { padding: 22px 24px !important; }
}