/* /managed-it-service-provider — page sheet for the "service provider" landing-page
   template (also serves /managed-service-provider and /it-support-service-provider,
   which are id-identical to this page).

   EVERY number below was MEASURED on the live page at 1440 (and re-checked at 768
   and 375) with getBoundingClientRect + getComputedStyle. Nothing is inferred from
   markup. The measurement is written next to the rule it produced.

   This template shares almost nothing with the Family A/B service pages: no hero
   form, no service-card grid, no stats band, no recognition band, no bookcal, no
   stories, no articles. It is a locked landing page: its own sticky nav, its own
   two-line footer, a full-width video, a two-column body with a STICKY HubSpot
   form in the right rail, and a pricing modal. All new components therefore live
   in the zab- namespace (CLAUDE.md §7 "New Family B components use the zab-
   namespace"); the only shared components reused are .z-container, the
   .zmit-trust-* marquee and inc/it-managed-services-zazz/zazz-hsform.php.

   CONTENT BOX: live runs this page at content 1225 starting x=100 (section padding
   0 100px). We keep the HOUSE container instead — .zmit .z-container = max-width
   1400, padding 0 30px, content 1340 at x=43 — because CLAUDE.md forbids per-page
   container overrides and every migrated page must start its content at the same
   x. Live is NARROWER than the house box here, not wider, so nothing is widened.
*/

/* ---------------------------------------------------------------- page shell */

/* overflow-x: clip (NOT hidden) — the testimonial and growth bands bleed their
   gradient past the viewport with a ::before, and `hidden` would create a scroll
   container that breaks position: sticky on the right rail. `clip` does not. */
.zab-msp { overflow-x: clip; background: #fff; color: #06001c; }
/* The shared sheet gives .zmit `padding-top: 100px` (twice - base and its own
   media query) to clear header.php's FIXED site navbar. This landing page ships
   its own in-flow sticky nav instead, so that reserve is dead space that pushed
   the whole page down 100px. `.zmit.zab-msp` is (0,2,0) so it outranks both
   `.zmit` rules wherever they sit in the cascade - no !important needed. */
.zmit.zab-msp { padding-top: 0; }
.zab-msp * { box-sizing: border-box; }
.zab-msp img { max-width: 100%; height: auto; display: block; }
/* Live inherits a 1.65 body line-height; the shared sheet's `.zmit { line-height:
   1.6 }` is 0.8px short on every 16px line and compounded to ~380px of missing
   page height. Set on the page wrapper (inside .zmit, so it wins by proximity)
   rather than in the shared sheet, which 231 already-migrated pages depend on. */
.zab-msp { line-height: 1.65; }
/* margin + the shared sheet's -.01em heading tracking reset: live measures
   letter-spacing normal on every heading of this template. */
.zab-msp h1, .zab-msp h2, .zab-msp h3, .zab-msp h4, .zab-msp h5 { margin: 0; letter-spacing: normal; }
.zab-msp p { margin: 0; }
.zab-msp ul { margin: 0; padding: 0; list-style: none; }
.zab-msp svg { display: block; }

/* Live's band headings are uniform: 26px/38px, weight 500, #14142b, left aligned
   (measured on all five: 3e1b69d, 620d3be, 353c08c, 1c2ec62, 97c7846, 26ed319). */
/* Scoped under .zmit because the shared sheet's `.zmit h1,.zmit h2,.zmit h3,.zmit h4
   { font-weight: 800 }` is (0,1,1) and outranks a bare class — the 500 below was
   being dropped on every one of these headings. Live measures 500. */
.zmit .zab-msp-h { font-size: 26px; line-height: 38px; font-weight: 500; color: #14142b; }
/* Live insets these three band headings above the band's own 40px gap. */
.zab-cov > .zab-msp-h, .zab-seccov > .zab-msp-h { padding-top: 40px; }
.zab-cmp > .zab-msp-h { padding-top: 50px; }

/* ------------------------------------------------------------------ LP nav */
/* ddc9b22 — sticky, top:0, white, h=100, inner 1365 at x=30 (padding 0 30px).
   Live renders this <header> TWICE at depth 0 (Elementor's sticky clone); one
   real element with position:sticky is the correct single-node equivalent. */
.zab-lpnav {
    position: sticky; top: 0; z-index: 60;
    background: #fff; height: 100px;
    display: flex; align-items: center;
}
.zab-lpnav .z-container { display: flex; align-items: center; gap: 20px; width: 100%; }
.zab-lpnav-logo { flex: 0 0 auto; }
.zab-lpnav-logo svg { width: 150px; height: 34px; }
.zab-lpnav-menu {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center; gap: 34px;
}
.zab-lpnav-menu a {
    font-size: 15px; font-weight: 500; color: #14142b; text-decoration: none;
    white-space: nowrap; transition: color .2s ease;
}
.zab-lpnav-menu a:hover, .zab-lpnav-menu a:focus-visible { color: #0161ff; }
/* 35f4f20 measured: bg #141414, ink #f2f7ff, no border, 14px */
.zab-lpnav-cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: #141414; color: #f2f7ff; text-decoration: none;
    font-size: 14px; font-weight: 500; line-height: 1;
    padding: 15px 24px; border-radius: 6px;
    transition: background .2s ease;
}
.zab-lpnav-cta:hover, .zab-lpnav-cta:focus-visible { background: #0161ff; color: #fff; }
.zab-lpnav-cta svg { width: 8px; height: 12px; }
.zab-lpnav-cta svg path { stroke: currentColor; }
.zab-lpnav-burger {
    display: none; background: none; border: 0; padding: 8px; cursor: pointer;
    color: #14142b;
}

/* -------------------------------------------------------------------- hero */
/* 543426b measured at 1440 (2026-09-25): h=420, inner padding 50px 0, gap 24px.
   h1 53px/74.2px w700 #14142b CENTRED; sub 16px/26.4px centred; two buttons on
   one centred row, BOTH h=44 pad 13/35 r=8 (btn1 w=577 bg #0161ff; btn2 w=283
   bg #fcfcfc border 1px #141414). The r=5 / pad 20px 0 ghost is live's <=767
   rule only. Icon (14x16) sits AFTER the label: row-reverse, gap 16px. */
.zab-msp-hero .z-container {
    padding-top: 50px; padding-bottom: 50px;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    text-align: center;
}
.zab-msp-hero h1 { font-size: 53px; line-height: 74.2px; font-weight: 700; color: #14142b; }
/* live constrains both to its own 1225 band width; we leave them at the full house
   1340 box so every section keeps a first child at x=43 (the container audit in
   CLAUDE.md §7). The copy is centred, so the only effect is where it wraps, and
   both still break onto live's line counts (h1 2 lines, sub 3). */
.zab-msp-hero-sub { font-size: 16px; line-height: 26.4px; color: #000; }
.zab-msp-hero-cta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.zab-msp-btn {
    display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 16px;
    font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none;
    background: #0161ff; color: #f2f7ff; border: 1px solid #0161ff;
    padding: 13px 35px; border-radius: 8px;
    transition: background .2s ease, border-color .2s ease;
}
/* live c265999 hover: bg/border #141414, ink stays #f2f7ff */
.zab-msp-btn:hover, .zab-msp-btn:focus-visible { background: #141414; border-color: #141414; color: #f2f7ff; }
.zab-msp-btn svg { width: 14px; height: 16px; fill: currentColor; }
/* live's dd78c31 at 1440: bg #fcfcfc, 1px #141414, same 13/35 pad + r=8 as the
   blue CTA. It is a <button>, not an <a>, so it needs cursor/font-family reset.
   Hover: bg/border #0161ff, ink #fff. */
.zab-msp-btn-ghost {
    background: #fcfcfc; color: #141414; border: 1px solid #141414;
    cursor: pointer; font-family: inherit;
}
.zab-msp-btn-ghost:hover, .zab-msp-btn-ghost:focus-visible { background: #0161ff; border-color: #0161ff; color: #fff; }
/* live drops both labels to 14px at <=1200 */
@media (max-width: 1200px) { .zab-msp-btn { font-size: 14px; } }

/* ---------------------------------------------------------- trust marquee */
/* ca58ab9 -> 958ca9b: full-bleed (inner 1425 at x=0, no padding), strip h=77,
   logos w=154 h=77 object-fit contain, 50px desktop margin, live's track
   animation is `marquee-to-left 240s` over a 24428px track = ~101.8 px/s.
   The shared sheet owns .zmit-trust-band / -track / -chip; we only release its
   hero-column clip (.zmit-trust is width:calc(60% + 24px) there) and raise the
   logo bounds from 52px to live's 70px strip. */
/* Re-measured 2026-09-25: band h=78, NO padding; each logo is a 156x78 box
   (aspect-ratio 2/1, object-fit contain) with 50px after it; live fades both
   edges with a 10%-wide white gradient (958ca9b ::before / ::after). Bounded on
   both axes per CLAUDE.md (the box IS the bound). <=880: 150px wide logo in a
   200px holder; <=767: 100px at 1.5/1. */
.zab-msp .zmit-trust-band { padding: 0; position: relative; }
.zab-msp .zmit-trust-band::before,
.zab-msp .zmit-trust-band::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 10%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
}
.zab-msp .zmit-trust-band::before { right: 0; }
.zab-msp .zmit-trust-band::after { left: 0; transform: rotate(180deg); }
.zab-msp .zmit-trust { width: 100%; max-width: none; }
.zab-msp .zmit-trust-track { gap: 50px; align-items: center; }
.zab-msp .zmit-trust-chip { width: 156px; height: 78px; padding: 0; display: flex; align-items: center; justify-content: center; }
.zab-msp .zmit-trust-chip img { width: 100%; height: 100%; max-width: 156px; max-height: 78px; object-fit: contain; }

/* ------------------------------------------------------------------- video */
/* b4a0d90 -> 40563b7: content 1225 at x=100, h=689 (16:9), radius 10px. */
.zab-msp-video { margin: 50px 0; }   /* live b4a0d90: margin 50px 0 (20px 0 50px <=767) */
.zab-msp-video .z-container { padding-top: 0; padding-bottom: 0; }
.zab-msp-video-frame {
    position: relative; border-radius: 10px; overflow: hidden;
    aspect-ratio: 16 / 9; background: #14142b;
}
.zab-msp-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------- two-column body (a777828) */
/* MEASURED at 1440 with the sideBySide test:
     section padding 0 100px; inner display:flex row, gap 100px, w=1225 at x=100
     left  (d90b7f8) l=100 w=788  t=1481
     right (85021e1) l=988 w=338  t=1481
     |left.top - right.top| = 0  and  right.left(988) > left.left(100)+200  => TWO COLUMNS
   Live ratio 64.33% / gap 100px / 27.59%. We keep live's 338px rail verbatim (the
   HubSpot form is authored for it) and give the remainder of the house 1340 box to
   the copy column: 1340 - 100 - 338 = 902px left column.
   At 768 live's inner flips to flex-column with gap 50px and the rail goes full
   width; at 375 the rail is display:none and the form re-appears inside the
   growth band (live ships a second embed there, elementor-hidden above mobile). */
.zab-msp-body .z-container { padding-top: 0; padding-bottom: 0; }
.zab-msp-grid { display: block; }
.zab-msp-side { margin-top: 50px; }
.zab-msp-main > section { position: relative; }

/* the invisible scroll anchors live ships as menu-anchor widgets (#managedit,
   #security, #whyus) — offset by the sticky nav's 100px */
.zab-msp-anchor { display: block; height: 0; scroll-margin-top: 110px; }

/* ------------------------------------------------- coverage rows (e7af5b3) */
/* band padding 80px 0 0, gap 40px; rows 1-col grid gap 0; each row: flex row
   gap 20px, padding 15px 25px, border 1px solid #d6d6d6 (h=188 at 1440).
   number span 16px/16 #14142b; h3 38px/49.4 w600 #141414 mb 4; p 16px/26.4 w300 */
.zab-cov { padding: 80px 0 0; margin-bottom: 80px; display: flex; flex-direction: column; gap: 40px; }   /* live: 80px bottom margin */
.zab-cov-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.zab-cov-row {
    display: flex; flex-direction: row; gap: 20px;
    padding: 15px 25px; border: 1px solid #d6d6d6;
}
/* The number column is a PER-ROW Elementor custom width on live (2.762%,
   3.066%, ... of the row), measured identical on all six pages of the template.
   It sets where the copy wraps (row 2 drops a line at 20px), so it is carried
   per row: 1440 / 768 / 375 widths, padding-top 10px (3px at <=767). */
.zab-cov-n { flex: 0 0 20.6px; align-self: flex-start; padding-top: 10px; font-size: 16px; line-height: 26.4px; color: #14142b; }   /* live: inline span in a 26.4 line */
.zab-cov-row:nth-child(2) .zab-cov-n { flex-basis: 22.9px; }
.zab-cov-row:nth-child(4) .zab-cov-n { flex-basis: 22.4px; }
.zab-cov-row:nth-child(5) .zab-cov-n { flex-basis: 23.4px; }
.zab-cov-row:nth-child(6) .zab-cov-n { flex-basis: 23.6px; }
@media (max-width: 1080px) {
    .zab-cov-row:nth-child(1) .zab-cov-n { flex-basis: 18.1px; }
    .zab-cov-row:nth-child(2) .zab-cov-n { flex-basis: 24px; }
    .zab-cov-row:nth-child(3) .zab-cov-n { flex-basis: 24.1px; }
    .zab-cov-row:nth-child(4) .zab-cov-n { flex-basis: 20.6px; }
    .zab-cov-row:nth-child(5) .zab-cov-n { flex-basis: 25.4px; }
    .zab-cov-row:nth-child(6) .zab-cov-n { flex-basis: 20.6px; }
}
@media (max-width: 767px) {
    .zab-cov-n { padding-top: 3px; }
    .zab-cov-row:nth-child(1) .zab-cov-n { flex-basis: 17.4px; }
    .zab-cov-row:nth-child(2) .zab-cov-n { flex-basis: 23.2px; }
    .zab-cov-row:nth-child(3) .zab-cov-n { flex-basis: 22.4px; }
    .zab-cov-row:nth-child(4) .zab-cov-n { flex-basis: 23px; }
    .zab-cov-row:nth-child(5) .zab-cov-n { flex-basis: 21.4px; }
    .zab-cov-row:nth-child(6) .zab-cov-n { flex-basis: 24.5px; }
}
.zab-cov-row h3 { font-size: 38px; line-height: 49.4px; font-weight: 600; color: #141414; margin-bottom: 4px; }
.zab-cov-row p { font-size: 16px; line-height: 26.4px; font-weight: 300; color: #000; }

/* --------------------------------------- security coverage grid (d17b3ed) */
/* band padding 80px 0, gap 40px. MEASURED grid: grid-template-columns
   378.75px 378.75px (= repeat(2,1fr) of the 788 column), gap 50px 30px, 13 items.
   item: flex row gap 19px align-items center; icon 50x50; title 20px/26 w500 #141414
   At 768 still 2 cols (331.5px each, same gaps); at 375 it is 1 col with gap 10px. */
.zab-seccov { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; }
.zab-seccov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 30px; }
.zab-seccov-item { display: flex; flex-direction: row; align-items: center; gap: 19px; }
.zab-seccov-item .zab-ico { flex: 0 0 50px; }
.zab-seccov-item .zab-ico svg { width: 50px; height: 50px; }
.zab-seccov-item h3 { font-size: 20px; line-height: 26px; font-weight: 500; color: #141414; }

/* ------------------------------------------- certification cards (807672d) */
/* band padding 80px 0, gap 40px. MEASURED grid: 249.156px 249.172px 249.172px
   (= repeat(3,1fr)), gap 20px, 6 cards.
   card: bg #fff, radius 5px, padding 14px, w=249 h=91; inner flex align-center;
   figure 45x45 with margin-right 15px; h3 18px/23.4 w600 #141414 mb 6;
   p 14px/16.8 #5e5e5e.
   NOT the Family B `.zab-certified-badges` PNG-tile band — these are white cards
   with a small logo beside text, so the gap:0 / object-fit:fill trap in CLAUDE.md
   does not apply here. Images keep their natural aspect inside a 45px box. */
.zab-certs { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; }
/* align-items:start - live's cards keep their own height inside a row (91 next
   to 108 where "Quality Management Systems" wraps to 3 lines). The inner row is
   flex gap 20px ON TOP of the figure's 15px margin (copy at +80 from the card's
   content edge, 145px wide). */
.zab-certs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.zab-cert {
    background: #fff; border-radius: 5px; padding: 14px;
    display: flex; align-items: center; gap: 20px;
}
.zab-cert-fig { flex: 0 0 45px; width: 45px; margin: 0 15px 0 0; }   /* margin: Bootstrap's figure 1rem foot lifted the logo 8px */
.zab-cert-fig img { width: 45px; height: 45px; object-fit: contain; }
.zab-cert h3 { font-size: 18px; line-height: 23.4px; font-weight: 600; color: #141414; margin-bottom: 6px; }
.zab-cert p { font-size: 14px; line-height: 16.8px; color: #5e5e5e; }

/* ----------------------------------------------- testimonials (af43aa2) */
/* band padding 80px 0, gap 40px, h=757. Cards: 1-col grid gap 30px, 4 cards,
   each flex row gap 20px: quote w=591 (padding-bottom 20px) + author w=177 at
   x=711. Quote 16px/26.4 #fcfcfc; name 20px/33 w500 #fff; role 14px/16.8 #f8f8f8.
   BACKGROUND: the band itself is transparent — the blue/purple panel is a
   ::before at DEPTH 7 from the heading (band -> ::before), which a shallow
   background walk reports as "none". Measured value:
     position:absolute; inset:0 -1833.75px 0 393.75px; transform:translateX(-1113.75px);
     width 2227.5px (= 100% + 100vw); z-index:-1;
     linear-gradient(284.81deg,#499DFD 3.03%,#2678F5 27.62%,#6628C5 76.39%,#5B0BB1 100%)
   i.e. a full-bleed gradient centred on the band. Reproduced with left:50% +
   translateX(-50%) + calc(100% + 100vw), which yields the same span. */
.zab-testi { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; }
/* FULL-BLEED BAND PANELS -----------------------------------------------------
 * Live paints five band backgrounds as full-bleed panels behind the 788px
 * column (measured on the live page, top to bottom):
 *     .zab-seccov  #f5f9ff      .zab-certs  #efeffa
 *     .zab-testi   gradient     .zab-faq    #eff0f7     .zab-grow  gradient
 *
 * `isolation` is the load-bearing part. The panel is a ::before at z-index:-1,
 * and a negative-z child paints above the background of the nearest ancestor
 * that forms a STACKING CONTEXT. `.zab-msp` sets `background:#fff` but forms no
 * stacking context (overflow-x:clip does not create one), so the panels were
 * painting behind that white fill and were invisible — which is why the white
 * testimonial and growth copy was reading as white-on-white. `isolation:isolate`
 * makes each band its own context, so its panel lands above the band's own
 * (transparent) background and below its content.
 */
.zab-bleed  { --zab-band: linear-gradient(284.81deg, #499dfd 3.03%, #2678f5 27.62%, #6628c5 76.39%, #5b0bb1 100%); }
.zab-seccov { --zab-band: #f5f9ff; }
.zab-certs  { --zab-band: #efeffa; }
.zab-faq    { --zab-band: #eff0f7; }
.zab-bleed, .zab-seccov, .zab-certs, .zab-faq { position: relative; isolation: isolate; }
.zab-bleed::before, .zab-seccov::before, .zab-certs::before, .zab-faq::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: calc(100% + 100vw); transform: translateX(-50%); z-index: -1;
    background: var(--zab-band, transparent);
}
.zab-testi .zab-msp-h { color: #fcfcfc; }
.zab-testi-list { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zab-testi-card { margin: 0; display: flex; flex-direction: row; gap: 20px; align-items: flex-end; }   /* margin: Bootstrap figure default, doubled the grid gap; flex-end: live sits the author on the quote's baseline rule */
/* live 59401ab: width 75%, margin-bottom 7px (the card is 107 = quote 100 + 7;
   the default blockquote 16px margin made it 116), padding-bottom 20 + 1px rule.
   Author 3106077: max 500px, shrinks into the rest (180 at 1440). */
.zab-testi-q { flex: 0 0 75%; margin: 0 0 7px; padding-bottom: 20px; border-bottom: 1px solid #fcfcfc; font-size: 16px; line-height: 26.4px; color: #fcfcfc; }
.zab-testi-who { flex: 0 1 500px; min-width: 0; }
.zab-testi-who strong { display: block; font-size: 20px; line-height: 33px; font-weight: 500; color: #fff; }
.zab-testi-who span { display: block; font-size: 14px; line-height: 16.8px; font-style: italic; color: #f8f8f8; }   /* live: italic */
/* live drops the author to 16px / 12px at <=1366 */
@media (max-width: 1366px) {
    .zab-testi-who strong { font-size: 16px; line-height: 26.4px; }
    .zab-testi-who span { font-size: 12px; line-height: 14.4px; }
}

/* --------------------------------------------- comparison table (a0cd677) */
/* Live ships THREE renderings of this table and only one is ever visible at a
   given width:
     68fd1a3  three flex columns  — visible >1024 (hidden-mobile + columns hidden-tablet)
     2a658c6  stacked variant     — visible <=880, same 5 rows but with two typos
                                    ("Unpredictalbe IT costs", "Security & Complia-nce")
     3f18121  nested accordion    — hidden on EVERY breakpoint; never renders
   Live therefore shows NOTHING between 881 and 1024. We build ONE responsive
   table from 68fd1a3 (the clean copy) and let it work at every width; the
   accordion is deliberately not built because live never renders it.

   MEASURED at 1440 (columns inside the 788 copy column, gap 0):
     col0 "Core Metrics" l=100 w=171 | col1 "Before" l=271 w=301 | col2 "After Zazz" l=572 w=315
     -> grid-template-columns: 171fr 301fr 315fr
   col0/col1 heads 20px/32 w600 #14142b; col0 cells 16px/22.4 w600 #06001c with
   padding 10px 20px 10px 0 and border-bottom 1px rgba(6,0,28,.12); col1 cells
   16px/28 w400 #06001c, padding 10px 0, same hairline.
   col2 column bg #d9d9ee padding 0 12px 12px; head centred; EACH cell is its own
   dark box: bg #14142b, padding 20px, border-top AND border-bottom 1px
   rgba(143,143,143,.42), radius 5px 5px 0 0; inner flex gap 15px; text 16px/24 #fff.
   The hairline is written per COLUMN, never per :nth-of-type row, so it survives
   a row-count change (CLAUDE.md §7). */
.zab-cmp { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; }
.zab-cmp-table {
    display: grid; grid-template-columns: minmax(0, 171fr) minmax(0, 301fr) minmax(0, 315fr);
    grid-template-rows: 80px;    /* header */
    grid-auto-rows: 100px;       /* live's measured row pitch (fixed: row 1 overflows it on live too) */
    margin-bottom: 12px;         /* room for the last Zazz cell's 12px foot, below */
}
/* live's table cells are real headings (col heads h3, metrics h4, Zazz cells
   h3, before cells p); .zmit prefix outranks the shared h3/h4 weight 800 */
.zmit .zab-cmp-head { font-size: 20px; line-height: 32px; font-weight: 600; color: #14142b; }
.zab-cmp-c1 { padding: 10px 20px 10px 0; border-bottom: 1px solid rgba(6, 0, 28, .12); }
.zab-cmp-c2 { padding: 10px 0;            border-bottom: 1px solid rgba(6, 0, 28, .12); }
.zab-cmp-c1 .zab-cmp-txt { font-size: 16px; line-height: 22.4px; font-weight: 600; color: #06001c; }
.zab-cmp-c2 .zab-cmp-txt { font-size: 16px; line-height: 28px;   font-weight: 400; color: #06001c; }
.zab-cmp-c3 { background: #d9d9ee; padding: 0 12px; }
.zab-cmp-c3.zab-cmp-head-cell { text-align: center; }
/* live: the Zazz column carries padding 0 12px 12px, so the LAST row is 100 +
   the column's 12px foot (table 592 = 80 + 5x100 + 12), and the last row's
   metric/before cells carry no hairline. */
.zab-cmp-table > .zab-cmp-c3:last-child { padding-bottom: 12px; margin-bottom: -12px; }
.zab-cmp-table > .zab-cmp-c3:last-child .zab-cmp-box { height: 100px; }
.zab-cmp-table > .zab-cmp-c1:nth-last-child(3), .zab-cmp-table > .zab-cmp-c2:nth-last-child(2) { border-bottom: 0; }
.zab-cmp-c3 .zab-cmp-box {
    background: #14142b; padding: 20px; border-radius: 5px 5px 0 0;
    border-top: 1px solid rgba(143, 143, 143, .42);
    border-bottom: 1px solid rgba(143, 143, 143, .42);
    display: flex; gap: 15px; align-items: flex-start; height: 100%;
}
.zab-cmp-c3 .zab-cmp-box svg { flex: 0 0 20px; width: 20px; height: 20px; }
.zab-cmp-c3 .zab-cmp-box h3 { font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; }

/* ------------------------------------------------------------ FAQ (7452e73) */
/* band padding 80px 0 0, gap 40px, 9 items. Live is an Elementor nested
   accordion = real <details>/<summary>, default_state expanded (item 1 open),
   max_items_expended "one".
   summary: bg #262338, padding 25px, radius 5px 5px 0 0, ink #fcfcfc, flex
   gap 10px; icon column 16x18. item margin-bottom 7px.
   panel: bg #262338, inner padding 20px; answer 16px/25.6 #d9dbe9 mb 28px. */
.zab-faq { padding: 80px 0 0; display: flex; flex-direction: column; gap: 40px; }
.zab-faq-list { display: block; }
.zab-faq-item { margin: 0 0 7px; background: #262338; border-radius: 5px; }
.zab-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 25px; border-radius: 5px 5px 0 0;
    color: #fcfcfc; font-size: 18px; line-height: 27px;   /* live: 18px/27 */
    cursor: pointer; list-style: none;
}
.zab-faq-item > summary::-webkit-details-marker { display: none; }
.zab-faq-item > summary:focus-visible { outline: 2px solid #499dfd; outline-offset: -2px; }
.zab-faq-ico { flex: 0 0 16px; width: 16px; height: 18px; color: #fcfcfc; }
.zab-faq-ico svg { width: 16px; height: 18px; fill: currentColor; }
.zab-faq-item .zab-faq-open  { display: none; }
.zab-faq-item[open] .zab-faq-open  { display: block; }
.zab-faq-item[open] .zab-faq-shut  { display: none; }
.zab-faq-a { padding: 20px 20px 0; }   /* live bb2d3eb: padding 20px 20px 0 (copy at +20, not the summary's 25) */
.zab-faq-a p { font-size: 16px; line-height: 25.6px; color: #d9dbe9; margin: 0 0 28px; }
.zab-faq-a a { color: #9dc2ff; text-decoration: underline; }
/* FAQ fix (owner, 2026-10-01). The space under an answer is the paragraph's
   bottom margin (28px here, 20px on phones), but .zab-faq-a has no bottom
   padding, so that margin collapsed OUT of the dark card: the text sat on the
   card's bottom edge and the gap appeared below the card instead. flow-root
   keeps the margin inside the card. It also gives the shared FAQ script
   (inc/it-managed-services-zazz/faq-cols.php) a true height to animate. */
.zab-faq-a { display: flow-root; }
/* While a question folds shut, faq-cols.php keeps [open] until the fold ends;
   show the "+" from the moment it is clicked, exactly as a closed item shows it. */
.zab-faq .zab-faq-item.zmit-faq-closing .zab-faq-open { display: none; }
.zab-faq .zab-faq-item.zmit-faq-closing .zab-faq-shut { display: inline; }

/* ------------------------------------------------- growth CTA band (8ed53e1) */
/* Nested INSIDE the FAQ band on live (7452e73 > 8ed53e1) — reproduced as nested
   here so the DOM matches. padding 70px 0 0, inner caa6de7 flex row gap 20px:
   copy column 384 at x=100 (padding-bottom 50px) + image column 384 at x=504.
   h2 30px/39 w600 #fff; CTA bg #fff ink #000 14px padding 16px 30px radius 0.
   Same full-bleed ::before gradient as the testimonial band (h=493.25).
   Live's image is 458x498 rendered 384x500. */
.zab-grow { padding: 70px 0 0; margin-top: 80px; }   /* live: 120px below the last FAQ row, of which 40 is the band's flex gap */
.zab-grow-inner { display: flex; flex-direction: row; gap: 20px; align-items: flex-end; }
/* live b039ede: align-self CENTER in the 422 row (heading at +119), no bottom
   padding above 1366 (50px at <=1366). CTA 3499af2 is 80% wide (90% <=1366,
   100% <=767), label centred, 14px (12px <=1366). */
.zab-grow-copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; align-self: center; }
.zab-grow-copy h2 { font-size: 30px; line-height: 39px; font-weight: 600; color: #fff; }
.zab-grow-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 80%; text-align: center;
    background: #fff; color: #000; text-decoration: none;
    font-size: 14px; font-weight: 500; line-height: 1; padding: 16px 30px;
    border-radius: 0; transition: background .2s ease, color .2s ease;
}
.zab-grow-cta:hover, .zab-grow-cta:focus-visible { background: #141414; color: #fff; }
.zab-grow-cta svg { width: 8px; height: 12px; }
.zab-grow-cta svg path { stroke: currentColor; }
.zab-grow-fig { flex: 1 1 0; align-self: flex-end; }
/* live 7c975de: margin-top -20% of the column (-77.8 at 1440; -40% <=1366,
   -30% <=880, 0 <=767), img cover at 500 / 420 <=1366 / 392 <=880 / 290
   contain-bottom <=767. */
.zab-grow-fig img { width: 100%; height: 500px; object-fit: cover; margin-top: -20%; }
@media (max-width: 1366px) {
    .zab-grow-copy { padding-bottom: 50px; }
    .zab-grow-cta { width: 90%; font-size: 12px; }
    .zab-grow-fig img { height: 420px; margin-top: -40%; }
}
/* live ships a SECOND HubSpot embed here, shown only at mobile widths where the
   right rail is display:none (70864c0 is hidden widescreen..mobile_extra).
   Scoped as `.zab-grow .zab-grow-form` (0,2,0) so it outranks the
   `.zab-msp-formcard { display: flex }` that the same element also carries -
   a bare `.zab-grow-form` (0,1,0) loses to it and the form rendered twice. */
.zab-grow .zab-grow-form { display: none; }

/* ------------------------------------------- sticky form card (85021e1/245d625) */
/* Elementor sticky settings read off live: sticky "top", sticky_offset 130,
   sticky_parent yes, on widescreen/desktop/laptop/tablet_extra.
   Card measured: w=338, bg #14142b, border 2px solid rgba(93,100,129,.2),
   radius 8px, padding 20px 20px 10px, flex column gap 20px, h=569.
   heading 20px/26 w600 #f2f2f2 with margin 0 0 -22px (live's own negative pull). */
.zab-msp-formcard {
    background: #14142b; border: 2px solid rgba(93, 100, 129, .2); border-radius: 8px;
    padding: 20px 20px 10px;
    display: flex; flex-direction: column; gap: 20px;
}
.zab-msp-formcard h2 {
    font-size: 20px; line-height: 26px; font-weight: 600; color: #f2f2f2;
    margin: 0 0 -2px;   /* card gap is 20px; live measures 18px to the first field */
}
/* the shared HubSpot partial is authored for a LIGHT card; this card is dark, so
   only the label / helper ink is re-tinted. Scoped to this page's card so the
   other two .zmit-hsform instances on the page are untouched (CLAUDE.md §9). */
.zab-msp-formcard .zmit-hsform label,
.zab-msp-formcard .zmit-hsform .hsfc-Label {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* CLS reserve under live's rendered 445px form; the 20px foot is live's widget
   padding (ac85e31 p[0 0 20px]) that lands the card on 569. */
.zab-msp-formcard .zmit-hsform { min-height: 430px; padding-bottom: 20px; }
/* Field skin. inc/it-managed-services-zazz/zazz-hsform.php paints every form
   with rounded, lavender-filled inputs (all !important) for the light hero
   cards. Live's embed here (ac85e31 / 74e4a12) renders HubSpot's own theme:
   measured at 1440 - white 40px inputs, 16px/24 Poppins #212d3a, border only
   on the bottom (1px #c2c2c2), radius 0, 8px padding, 0 1px 2px shadow; rows
   10px apart; 65px textarea; flag box flush with the number (no gap); submit
   52px, 18px padding, 16px/16 700, radius 3, no top margin. Scoped to this
   card so the partial's other callers are untouched (CLAUDE.md §9). */
.zab-msp-formcard .zmit-hsform .hsfc-Step__Content { background: #14142b; }
.zab-msp-formcard .zmit-hsform .hsfc-Row { margin-bottom: 10px; }
.zab-msp-formcard .zmit-hsform .hsfc-Row:last-child { margin-bottom: 0; }
.zab-msp-formcard .zmit-hsform .hsfc-TextInput,
.zab-msp-formcard .zmit-hsform .hsfc-TextareaInput,
.zab-msp-formcard .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput,
.zab-msp-formcard .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput {
    font-size: 16px !important; line-height: 24px !important; color: #212d3a !important;
    background: #fff !important; border: 0 !important; border-bottom: 1px solid #c2c2c2 !important;
    border-radius: 0 !important; padding: 8px !important; height: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}
.zab-msp-formcard .zmit-hsform .hsfc-TextareaInput { height: 65px; min-height: 65px !important; }
.zab-msp-formcard .zmit-hsform .hsfc-TextInput::placeholder,
.zab-msp-formcard .zmit-hsform .hsfc-TextareaInput::placeholder { color: #000 !important; opacity: 1 !important; }
.zab-msp-formcard .zmit-hsform .hsfc-TextInput:focus,
.zab-msp-formcard .zmit-hsform .hsfc-TextareaInput:focus { border-bottom-color: #0161ff !important; }
.zab-msp-formcard .zmit-hsform .hsfc-PhoneInput { gap: 0; }
.zab-msp-formcard .zmit-hsform .hsfc-PhoneInput .hsfc-PhoneInput__FlagAndCaret {
    background: #fff !important; border: 0 !important; border-bottom: 1px solid #c2c2c2 !important;
    border-radius: 0 !important; padding: 0 10px !important;
}
.zab-msp-formcard .zmit-hsform .hsfc-DropdownInput__Caret > span,
.zab-msp-formcard .zmit-hsform .hsfc-PhoneInput__FlagAndCaret__Caret { border-top-color: #212d3a !important; }
.zab-msp-formcard .zmit-hsform .hsfc-NavigationRow { margin: 0; }
/* the partial hard-codes 15px/600, radius 10, 14px padding (!important) */
.zab-msp-formcard .zmit-hsform .hsfc-Button,
.zab-msp-formcard .zmit-hsform button[type="submit"] {
    font-size: 16px !important; line-height: 16px !important; font-weight: 700 !important;
    padding: 18px !important; border-radius: 3px !important; background-color: #0161ff !important;
    transition: background-color .2s ease, transform .2s ease;
}
/* live hover (real pointer): #016bff and a 1px lift */
.zab-msp-formcard .zmit-hsform .hsfc-Button:hover { background-color: #016bff !important; transform: translateY(-1px); }

/* ------------------------------------------------------------ LP footer */
/* 75c2ee4 — bg #262338, h=100, inner padding 20px 0, flex, inline link list. */
.zab-lpfoot { background: #262338; }
.zab-lpfoot .z-container {
    min-height: 100px; padding-top: 20px; padding-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.zab-lpfoot-copy { font-size: 14px; color: #f2f2f2; }
.zab-lpfoot ul { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.zab-lpfoot a { font-size: 14px; color: #d9dbe9; text-decoration: none; }
.zab-lpfoot a:hover, .zab-lpfoot a:focus-visible { color: #fff; text-decoration: underline; }

/* -------------------------------------------------- pricing modal (e0cf015) */
/* Live keeps this container display:none after the footer, id="priceFormContainer",
   class "price-popup", opened by #openPricePopup (hero CTA) and the nav's
   "View Pricing & Plans" item, closed by .closePopup.
   Desktop group efa7233 = 4 per-user plan cards, each with a `blurOut` body that
   live blurs until the lead form is filled. (Live's <=880 group a94b982 lists a
   DIFFERENT, flat-monthly price set; not built — see the page header.) */
.zab-pricepop {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(6, 0, 28, .72);
    padding: 40px 20px; overflow: auto;
}
.zab-pricepop.is-open { display: block; }
.zab-pricepop-box {
    position: relative; max-width: 1280px; margin: 0 auto;
    background: #fff; border-radius: 10px; padding: 40px;
}
.zab-pricepop-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: 0; padding: 6px; cursor: pointer; color: #14142b; line-height: 0;
}
.zab-pricepop-close svg { width: 28px; height: 28px; }
.zab-pricepop-box > h2 {
    font-size: 22px; line-height: 32px; font-weight: 600; color: #14142b;
    margin: 0 40px 24px 0;
}
.zab-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zab-plan {
    border: 1px solid #d6d6d6; border-radius: 8px; padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.zab-plan-name { display: flex; align-items: center; gap: 12px; }
.zab-plan-name h3 { font-size: 20px; line-height: 26px; font-weight: 600; color: #14142b; }
.zab-plan-name svg { width: 21px; height: 21px; flex: 0 0 21px; }
.zab-plan-price { font-size: 32px; line-height: 40px; font-weight: 700; color: #14142b; }
.zab-plan-price span { font-size: 14px; font-weight: 400; color: #5e5e5e; }
.zab-plan-note { font-size: 14px; line-height: 20px; color: #5e5e5e; }
.zab-plan hr { border: 0; border-top: 1px solid #e4e7f1; margin: 4px 0; }
.zab-plan ul { display: flex; flex-direction: column; gap: 8px; }
.zab-plan li { display: flex; gap: 10px; font-size: 14px; line-height: 20px; color: #06001c; }
.zab-plan li svg { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px; fill: #0161ff; }
.zab-pricepop-form { margin-top: 28px; text-align: center; }
.zab-pricepop-form p { font-size: 16px; line-height: 26px; color: #14142b; margin-bottom: 14px; }

/* ------------------------------------------------- floating mobile CTA (eeaec98) */
.zab-floatcta { display: none; }

/* ================================================================ desktop */
@media (min-width: 1081px) {
    .zab-msp-grid {
        display: grid;
        /* Live (1440): copy 798 + gap 100 + rail 342 in a 1240 box. In the
           house 1340 box the copy keeps live's 798 so every band wraps on
           live's line breaks, the rail keeps live's 342, and the extra 100px
           goes to the gutter (space-between). Below ~1340 the copy shrinks. */
        grid-template-columns: minmax(0, 798px) 342px;
        justify-content: space-between;
        column-gap: 100px;
        align-items: start;
        /* Live opens the grid 50px below the video (grid top 1385, video bottom
           1335). Without it the sticky form card sat flush against the video and
           touched it on scroll. */
        margin-top: 50px;
    }
    /* align-self:stretch, NOT the grid default here: the grid above sets
       align-items:start, which sized this column to its own content (824px)
       inside a 5563px row - so the sticky card below had ZERO travel and
       scrolled away with the page. The track has to span the whole row. */
    .zab-msp-side { margin-top: 0; align-self: stretch; }
    /* Elementor sticky_offset 130 on live (data-settings sticky_offset:130,
       sticky_parent:yes on 245d625) */
    .zab-msp-formcard { position: sticky; top: 130px; }

    /* Without this the rule above does nothing. home-page.css sets
       `body,html{overflow-x:hidden}`, and per spec a non-visible overflow on
       one axis forces the other to `auto` - which makes <body> the nearest
       scrollport, and a sticky child of a scrollport that never scrolls is
       inert. `clip` clips the same overflow WITHOUT promoting the other axis,
       so overflow-y stays visible and the document is the scrollport again.
       Measured: card pins at top:130 from y=1800 down, no h-scroll added.
       Safe to put a bare `body` rule here - this sheet is loaded only by the
       six pages of this template, and only above 1081 where the rail exists. */
    body { overflow-x: clip; }

    /* Content box: the HOUSE container (.zmit .z-container, 1340 @ x=43 at
       1440) on every band including the nav. Owner decision 2026-09-25
       overrides the 2026-09-07 live-exact box (1225 @ x=100): "keep house
       content box". The grid above keeps live's 798 copy column inside it. */
}

/* ================================================================== tablet */
@media (max-width: 1080px) {
    .zab-msp-hero h1 { font-size: 40px; line-height: 52px; }
    .zab-cov-row h3 { font-size: 26px; line-height: 34px; }
    .zab-msp-side { margin-top: 50px; }        /* live's stacked gap is 50px */
    .zab-plans { grid-template-columns: repeat(2, 1fr); }
    .zab-pricepop-box { padding: 28px; }
}

@media (max-width: 900px) {
    .zab-grow-inner { flex-wrap: wrap; }
    .zab-grow-copy, .zab-grow-fig { flex: 1 1 100%; }
    .zab-grow-fig { max-width: 458px; }
}

/* =================================================================== mobile */
/* ============================================================ nav collapse */
/* Live's mega-menu widget (e3a28a1) is elementor-hidden-tablet with
   breakpoint_selector "tablet", so the link row collapses to a toggle at <=1024
   — NOT at 767. Measured at 768 before this rule: the link row was 943px wide
   inside a 753px viewport (right edge 1143), i.e. a real overflow. */
@media (max-width: 1024px) {
    .zab-lpnav-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; background: #fff; padding: 8px 30px 20px;
        box-shadow: 0 12px 24px rgba(6, 0, 28, .12);
    }
    .zab-lpnav.is-open .zab-lpnav-menu { display: flex; }
    .zab-lpnav-menu a { padding: 12px 0; }
    .zab-lpnav-burger { display: inline-flex; margin-left: auto; }
}
/* live's header CTA (35f4f20) is elementor-hidden-mobile_extra + -mobile => <=880 */
@media (max-width: 880px) {
    .zab-lpnav-cta { display: none; }
}

@media (max-width: 767px) {
    .zab-lpnav { height: 76px; }

    .zab-msp-hero .z-container { padding-top: 30px; padding-bottom: 30px; gap: 18px; }
    /* live at 375: h1 24px/33.6 centred */
    .zab-msp-hero h1 { font-size: 24px; line-height: 33.6px; }
    .zab-msp-hero-cta { flex-direction: column; align-items: stretch; gap: 14px; }
    .zab-msp-btn, .zab-msp-btn-ghost { justify-content: center; text-align: center; }

    .zab-msp .zmit-trust-band { padding: 24px 0; }
    .zab-msp .zmit-trust-track { gap: 24px; }
    .zab-msp .zmit-trust-chip { height: 48px; }
    .zab-msp .zmit-trust-chip img { max-height: 48px; max-width: 120px; }

    .zab-cov, .zab-faq { padding: 44px 0 0; }
    .zab-seccov, .zab-certs, .zab-testi, .zab-cmp { padding: 44px 0; }
    /* live at 375: coverage row padding 10px / gap 10px */
    .zab-cov-row { padding: 10px; gap: 10px; }
    .zab-cov-row h3 { font-size: 20px; line-height: 28px; }
    /* live at 375: 1 col, gap 10px on both the security grid and the cert grid */
    .zab-seccov-grid { grid-template-columns: 1fr; gap: 10px; }
    .zab-certs-grid  { grid-template-columns: 1fr; gap: 10px; }
    .zab-testi-list  { gap: 20px; }
    .zab-testi-card { flex-direction: column; gap: 8px; align-items: stretch; }
    .zab-testi-who { flex: 0 0 auto; max-width: none; }
    /* live's 4th quote (7140dd0) is elementor-hidden-mobile */
    .zab-testi-desk { display: none; }

    .zab-cmp-table { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; grid-auto-rows: auto; }
    .zab-cmp-head { font-size: 16px; line-height: 24px; }
    .zab-cmp-c1 { padding: 10px 10px 10px 0; }
    .zab-cmp-c1 .zab-cmp-txt, .zab-cmp-c2 .zab-cmp-txt { font-size: 14px; line-height: 20px; }
    .zab-cmp-c3 { padding: 0 6px; }
    .zab-cmp-c3 .zab-cmp-box { padding: 10px; gap: 8px; }
    .zab-cmp-c3 .zab-cmp-box h3 { font-size: 14px; line-height: 20px; }
    .zab-cmp-c3 .zab-cmp-box svg { flex-basis: 16px; width: 16px; height: 16px; }

    .zab-faq-item > summary { padding: 16px; }
    .zab-faq-a { padding: 0 16px; }
    .zab-faq-a p { margin-bottom: 20px; }

    .zab-grow { padding: 44px 0 0; margin-top: 0; }
    .zab-grow-fig img { height: auto; margin-top: 0; }
    .zab-grow-copy h2 { font-size: 24px; line-height: 32px; }
    /* live hides the right rail below 768 and shows its second embed here */
    .zab-msp-side { display: none; }
    .zab-grow .zab-grow-form { display: flex; flex: 1 1 100%; }

    .zab-lpfoot .z-container { justify-content: center; text-align: center; }

    .zab-plans { grid-template-columns: 1fr; }
    .zab-pricepop { padding: 16px 10px; }
    .zab-pricepop-box { padding: 20px; }

    /* live's own floating CTA (eeaec98) is mobile-only */
    .zab-floatcta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 10px 16px; background: rgba(255, 255, 255, .96);
        box-shadow: 0 -6px 18px rgba(6, 0, 28, .12);
    }
    .zab-floatcta a {
        display: block; text-align: center; text-decoration: none;
        background: #0161ff; color: #fff; font-size: 15px; font-weight: 600;
        padding: 14px; border-radius: 8px;
    }
    .zab-msp-body { padding-bottom: 70px; }   /* clear the fixed CTA */
}

/* ------------------------------------------------- the .zmit a{color:inherit} trap */
/* The shared sheet's `.zmit a { color: inherit }` is (0,1,1) and OUTRANKS any
   single-class rule (0,1,0), so every BUTTON THAT IS AN <a> silently inherited
   the page ink instead of its own. Measured before this block:
     .zab-lpnav-cta  #06001c on #141414  (invisible - the nav CTA read as a black box)
     .zab-msp-btn    #06001c on #0161ff  (fails contrast)
     .zab-grow-cta   #06001c on #ffffff
   Re-stated at (0,2,1) with the element selector so the intended ink wins. This
   is CLAUDE.md's documented `.zdr-video-btn` failure; keep the block. */
.zab-msp a.zab-lpnav-cta { color: #f2f7ff; }
.zab-msp a.zab-lpnav-cta:hover, .zab-msp a.zab-lpnav-cta:focus-visible { color: #fff; }
.zab-msp a.zab-msp-btn { color: #f2f7ff; }
.zab-msp a.zab-msp-btn:hover, .zab-msp a.zab-msp-btn:focus-visible { color: #fff; }
.zab-msp a.zab-grow-cta { color: #000; }
.zab-msp a.zab-grow-cta:hover, .zab-msp a.zab-grow-cta:focus-visible { color: #fff; }
.zab-msp .zab-floatcta a { color: #fff; }

/* ------------------------------------------------------------ motion guard */
@media (prefers-reduced-motion: reduce) {
    .zab-msp .zmit-trust-track { animation: none !important; }
    .zab-msp * { transition: none !important; }
    /* no service-card lift exists on this template (live has 0 linked cards),
       but keep the guard so a future copy-swap cannot regress it */
    .zab-msp [class*="-card"]:hover { transform: none !important; }
}

/* ------------------------------------------ Elementor grid row tracks */
/* Live's e-grid containers (de32d20 coverage, f646628 certs, d17b6cc quotes)
   carry Elementor's default grid-template-rows: repeat(2, 1fr): the FIRST TWO
   rows are equalised, the rest are auto. Measured: coverage row 2 is 188 at
   1440 although its own copy is one line shorter (161 without this); certs row 2
   takes row 1's 108; at 375 the first two coverage rows are 96/96, then 73/72. */
.zab-cov-list, .zab-certs-grid, .zab-testi-list { grid-template-rows: repeat(2, 1fr); }