/* Marketlinx DIGITAL - V3 sitewide stylesheet. Built by tools/v3-build.js; do not edit the hashed file directly. */

:root {
  --mkd-primary: #0f1c2e;
  --mkd-primary-footer: #0b1524;
  --mkd-primary-lt: #eff4fb;
  --mkd-accent: #188bf6;
  --mkd-accent-hover: #0d72d4;
  --mkd-accent-on-dark: #7cc0fb;
  --mkd-cta: #37ca37;
  --mkd-cta-hover: #2fa82f;
  --mkd-cta-alt: #ffc107;
  --mkd-cta-alt-hover: #e6ac00;
  --mkd-cta-alt-text: #0f1c2e;
  --mkd-success: #37ca37;
  --mkd-success-dk: #2fa82f;
  --mkd-warning: #ffc107;
  --mkd-danger: #df001b;
  --mkd-text: #2a2d34;
  --mkd-muted: #6b7280;
  --mkd-border: #e5e7eb;
  --mkd-border-strong: #cbd5e1;
  --mkd-bg: #f2f5f9;
  --mkd-surface: #fafcfe;
  --mkd-on-dark: rgba(255,255,255,0.78);
  --mkd-line-on-dark: rgba(255,255,255,0.1);
  --mkd-navy-grad: linear-gradient(160deg, #17304a 0%, #0f1c2e 45%, #0a1522 100%);
  --mkd-surface-grad: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  --mkd-tint-grad: linear-gradient(180deg, #f5f8fb 0%, #eef2f7 100%);
  --mkd-ease: cubic-bezier(.4,0,.2,1);
  --mkd-r-s: 4px;
  --mkd-r-m: 8px;
  --mkd-r-pill: 999px;
  --mkd-maxw: 1160px;
  --mkd-gutter: clamp(20px, 4vw, 40px);
  --mkd-band-pad: clamp(48px, 6vw, 76px);
  --mkd-text-base: 15px;
  --mkd-leading-body: 1.65;
  --mkd-leading-tight: 1.35;
  --mkd-leading-heading: 1.2;
}

html { scroll-behavior: smooth; }
  body { margin:0; background:#fafafa; font-family:'Poppins',sans-serif; -webkit-font-smoothing:antialiased; }
  p { margin:0; }
  img { display:block; max-width:100%; }
  a { color:#188bf6; text-decoration:none; }
  a:hover { color:#0d72d4; }
  input, select, textarea, button { font-family:'Poppins',sans-serif; }
  input:focus, textarea:focus { outline:0; border-color:#188bf6; box-shadow:0 0 0 3px rgba(24,139,246,0.15); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
  @keyframes mlx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .mlx-reveal { opacity:0; transform:translateY(16px); transition: opacity 550ms cubic-bezier(.4,0,.2,1), transform 550ms cubic-bezier(.4,0,.2,1); }
  .mlx-reveal.mlx-in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .mlx-reveal { opacity:1 !important; transform:none !important; transition:none !important; } }
  @keyframes mlx-spin { to { transform: rotate(360deg); } }
  @keyframes mlx-spin-rev { to { transform: rotate(-360deg); } }
  .mlx-ring-a { animation: mlx-spin 60s linear infinite; }
  .mlx-ring-a .mlx-up { animation: mlx-spin-rev 60s linear infinite; }
  .mlx-ring-b { animation: mlx-spin-rev 100s linear infinite; }
  .mlx-ring-b .mlx-up { animation: mlx-spin 100s linear infinite; }
  .mlx-orbit:hover .mlx-ring, .mlx-orbit:hover .mlx-up { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .mlx-ring, .mlx-up { animation: none !important; } }
  .mlx-badge { width:190px; flex:none; display:flex; flex-direction:column; gap:12px; align-items:center; color:inherit; }
  .mlx-badge img { width:130px; transition: transform 180ms cubic-bezier(.4,0,.2,1); }
  .mlx-badge figcaption { opacity:0; transform:translateY(4px); transition: opacity 180ms cubic-bezier(.4,0,.2,1), transform 180ms cubic-bezier(.4,0,.2,1); }
  .mlx-badge:hover figcaption, .mlx-badge:focus figcaption { opacity:1; transform:none; }
  @media (max-width:960px), (hover:none) { .mlx-badge figcaption { opacity:1; transform:none; } }
  .mlx-marquee-track { display:flex; gap:20px; width:max-content; padding-right:20px; animation: mlx-marquee 45s linear infinite; }
  .mlx-marquee:hover .mlx-marquee-track { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .mlx-marquee { overflow-x:auto !important; }
    .mlx-marquee-track { animation:none; }
  }
  @media (max-width:960px) {
    .mlx-nav { display:none !important; }
    .mlx-hero { grid-template-columns:1fr !important; gap:40px !important; }
    .mlx-2col { grid-template-columns:1fr !important; gap:36px !important; }
    .mlx-strip { grid-template-columns:1fr !important; }
    .mlx-strip > div { border-left:0 !important; border-top:1px solid #e5e7eb !important; padding-left:0 !important; padding-right:0 !important; }
    .mlx-strip > div:first-child { border-top:0 !important; }
    .mlx-orbit { height:auto !important; }
    .mlx-orbit-ring { display:none !important; }
    .mlx-orbit-center { position:static !important; transform:none !important; margin:0 auto !important; }
    .mlx-ring { position:static !important; animation:none !important; display:flex !important; flex-wrap:wrap !important; gap:10px !important; justify-content:center !important; margin-top:16px !important; }
    .mlx-planet { position:static !important; transform:none !important; }
    .mlx-up { animation:none !important; }
    .mlx-faq { grid-template-columns:1fr !important; gap:10px !important; }
    .mlx-flowhead { display:none !important; }
    .mlx-flowrow { grid-template-columns:1fr !important; }
    .mlx-flowrow p { padding:7px 20px !important; display:block !important; }
    .mlx-flowrow > p:first-child { padding-top:18px !important; display:flex !important; }
    .mlx-flowrow > p:last-child { padding-bottom:18px !important; }
    .mlx-flowlabel { display:block !important; }
    .mlx-footcols { grid-template-columns:1fr !important; gap:24px !important; }
    .mlx-chat { display:none !important; }
  }


/* Atmosphere: soft cool surfaces + navy depth. Inline backgrounds on
   sections/headers are overridden so the whole V3 site picks this up
   without rewriting every page. Cards stay flat white for contrast. */
body {
  background-color: #f2f5f9;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(24, 139, 246, 0.07), transparent 55%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  background-attachment: fixed;
}
/* Most pages wrap everything in a flat #fafafa shell; let the body
   wash show through instead of painting over it. */
body > div[style*="background:#fafafa"] {
  background-color: transparent !important;
  background-image: none !important;
}
header[style*="background:#0f1c2e"],
section[style*="background:#0f1c2e"],
.mlx-band--navy {
  background-color: #0f1c2e !important;
  background-image: var(--mkd-navy-grad) !important;
}
section[style*="background:#ffffff"],
.mlx-band--white {
  background-color: #fafcfe !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(24, 139, 246, 0.045), transparent 55%),
    var(--mkd-surface-grad) !important;
}
section[style*="background:#fafafa"],
.mlx-band--tint {
  background-color: #f2f5f9 !important;
  background-image: var(--mkd-tint-grad) !important;
}
footer[style*="background:#0b1524"] {
  background-color: #0b1524 !important;
  background-image: linear-gradient(180deg, #101c30 0%, #0b1524 50%, #070e18 100%) !important;
}

/* The design's own mobile collapse (@media max-width:960px, inside
   HELMET_CSS above) sets these six selectors to a bare "1fr" column. A
   bare 1fr grid track carries an implicit min-width:auto, so it refuses
   to shrink below its widest child's content width - on a phone, if any
   child (an image, a nowrap span, a wide flex row) needs more than the
   viewport width, the COLUMN grows past the screen instead of the child
   wrapping inside it. Paired with the body-level overflow-x:clip below,
   the excess did not drag the page, it silently cropped text and images
   off the right edge - "the word doesn't finish". minmax(0,1fr) lets the
   track actually shrink to the container, which is the fix in both
   places at once: the track has room to be exactly viewport-width, and
   its content is then forced to wrap within that room like it should.
   Same specificity and !important as the rule being overridden, placed
   after it in the cascade, so this wins the tie. */
@media (max-width:960px) {
  .mlx-hero, .mlx-2col, .mlx-strip, .mlx-faq, .mlx-flowrow, .mlx-footcols {
    grid-template-columns: minmax(0,1fr) !important;
  }
  /* Orbit: HighLevel hub must lead on mobile. Without this, rings
     stack as flex chips first and Twilio/etc. sit where the centre
     used to be, with the HighLevel card buried underneath. */
  .mlx-orbit {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }
  .mlx-orbit-ring { display: none !important; }
  .mlx-orbit-center {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    order: -1 !important;
    z-index: 2;
  }
  .mlx-ring {
    position: static !important;
    animation: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-top: 0 !important;
    width: 100%;
  }
  .mlx-planet { position: static !important; transform: none !important; }
  .mlx-up { animation: none !important; }
  /* the track can now shrink to fit, but a grid ITEM has the same
     implicit "never shrink below my content" rule independent of its
     track, so a wide child (an image, a non-wrapping row) can still
     force itself past a correctly sized track. min-width:0 on every
     item removes that second, separate source of the same overflow. */
  .mlx-hero > *, .mlx-2col > *, .mlx-strip > *, .mlx-faq > *,
  .mlx-flowrow > *, .mlx-footcols > * {
    min-width: 0;
  }
}

/* Lead form / homepage #audit card: native inputs size themselves from the
   size attribute and refuse to shrink, so they punched out of the white
   card on phones (navy hero showed through the right edge). Force every
   field to the container. Same rules live in the leadform partial; kept
   here so a page that somehow misses the partial style still holds. */
#audit, #mlx-audit-form, #mlx-audit-fields { min-width: 0; max-width: 100%; box-sizing: border-box; }
#audit input[type="text"],
#audit input[type="email"],
#audit input[type="tel"],
#audit textarea,
#audit button[type="submit"] {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
#audit .mlx-fchk { min-width: 0; }
#audit .mlx-fchk input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  flex: 0 0 auto;
  margin: 2px 0 0;
  accent-color: #188bf6;
}
#audit .mlx-fchk span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  #audit[style*="border-radius"] { padding: 20px 16px 22px !important; }
}
/* the trust-badge row on the homepage hero: a flex row, not a grid, so it
   needs the flex equivalent - flex items default to min-width:auto too */
@media (max-width:680px) {
  .mlx-band, section { overflow-wrap: break-word; }
  /* homepage proof strip uses auto-fit minmax(200px,1fr): a 200px floor
     still overflows a ~320px phone once gutters land. Cap the floor. */
  .mlx-strip { grid-template-columns: minmax(0,1fr) !important; }
  .mlx-strip > * { border-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* The design hides .mlx-reveal until JS adds .mlx-in. Gate that on a class
   the head script sets, so blocked or failed JS never leaves content
   invisible to readers or crawlers. */
html:not(.mlx-js) .mlx-reveal { opacity: 1 !important; transform: none !important; }

/* ---- small screens ---- */
/* nothing may drag the page sideways: real offenders are fixed individually,
   this is the last line of defence for anything that slips through */
body { overflow-x: clip; }
/* the page-level header keeps logo + menu on phones; drop the duplicate audit
   CTA when the hero or sticky bar already carries the primary action */
@media (max-width: 680px) {
  header a[href^="tel:"] { display: none !important; }
  header a[href="#audit"],
  header a.mlx-navcta { display: none !important; }
}
/* and on true phone widths the logo shrinks so the bar always fits */
@media (max-width: 480px) {
  header > div > a:first-child img, header img[alt^="Marketlinx"] { height: 32px !important; }
}
/* the on-page nav collapses to a tap-to-open menu on phones. The collapsed
   class is added by the runtime, so without JS every chip stays visible. */
@media (max-width: 680px) {
  .mlx-pagenav.mlx-collapsed .mlx-pagenav-chips { display: none !important; }
  .mlx-pagenav-label { cursor: pointer; }
}

/* on touch screens a tap sets a sticky :hover that never clears, which froze
   the marquees permanently after one touch. Pause-on-hover is a pointer
   nicety: keep it for devices that actually hover */
@media (hover: none) {
  .mlx-marquee:hover .mlx-marquee-track { animation-play-state: running !important; }
  .mlx-orbit:hover .mlx-ring, .mlx-orbit:hover .mlx-up { animation-play-state: running !important; }
}

/* ---- mobile action bar (runtime appends it; keyed on html class so no-JS
        pages simply go without and nothing is covered) ---- */
@media (max-width: 680px) {
  html.mlx-has-ctabar body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .mlx-ctabar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--mkd-primary-footer); border-top: 1px solid var(--mkd-line-on-dark);
  }
  .mlx-ctabar a {
    display: flex; align-items: center; justify-content: center;
    height: 40px; border-radius: var(--mkd-r-s);
    font: 600 14px/1 Poppins, sans-serif; white-space: nowrap;
  }
  .mlx-ctabar a:first-child { background: var(--mkd-cta); color: #fff; }
  .mlx-ctabar a:first-child:active { background: var(--mkd-cta-hover); }
  .mlx-ctabar a:last-child { border: 1px solid rgba(255,255,255,0.3); color: #fff; }
}
@media (min-width: 681px) { .mlx-ctabar { display: none; } }

/* ---- home / clear-path control (runtime; takes you to / with no section) ---- */
.mlx-home-top {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--mkd-accent); color: #fff;
  box-shadow: 0 8px 24px rgba(15, 28, 46, 0.28);
  border: 0; cursor: pointer; text-decoration: none;
  transition: background 180ms var(--mkd-ease), opacity 180ms var(--mkd-ease), transform 180ms var(--mkd-ease);
}
.mlx-home-top:hover, .mlx-home-top:focus-visible { background: var(--mkd-accent-hover); color: #fff; }
.mlx-home-top:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mlx-home-top svg { display: block; }
html.mlx-js.mlx-scrolled .mlx-home-top { display: inline-flex; }
@media (max-width: 680px) {
  html.mlx-has-ctabar .mlx-home-top {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- mobile nav drawer (button + panel; homepage gets these via JS) ---- */
.mlx-menubtn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 4px;
  background: transparent; color: #fff; cursor: pointer;
}
.mlx-menubtn svg { display: block; }
.mlx-drawer { display: none; }
@media (max-width: 960px) {
  .mlx-menubtn { display: inline-flex !important; }
  nav a.mlx-nav.mlx-navlink,
  nav .mlx-help { display: none !important; }
  .mlx-drawer {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
    background: #0b1524; border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 12px var(--mkd-gutter) 18px;
    flex-direction: column; gap: 2px;
  }
  header.mlx-menu-open .mlx-drawer { display: flex; }
  .mlx-drawer a, .mlx-drawer .mlx-drawer-label {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 4px; text-decoration: none;
    font: 500 16px/1.2 Poppins, sans-serif;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mlx-drawer a:last-child { border-bottom: 0; }
  .mlx-drawer a:hover, .mlx-drawer a:focus { color: #ffffff; }
  .mlx-drawer .mlx-drawer-label {
    font: 600 11px/1 Poppins; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); padding-top: 18px; border-bottom: 0;
  }
  .mlx-drawer .mlx-drawer-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; flex: none;
    background: rgba(255,255,255,0.06); color: #7cc0fb;
  }
  .mlx-drawer .mlx-drawer-icon svg { display: block; }
}

/* ---- section vocabulary (README: bands, container, type scale) ---- */
.mlx-band { padding: var(--mkd-band-pad) 0; border-top: 1px solid var(--mkd-border); }
.mlx-band--white { background: var(--mkd-surface); }
.mlx-band--tint { background: var(--mkd-bg); }
.mlx-band--navy { background: var(--mkd-primary); color: var(--mkd-on-dark); border-top-color: var(--mkd-line-on-dark); }
.mlx-container { max-width: var(--mkd-maxw); margin: 0 auto; padding: 0 var(--mkd-gutter); }
.mlx-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.2; color: var(--mkd-accent); }
.mlx-h1 { font-size: clamp(32px, 5.2vw, 48px); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; color: var(--mkd-primary); margin: 0; text-wrap: balance; }
.mlx-h2 { font-size: clamp(26px, 4vw, 38px); line-height: var(--mkd-leading-heading); letter-spacing: -.02em; font-weight: 600; color: var(--mkd-primary); margin: 10px 0 0; text-wrap: balance; }
.mlx-h3 { font-size: 17px; line-height: var(--mkd-leading-tight); font-weight: 600; color: var(--mkd-primary); margin: 0; }
.mlx-body { font-size: var(--mkd-text-base); line-height: var(--mkd-leading-body); font-weight: 400; color: var(--mkd-muted); margin: 0; text-wrap: pretty; }
.mlx-body--on-dark { color: var(--mkd-on-dark); }
.mlx-band--navy .mlx-h1, .mlx-band--navy .mlx-h2 { color: #fff; }
.mlx-statnum { font-family: 'JetBrains Mono', monospace; font-size: 44px; font-weight: 600; line-height: 1.1; }

/* ---- nav help dropdown ---- */
.mlx-help { position: relative; }
.mlx-help-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--mkd-r-s);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.88);
  font: 500 14px/1 Poppins, sans-serif; cursor: pointer; white-space: nowrap;
  transition: background 180ms var(--mkd-ease), border-color 180ms var(--mkd-ease);
}
.mlx-help-trigger:hover, .mlx-help.mlx-open .mlx-help-trigger {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff;
}
.mlx-help-trigger svg { transition: transform 180ms var(--mkd-ease); }
.mlx-help.mlx-open .mlx-help-trigger svg { transform: rotate(180deg); }
.mlx-help-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  min-width: min(340px, calc(100vw - 32px));
  padding: 10px; border-radius: var(--mkd-r-m);
  background: #0b1524; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  display: none; flex-direction: column; gap: 6px;
}
/* Author display:flex used to override the [hidden] UA rule, so the
   panel stayed visible after the chevron closed it. Gate on .mlx-open. */
.mlx-help.mlx-open .mlx-help-menu { display: flex; }
.mlx-help-menu[hidden] { display: none !important; }
.mlx-help-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 14px 14px; border-radius: 8px; text-decoration: none; color: inherit;
  transition: background 140ms var(--mkd-ease);
}
.mlx-help-item:hover, .mlx-help-item:focus-visible {
  background: rgba(255,255,255,0.06); outline: none;
}
.mlx-help-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; flex: none;
}
.mlx-help-icon--support { background: rgba(223,0,27,0.15); color: #ff6b7a; }
.mlx-help-icon--book { background: rgba(24,139,246,0.15); color: #7cc0fb; }
.mlx-help-icon--enquiry { background: rgba(55,202,55,0.12); color: #6ee76e; }
.mlx-help-icon--audit { background: rgba(255,193,7,0.12); color: #ffd54f; }
.mlx-help-text { display: grid; gap: 2px; min-width: 0; }
.mlx-help-text strong { font: 600 14px/1.35 Poppins, sans-serif; color: #fff; }
.mlx-help-text small { font: 400 12px/1.45 Poppins, sans-serif; color: rgba(255,255,255,0.55); }

/* ---- support ticket form ---- */
.mlx-support-form { display: grid; gap: 16px; }
.mlx-support-fields { display: grid; gap: 16px; }
.mlx-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .mlx-support-grid { grid-template-columns: 1fr; } }
.mlx-support-label {
  display: grid; gap: 8px;
  font: 600 13px/1.35 Poppins, sans-serif; color: var(--mkd-text);
}
.mlx-support-opt { font-weight: 400; color: var(--mkd-muted); }
.mlx-support-label input,
.mlx-support-label select,
.mlx-support-label textarea {
  padding: 11px 12px; border: 1px solid var(--mkd-border-strong); border-radius: var(--mkd-r-s);
  font: 400 var(--mkd-text-base)/1.4 Poppins, sans-serif; background: var(--mkd-surface);
  color: var(--mkd-text); width: 100%; box-sizing: border-box;
}
.mlx-support-label textarea { min-height: 120px; resize: vertical; }
.mlx-support-label select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.mlx-support-sla {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  border-radius: var(--mkd-r-m); background: var(--mkd-primary-lt); border: 1px solid #d8e6f8;
  font: 500 14px/1.5 Poppins, sans-serif; color: var(--mkd-primary);
}
.mlx-support-sla svg { flex: none; margin-top: 1px; color: var(--mkd-accent); }
.mlx-support-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font: 400 13px/1.55 Poppins, sans-serif; color: var(--mkd-muted); cursor: pointer;
}
.mlx-support-consent input { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--mkd-accent); }
#mlx-support-status:empty { display: none; }
#mlx-support-status.is-error { color: var(--mkd-danger); }
#mlx-support-status.is-ok { color: var(--mkd-success-dk); }

/* ---- buttons & CTAs (green primary, yellow secondary; blue stays for eyebrows/links) ---- */
.mlx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--mkd-r-s); font-weight: 600; font-size: 15px; border: 0; cursor: pointer; transition: background 180ms var(--mkd-ease), border-color 180ms var(--mkd-ease); }
.mlx-btn--primary { background: var(--mkd-cta); color: #fff; }
.mlx-btn--primary:hover { background: var(--mkd-cta-hover); color: #fff; }
.mlx-btn--ghost { background: transparent; color: var(--mkd-cta-alt-text); border: 1px solid var(--mkd-cta-alt); }
.mlx-btn--ghost:hover { background: var(--mkd-cta-alt); border-color: var(--mkd-cta-alt); color: var(--mkd-cta-alt-text); }
.mlx-band--navy .mlx-btn--ghost {
  background: var(--mkd-cta-alt) !important; border-color: var(--mkd-cta-alt) !important;
  color: var(--mkd-cta-alt-text) !important;
}
.mlx-band--navy .mlx-btn--ghost:hover { background: var(--mkd-cta-alt-hover) !important; border-color: var(--mkd-cta-alt-hover) !important; }

/* Sitewide: override legacy inline blue on action buttons */
.mlx-btn-primary,
.mlx-navcta,
.mlx-hv2,
.mlx-phv1,
a[style*="background:#188bf6"],
button[style*="background:#188bf6"] {
  background: var(--mkd-cta) !important;
  border-color: var(--mkd-cta) !important;
  color: #fff !important;
}
.mlx-btn-primary:hover,
.mlx-navcta:hover,
.mlx-hv2:hover,
.mlx-phv1:hover,
a[style*="background:#188bf6"]:hover,
button[style*="background:#188bf6"]:hover {
  background: var(--mkd-cta-hover) !important;
  border-color: var(--mkd-cta-hover) !important;
  color: #fff !important;
}

/* Secondary actions on dark bands — yellow fill */
a[style*="border:1px solid rgba(255,255,255,0.28)"]:not([href^="tel:"]),
a[style*="border:1px solid rgba(255,255,255,0.35)"]:not([href^="tel:"]) {
  background: var(--mkd-cta-alt) !important;
  border-color: var(--mkd-cta-alt) !important;
  color: var(--mkd-cta-alt-text) !important;
}
a[style*="border:1px solid rgba(255,255,255,0.28)"]:not([href^="tel:"]):hover,
a[style*="border:1px solid rgba(255,255,255,0.35)"]:not([href^="tel:"]):hover,
.mlx-hv5:hover:not([href^="tel:"]) {
  background: var(--mkd-cta-alt-hover) !important;
  border-color: var(--mkd-cta-alt-hover) !important;
}

/* ---- the sitewide lead form (project rule: on every page) ---- */
.mlx-leadform { display: grid; gap: 14px; max-width: 560px; }
.mlx-leadform label { font-size: 13px; font-weight: 600; color: var(--mkd-text); display: grid; gap: 6px; }
.mlx-band--navy .mlx-leadform label { color: var(--mkd-on-dark); }
.mlx-leadform input, .mlx-leadform textarea { padding: 11px 12px; border: 1px solid var(--mkd-border-strong); border-radius: var(--mkd-r-s); font-size: 15px; background: var(--mkd-surface); color: var(--mkd-text); width: 100%; box-sizing: border-box; }
.mlx-leadform textarea { min-height: 96px; resize: vertical; }
.mlx-leadform .mlx-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--mkd-muted); }
.mlx-leadform .mlx-consent input { width: auto; margin-top: 2px; }
.mlx-leadform .mlx-form-msg { font-size: 14px; min-height: 20px; }
.mlx-leadform .mlx-form-msg.is-error { color: var(--mkd-danger); }
.mlx-leadform .mlx-form-msg.is-ok { color: var(--mkd-success-dk); }
.mlx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }