/* 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-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: #fafafa;
  --mkd-surface: #ffffff;
  --mkd-on-dark: rgba(255,255,255,0.78);
  --mkd-line-on-dark: rgba(255,255,255,0.1);
  --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);
}

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; }
  }


/* 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;
  }
  /* 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;
  }
}
/* 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; }
}

/* 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 + CTA; the phone number drops (card-level
   headers carry no tel links, so the broad selector is safe) */
@media (max-width: 680px) { header a[href^="tel:"] { display: none !important; } }
/* and on true phone widths the logo and CTA shrink so the bar always fits */
@media (max-width: 480px) {
  header > div > a:first-child img, header img[alt^="Marketlinx"] { height: 32px !important; }
  header a[href="#audit"], header a[href^="#"][class*="mlx-navcta"] { padding: 0 12px !important; font-size: 13px !important; height: 36px !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-accent); color: #fff; }
  .mlx-ctabar a:first-child:active { background: var(--mkd-accent-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; } }

/* ---- 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; color: var(--mkd-accent); }
.mlx-h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--mkd-primary); margin: 10px 0 0; }
.mlx-band--navy .mlx-h2 { color: #fff; }
.mlx-statnum { font-family: 'JetBrains Mono', monospace; font-size: 44px; font-weight: 600; }

/* ---- buttons ---- */
.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); }
.mlx-btn--primary { background: var(--mkd-accent); color: #fff; }
.mlx-btn--primary:hover { background: var(--mkd-accent-hover); color: #fff; }
.mlx-btn--ghost { background: transparent; color: var(--mkd-accent); border: 1px solid var(--mkd-border-strong); }
.mlx-btn--ghost:hover { background: var(--mkd-primary-lt); }

/* ---- 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; }