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

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

/* ---- 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; }
  .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: 4px;
  }
  header.mlx-menu-open .mlx-drawer { display: flex; }
  .mlx-drawer a {
    display: block; padding: 14px 4px;
    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; }
}

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