/* ============================================================
   Managed IT Services San Antonio — page-specific layer.
   CITY CLUSTER, 19 SECTIONS.

   Loads AFTER css/it-managed-services-zazz.css (requested with a never-used
   ?v token, see $zmit_css_v in the page, so Cloudflare cannot serve a stale
   variant of the shared sheet).

   Cloned from css/managed-it-services-charlotte.css — the owner-approved CITY
   reference sheet — because live serves this page from the SAME Elementor
   template: a depth-1 walk inside data-elementor-type="wp-page" returns 19
   container ids (820bdff, 743c4b6, d2a41b8, 0e19d51, 93d485c, 81d38f2,
   672e3a2, c8f15e4, 8020c71, 716d40b, 1faf4e0, ae25977, a86e67a, d730615,
   9d19ee4, 65e1765, 1ad22e1, 7572440, a8ff3b4) and EVERY ONE of them is a
   charlotte id, in charlotte's order — including the three that separate
   charlotte from it-managed-services-san-jose (problems d2a41b8 not 54ce0f2,
   accordion c8f15e4 not 70aa4ba, and the desktop table BEFORE the mobile
   accordion). Shared ids mean the reference's measured values carry.

   TWO CHARLOTTE SECTIONS ARE ABSENT on this page, so their rules are removed
   rather than left dead:
     - 43ab1b2  .zab-adv    "Advantages…" 2-up card band
     - 070907d  .zmit-final gradient CTA banner + consultant figure
   There is NO final-CTA band here at all, so there is no figure to position;
   the page runs FAQ -> contact -> pre-footer.

   MEASURED DELTAS — the only places this page differs from charlotte, each
   read off THIS page's rendered DOM at 1440, not computed from CSS:
     - hero banner URL (this page's own artwork — Managed-it-services-san-
       antonio; it must equal the rel=preload in the page). Everything else
       about the hero measures the same as charlotte: banner img 1425 wide,
       object-fit fill; white card t140 h662 w508 l887, radius 8, padding
       20px 25px 20px 20px; card bottom 802 vs banner bottom 707 = a 95px
       overhang into the logo strip; marquee window 792 x 70 at t722; trust
       band 125 tall (15 / 70 / 40).
     - S06 comparison HEADING is 36.8px / 400 / 36.8px and LEFT aligned here
       (charlotte's is 33.05px / 600 / 43px centred), in a band padded
       50px top / 15px bottom around a 37px heading = live's 102px.
       Live's own heading box sits flush at x=0 with no gutter; the house
       centred container is kept (CLAUDE.md 7 forbids widening the content
       box, and this is the same rule read the other way round).
     - S07 comparison is SIX rows, and BOTH the header cells and the body
       cells are 16px / 400 / 26.4px #000 here — charlotte's header is
       24px / 600 / 32px and its body is 500-weight with a 23px line-height
       override on the Zazz column. Per-cell reads at 1440:
         col-0 42aaba8  3-layer gradient on the COLUMN, cells transparent,
                        border-top 1px on the first body cell only
         col-1 0fcc835  column #eff0f7; border-top 1px on EVERY row; even
                        body rows #f9fcff; FIRST body cell has NO bottom
                        border
         col-2 f37363c  column transparent; odd body rows #f9fcff, even #fff;
                        border-top 1px on the first body cell only
       Charlotte's odd/even rules are already row-count-independent, so they
       reproduce this at six rows unchanged — never enumerate nth-of-type.
     - .zmit-article-cat is unused here (live's Articles cards carry no
       category term) and .zmit-article-exc is never rendered at all (owner
       instruction)
     - .zmit-stat .big .pre is unused — all three counters are suffix-only
       (100%, 2x, 99%) — but kept so the stats partial stays copy-safe for the
       sibling city pages

   Two halves:
     1. Family A carry-overs — the APPROVED values from the charlotte /
        dark-web-monitoring lineage (hero/form geometry, FAQ padding,
        services-card fill, light copy on dark bands, 6/5 FAQ split). Carried,
        not re-invented.
     2. Family B additions — the sections Family A has no component for
        (.zab-problems, .zab-cmp-head/.zab-cmp/.zab-cmp-acc, .zab-certified,
        .zab-steps, .zab-trust, .zab-band) plus the Family A components whose
        live values differ on this page.

   Split rule: a given CSS property for a given selector lives in exactly one of
   the two sheets, never both, so their load order cannot change any outcome.
   ============================================================ */
/* ------------------------------------------------------------
   BRAND TOKENS taken from live's Elementor globals
   ------------------------------------------------------------ */
.zmit {
    --zab-ink: #14142b;          /* live body/heading ink */
    --zab-accent: #0161ff;       /* --e-global-color-accent */
    --zab-body: rgba(20, 20, 20, .7); /* --e-global-color-text */
    --zab-line: rgba(6, 0, 28, .12);  /* compare-table hairline */
    --zab-fill: #eff0f7;         /* card fill (uc_content / icon-box bg) */
    --zab-dark: #262338;         /* trust strip + stats band */
}

/* ------------------------------------------------------------
   CONTENT BOX. Live's boxed containers are the full viewport minus a 30px
   gutter — measured innerWidth 1365 at x=30 on 743c4b6, d2a41b8, 81d38f2,
   672e3a2, ae25977, a86e67a, d730615, 43ab1b2, 9d19ee4, 65e1765, 1ad22e1 —
   NOT the shared sheet's 1400px centred box (1340 at x=43). The pre-footer
   band 6648aeb is the single exception: 1400 wide at x=13, no gutter.
   ------------------------------------------------------------ */
/* Owner decision 2026-08-26: Family B uses the Family A centred box (shared
   .z-container = max-width 1400px, margin 0 auto, padding 0 30px) even though
   live's own Acronis page runs wider (content 1365 at x=30). Consistency across
   migrated pages beats matching live's width here. Do NOT reintroduce a global
   `.zmit .z-container { max-width: none }`. */

/* ============================================================
   1. HERO — every number below read off live's rendered DOM at 1440
   (8e8eda0 hero-section = 718 tall, 41deb3c logo strip = 125, total 843).

   Live's hero inner is a flex ROW that fills the 1365 box exactly:
       left column 757 | gap 100 | form card 508
   The left column carries a flat 20px gap between crumb / pill / headline /
   sub / CTA and a 50px bottom pad, which is what produces the 718.
   The form CARD (6c4c282, not the HubSpot widget inside it) is stretched to
   the row and carries margin-bottom:-95.55px, so it starts at the hero's own
   content top (y 140 — above the breadcrumb) and overhangs 96px into the
   logo strip. Family A's -132px overhang is a different number, not no
   overhang: measure, don't carry.
   ============================================================ */
/* Live paints the banner as a plain <img> sized 1425x718 with object-fit:fill —
   the artwork is STRETCHED to the box, not cropped, so `cover` gave a
   different crop. 100% 100% is the background equivalent of fill. */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/12/04152538/Managed-it-services-san-antonio-1536x474.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    /* crumb text lands at y 118, pill at y 184 (live 96bcdb8 / 8808f78) */
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
    /* 757 / 100 / 508 of the 1365 box, as percentages so it tracks the
       viewport below 1440 instead of hard-coding a 1440-only pixel row. */
    .zmit .zmit-hero-grid {
        grid-template-columns: 55.46% 37.22%;
        gap: 7.33%; align-items: stretch; padding: 28px 0 0;
    }
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
    /* live's left column is a flex column with a flat 20px gap */
    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    /* Owner request 2026-08-26: hero headline + sub reduced below live's 54px/16px.
       Deliberate deviation from live, applied on request. */
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
    /* live's sub runs the FULL 757 column (5 lines / 132px). Capped at 560 it
       wrapped to 6 lines and pushed the CTA 41px down. White, not #e6eaf2. */
    .zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
    /* live b37b9ab: 12px/12px/500 label, 12px 24px pad, #f2f7ff fill, 20px
       icon gap -> a 253 x 36 pill, not the shared 265 x 48 one. */
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px;
        background: #f2f7ff; border: 0;
    }
    /* live's button-icon is 16x12; left at its natural svg height it becomes the
       tallest flex item and inflates the pill from 36 to 46. */
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
    /* The shared button floors itself at a 46px touch target; live's desktop
       pill is 36. Only overridden above 1081px, so the 46px tap target the
       accessibility audit checks on mobile is left intact. */
    .zmit-hero .zmit-hero-cta-btn { min-height: 42px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* -44px lifts the card past the breadcrumb row to the hero content top;
       -95.55px is live's own overhang into the logo strip. */
    /* Live's white hero card measured at 1440: t140 h774 w508 l887, radius 8,
       padding 20px 25px 20px 20px. It IS stretched to the row and overhangs the
       banner by 95.55px into the logo strip. (The 459x458 box at y290 is the
       .hsfc-Form INSIDE the card - do not size the card against it.) */
    .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
    .zmit-form-card {
        margin: 0; height: 100%; transform: none;
        padding: 20px 25px 20px 20px;
    }
    .zmit-form-card h3 { margin-bottom: 12px; }
    .zmit-hsform { min-height: 0; }
    .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
    .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
    .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
    .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
    .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}

/* Scroll cue — live d2ae808 is a bare 30px chevron at left:50% (no translate),
   10px off the banner's bottom edge, no disc, fill rgba(255,255,255,.66),
   bobbing on `float 3s`. The shared component draws a 48px glass disc. */
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 18px;
    width: 30px; height: 30px; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .66);
    /* The shared bob bakes translateX(-50%) into its keyframes, which pulls the
       chevron 15px left of where live puts it. Live sits flush at left:50% with
       no centring translate, so the bob is redefined without the X shift. */
    animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }

/* Trust strip — live 41deb3c is 125 tall (15 top / 40 bottom around a 70px
   logo row) and its marquee window is 792 wide, flush with the gutter.
   Live's wrapper scrolls 21199px in 92s == ~115px/s; ours is a shorter track,
   so the duration is set from our own track width to keep the same speed. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.zmit .zmit-trust-chip { height: 70px; }
/* Owner request 2026-08-26: make every marquee logo read the same size.
   Live (and our clone) sized these by HEIGHT only (70px, object-fit:contain),
   so width ran 139-221px and the square Gartner mark (200x200 natural, every
   other file is 193px tall) read as a small icon. Bounding BOTH axes inside a
   fixed chip evens the optical weight. */
.zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; }
.zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; }

/* ============================================================
   SHARED PAGE BUTTON — live's own body CTA (label first, then arrow).
   Used by S03, S09, S15, S18. Live element 4480afa / 192ffed.
   ============================================================ */
.zmit .zab-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15.38px; font-weight: 600; line-height: 16px;
    color: #fcfcfc; background: var(--zab-accent);
    border-radius: 5px; padding: 15px 30px; text-decoration: none;
    transition: background .2s ease;
}
.zmit .zab-btn:hover { background: #141414; color: #fcfcfc; }
/* Measured on every live CTA (hero 732, problems 2388, steps 5388,
   recognized 5681, stats 8429): the arrow sits AFTER the label, never before. */
.zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; }
.zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; }
.zmit .zab-btn-ico svg path { fill: currentColor; }
/* live 843341d (problems): 369 x 36, 12px/12px/500, #0161ff on #f2f7ff,
   12px 24px pad, 8px radius — the same pill as the hero CTA. */
.zmit .zab-problems-cta .zab-btn {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 16px; line-height: 16px; font-weight: 500;
    padding: 13px 35px; border-radius: 8px; gap: 20px;
}
.zmit .zab-problems-cta .zab-btn:hover { background: #e2ecff; color: var(--zab-accent); }
/* live 4e0d0f3 (steps): 167 x 46, 13px/16px/600, #f2f7ff on #0161ff, 5px radius */
.zmit .zab-steps-cta .zab-btn {
    background: var(--zab-accent); color: #f2f7ff;
    font-size: 13px; line-height: 16px; font-weight: 600;
    padding: 15px 30px; border-radius: 5px; gap: 20px;
}
.zmit .zab-steps-cta .zab-btn:hover { background: #0a4fd0; color: #f2f7ff; }
/* live cb96327 (stats): 14.59px/14.59px/500, #0161ff on #f2f7ff, 12px 24px,
   8px radius — live does NOT invert this to a white pill. */
.zmit .zab-btn-light {
    background: #f2f7ff; color: var(--zab-accent);
    font-size: 14.59px; line-height: 14.59px; font-weight: 500;
    padding: 12px 24px; border-radius: 8px; gap: 20px;
}
.zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* Final CTA keeps the accent pill on the light gradient banner. */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #fcfcfc; }

/* ============================================================
   S02 SERVICES — 12 cards, FOUR columns (live 39d0dc0 measured at 1440:
   grid-template-columns 333.75px x4; gap 30px; .uc_content #eff0f7;
   .padding 30px; item radius 10px; title 18px/700/23.4px #14142b;
   text 14px/23.1px; ul list-style disc, padding-left 20px).
   Live's icon-box ships BOTH a title and a description, so this page renders
   two lines: the H2 eyebrow (bcf7ff9 = 16.31px/700/25.2px, margin-bottom 10)
   and the lead (49c4c98 = 34.7px/43px/400). Head block -> first card = 20px.
   Each card ends in a VISIBLE interlink (.uc_more_btn = 14px/700/23.1px #000,
   inline-flex, gap 14, margin-top 10) pinned to the card foot with margin-top
   auto so the button row lines up across a ragged row of cards.
   ============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
.zmit-services-head { margin-bottom: 20px; }
.zmit .zab-svc-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); margin: 0 0 10px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; }
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
/* Visible card fill is mandatory — a card with no fill is invisible against the
   white section. #eff0f7 is live's own .uc_content colour. */
.zmit-services-grid .zmit-svc-card {
    background: var(--zab-fill);
    border: 0;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; }
/* Live draws a native disc at padding-left 20px; the shared sheet draws its own
   bullet with li::before at left:2px inside an 18px indent. Keep the SHARED
   marker (list-style stays none) — re-enabling the native one on top of the
   ::before renders every bullet twice (CLAUDE.md 7). */
.zmit-services-grid .zmit-svc-card ul { margin: 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin-bottom: 0; }
.zmit-services-grid .zmit-svc-card li a { color: var(--zab-accent); }
/* Per-card interlink. Live paints the label #000 with no underline and hangs a
   14x8 arrow 14px to its right; the arrow inherits currentColor. */
.zmit .zab-svc-cta {
    margin-top: auto;
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 700;
    line-height: 23.1px;
    color: #000;
    text-decoration: none;
}
/* NO hover restyle. Live's only rule for this link is
   `.uc_more_btn:hover { background-color:#45454500; color:#000000 }` — i.e. the
   label stays #000 and nothing moves. An accent-on-hover was invented here and
   removed; hover states are measured off live, never designed (CLAUDE.md 7). */
.zmit .zab-svc-cta svg { flex: 0 0 auto; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* ============================================================
   S03 PROBLEMS — live d2a41b8: white band, 30px padding, 30px row gap.
   Heading 24aeb41 = 33.05px/600/1.3em centred. Two 50% icon-list columns
   (6fb7f36 / 650313e) with 22px check icons and 18px/500 items, 15px row gap.
   Answer heading f31c35f = 24px/400/1.8em centred.
   ============================================================ */
.zmit .zab-problems.z-section { background: #fff; padding: 30px 0; }
.zmit .zab-problems-head { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; }
.zab-problems-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 30px; }
.zab-problems-list { list-style: none; margin: 0; padding: 0; }
.zab-problems-list li { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 7.5px; margin-top: 7.5px; }
.zab-problems-list li:first-child { margin-top: 0; }
.zab-problems-list li:last-child { padding-bottom: 0; }
.zab-tick { flex: 0 0 22px; margin-top: 1px; }
.zab-tick svg { display: block; width: 22px; height: 22px; fill: #046bd2; }
.zab-tick-text { font-size: 18px; font-weight: 500; line-height: 29.7px; color: var(--zab-ink); }
.zmit .zab-problems-answer { font-size: 24px; font-weight: 400; line-height: 43.2px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; padding-bottom: 15px; }
.zab-problems-cta { text-align: center; }

/* ============================================================
   S04 "FULLY MANAGED BY ZAZZ" BAND — live 0e19d51. THE 21st SECTION; the
   reference sheet has no equivalent, so every number here was read off live's
   rendered DOM at 1440, not carried:
     band 0e19d51   flex ROW, gap 50, padding 20px 30px 30px, transparent, 549 tall
     left 2b5c78d   820 wide — an explainer <video> rendered 820 x 461
     right fce4fe2  455 wide, padding 50px 0, flex COLUMN gap 40:
                      h2 4740d79   455 x 117  30px / 39px / 600 / #141414
                      CTA 3ea3821  455 x 46   14px/14px/500, #f2f7ff on #0161ff,
                                              padding 16px 30px, radius 0
                      quote 4512a67 padding 0 20px 0 40px; blockquote 395 x 156
                        p    18px / 23.4px / 600 / #141414
                        ::before  "“" 70px #0161ff at top -20 / left -45
                        footer margin-top 15; cite 14px/400 rgba(20,20,20,.7)
     50 + 117 + 40 + 46 + 40 + 156 + 50 = 499; + 20 + 30 padding = 549.
   ============================================================ */
.zmit .zab-band.z-section { background: #fff; margin: 0; padding: 20px 0 30px; }
.zab-band-inner { display: grid; grid-template-columns: 820fr 455fr; gap: 50px; align-items: center; }
.zab-band-media { min-width: 0; }
.zab-band-video { display: block; width: 100%; height: auto; aspect-ratio: 820 / 461; background: #000; }
.zab-band-copy { display: flex; flex-direction: column; gap: 40px; padding: 50px 0; }
.zmit .zab-band h2 { font-size: 30px; font-weight: 600; line-height: 39px; color: var(--zab-ink); margin: 0; }
/* Live's CTA fills the 455 column and left-aligns its label. */
.zmit .zab-band-btn {
    display: flex; width: 100%; justify-content: flex-start;
    font-size: 14px; line-height: 14px; font-weight: 500;
    padding: 16px 30px; border-radius: 0;
    background: var(--zab-accent); color: #f2f7ff;
}
.zmit .zab-band-btn:hover { background: #0a4fd0; color: #f2f7ff; }
.zmit .zab-band-quote { position: relative; margin: 0 20px 0 40px; padding: 0; }
.zmit .zab-band-quote::before {
    content: '\201C'; position: absolute; top: -20px; left: -45px;
    font-size: 70px; line-height: 1; color: var(--zab-accent);
}
.zmit .zab-band-quote p { font-size: 18px; font-weight: 600; line-height: 23.4px; color: var(--zab-ink); margin: 0; }
.zmit .zab-band-quote footer { margin-top: 15px; }
.zmit .zab-band-quote cite { display: block; font-style: normal; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--zab-body); }
/* ============================================================
   S05 BOOK A FREE CONSULTATION — live 93d485c / 29825: centred heading and
   copy, then the HubSpot meetings well. Live's iframe well runs ~760px.
   ============================================================ */
.zmit .zmit-bookcal.z-section { padding: 30px 0 0; }
.zmit .zmit-bookcal h2 { font-size: 33.05px; font-weight: 400; line-height: 43px; color: var(--zab-ink); text-align: center; margin-bottom: 12px; }
.zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--zab-ink); text-align: center; max-width: 1000px; margin: 0 auto; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }

/* ============================================================
   S06 COMPARISON HEADING — live 81d38f2 is its own container
   (padding 0 30px 15px); heading matches the S03 step (33.05px/600).
   ============================================================ */
/* Live 81d38f2 measures 102px tall: 50px above a 37px heading, 15px below
   (its e-con-inner padding is exactly 50px 0 15px). The heading itself is
   36.8px/400/36.8px and LEFT aligned — charlotte's is 33.05px/600/43px
   centred, so this is a real per-page delta, not a carry-over.
   Live's own heading box starts at x=0 (its container has no gutter, so the
   text touches the viewport edge). The house centred .z-container is kept —
   CLAUDE.md 7 forbids widening the content box even when live is wider. */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 50px 0 15px; }
.zmit .zab-cmp-head h2 { font-size: 36.8px; font-weight: 400; line-height: 36.8px; color: var(--zab-ink); text-align: left; margin: 0; }

/* ============================================================
   S06 COMPARISON TABLE — DESKTOP ONLY (live 672e3a2 carries
   elementor-hidden-tablet_extra/tablet/mobile_extra/mobile).
   Row 60431dc: 3 columns, 15px gap, 10px radius, overflow hidden.
   Header cells (18ed247/f505325/3728033): #fff, 20px 30px, and on THIS page
   16px/400/26.4px #000 — the same type as the body cells, not charlotte's
   24px/600/32px. Body cells: 16px/400/26.4px #000, 1px var(--zab-line)
   border, 100px tall, centred. Column 2 body = #eff0f7, column 3 = #f9fcff.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0 0 30px; }
.zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.zmit .zab-cmp-col-head {
    background: #fff; padding: 20px 30px; margin: 0;
    font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000;
}
.zmit .zab-cmp-cell {
    margin: 0; padding: 20px 30px; height: 100px;
    display: flex; align-items: center;
    font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000;
    border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Live rounds only the FIRST body cell of each column (radius 10px 10px 0 0)
   and it is the one that carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Live paints the Key Capability COLUMN with a 3-layer gradient (a 70% white
   veil over two blue gradients) and leaves its cells transparent. Copied
   verbatim from live's computed backgroundImage. */
.zab-cmp-col-0 {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
        linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%),
        linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zab-cmp-col-0 .zab-cmp-cell { background: transparent; }
.zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
/* PER-PAGE DELTA (measured on THIS page, 6 rows — charlotte has 7).
   Live alternates the body fills on a strict odd/even cycle rather than the
   explicit row list the 6-row sheets carry, so an nth-of-type(2)/(4) pair would
   leave rows 6 and 7 unstriped here. Reading it as odd/even reproduces live at
   any row count, which is what the remaining city pages need.
     Zazz column   odd rows -> the column's own #eff0f7, even rows -> #f9fcff
     Other column  odd rows -> #f9fcff,                 even rows -> #fff
   (nth-of-type counts <p> only: the <h3> column head is a different type, so
   "row 1" really is the first body cell.) */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; }
/* Live hairlines EVERY cell of the Zazz column; the other two columns keep the
   single top hairline that :first-of-type already sets above. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
/* Measured on live: the FIRST body cell of the Zazz column has no bottom
   border (94d84cd-equivalent reads border-bottom-width 0). The other two
   columns' first cells keep theirs. */
.zab-cmp-col-1 .zab-cmp-cell:first-of-type { border-bottom-width: 0; }
.zab-cmp-acc { display: none; }

/* ============================================================
   S07 COMPARISON ACCORDION — MOBILE/TABLET ONLY (live c8f15e4 carries
   elementor-hidden-widescreen/desktop/laptop). Native <details>, as live.
   Rows are icon-box pairs: 20px green tick = Zazz, 22px red cross = Others.
   ============================================================ */
@media (max-width: 1080px) {
    .zab-cmp { display: none; }
    .zab-cmp-acc { display: block; }
}
.zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
.zab-acc-item { background: var(--zab-fill); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.zab-acc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--zab-ink);
    background:
        linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)),
        linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%),
        linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zab-acc-q::-webkit-details-marker { display: none; }
.zab-acc-sign { position: relative; flex: 0 0 16px; height: 16px; }
.zab-acc-sign::before,
.zab-acc-sign::after { content: ''; position: absolute; background: var(--zab-ink); }
.zab-acc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; }
.zab-acc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; }
.zab-acc-item[open] .zab-acc-sign::after { opacity: 0; }
.zab-acc-a { padding: 0; }
.zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; background: var(--zab-fill); }
.zab-acc-row:last-child { background: #f9fcff; }
.zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
.zab-acc-ico svg { display: block; width: 22px; height: 22px; }
.zmit .zab-acc-row h3 { font-size: 18px; font-weight: 500; line-height: 1.3; color: #0161ff; margin: 0 0 6px; }
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-ink); margin: 0; }

/* ============================================================
   S09 PROVEN SECURITY STANDARDS BAND — live 8020c71: background #000,
   padding 65px 0 70px. Heading 9cd1c77 = 40px/600/56px #fff centred.
   Copy df25298 = 16px/400 #c2c2c2, max-width 800px, centred.
   Badges 267030c = 6-up grid, 16px gap, 25px above.
   DARK BAND ⇒ LIGHT COPY. Never darken anything in here.
   ============================================================ */
.zmit .zab-certified.z-section { background: #000; padding: 65px 0 70px; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; text-align: center; margin: 0; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 1.7; color: #c2c2c2; text-align: center; max-width: 800px; margin: 11px auto 0; }
.zab-certified > .z-container > p a { color: #fff; font-weight: 500; text-decoration: underline; }
/* Live 8020c71 lays the six badges in a gapless 6-up grid and renders each
   225x150 source at 224x227 (object-fit:fill — live stretches them). Matching
   the RENDERED aspect keeps the band at live's 510px; a natural-aspect row is
   87px shorter. Width-relative so the house 1340 container still fits six. */
.zab-certified-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 25px; align-items: center; }
.zab-certified-badges img { width: 100%; height: auto; display: block; }
/* Live is a 16px-gap grid at NATURAL aspect (computed aspect-ratio "auto 227 / 230").
   gap:0 plus a forced aspect-ratio and object-fit:fill fuses the badges'
   baked-in dark tiles into one uneven bar - see CLAUDE.md. */

/* ============================================================
   S10 THREE-STEP PATH — live 716d40b: background #f2f7ff,
   margin 30px 0, padding 35px 30px 30px, 20px row gap.
   Heading fca040b 33.05px/600/1.3em centred; lead bdea526 16px centred.
   The 3-card row (df23ff0) sits margin-top:-140px OVER the waves artwork.
   Cards: transparent, 20px padding, centred, 25px icon-to-text gap;
   icon is a white circle (view-stacked, shape-circle, 50px glyph + 27px pad);
   title 20px/700, copy 14px/500 --e-global-color-text.
   ============================================================ */
.zmit .zab-steps.z-section { background: #f2f7ff; margin: 30px 0; padding: 54px 0 48px; }
.zmit .zab-steps h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 20px; }
.zmit .zab-steps-lead { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--zab-ink); text-align: center; margin: 0 0 10px; }
.zab-steps-art { display: block; width: 100%; height: auto; }
.zab-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -140px; padding-bottom: 10px; }
.zab-step { padding: 20px; text-align: center; }
.zab-step-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 104px; height: 104px; border-radius: 50%; background: #fff;
    margin-bottom: 25px;
}
.zab-step-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-step h3 { font-size: 20px; font-weight: 700; line-height: 1.2em; color: var(--zab-ink); margin: 0 0 12px; }
.zmit .zab-step p { font-size: 14px; font-weight: 500; line-height: 1.5em; color: var(--zab-body); margin: 0; }
.zab-step p a { color: var(--zab-accent); }
.zab-steps-cta { text-align: center; }

/* ============================================================
   S11 RECOGNIZED — live 1faf4e0 padding 160px/150px around a #141414 box
   (7e422c7). Heading 9bf40de = 30px/300/1.4em #fff; copy 158fb73 = 16px/300
   #f2f7ff; CTA 4257c87 = #fcfcfc pill, #141414 label, 8px radius, 20px pad.
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit-recognized-band { padding: 40px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #f2f7ff; max-width: 640px; }
.zmit-recognized-logos { gap: 36px; }
.zmit-recognized-logos img { height: 50px; width: auto; }
.zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }

/* ============================================================
   S12 WHY BUSINESSES CHOOSE ZAZZ — live ae25977: white section,
   padding 30px 0 20px, eyebrow ca133c9 = 34.7px/400/43px #14142b with 52px
   below. Panel c09aff4 = #262338, radius 15px, 4 columns, 10px column gap.
   Cells d0359fb..: 32px 25px padding, 1px #fff RIGHT border (last has none).
   Icons 100px. Titles (h2) 15px/700 underlined #fff.
   Descriptions (h3) 15px/600/28px #f7f7fc. All centred.
   DARK PANEL ⇒ LIGHT COPY.
   ============================================================ */
/* Live ae25977's inner is padded 160px 0 0 — all the air is ABOVE the eyebrow,
   none below the panel (628 = 160 + 95 eyebrow block + 372 panel). */
.zmit .zab-trust.z-section { background: #fff; padding: 160px 0 0; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 52px; }
.zab-trust-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 15px;
}
.zab-trust-cell {
    padding: 37px 25px; text-align: center;
    border-right: 1px solid #fff;
}
.zab-trust-cell:last-child { border-right: 0; }
.zab-trust-ico { display: block; margin: 0 auto 24px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
.zmit .zab-trust-cell h2 { font-size: 15px; font-weight: 700; line-height: 21px; color: #fff; text-decoration: underline; margin: 0 0 12px; }
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 700; line-height: 28px; color: #f7f7fc; text-decoration: underline; margin: 0; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell p { color: #f7f7fc; } /* light body copy on the dark feature panel (was inheriting dark ink); :not(.v-split) leaves the light variant untouched */

/* ============================================================
   S13 SUCCESS STORIES — live a86e67a padding 30px 0; heading 5715405 at the
   29px/300 Family B step. Card + brand-logo treatment carried from the
   approved Family A rule: every logo normalises to a 50px-tall, left-aligned
   box so a square mark and a wide wordmark share one baseline.
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 12px 0; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; }
.zmit-story-img img { height: 250px; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 150px;
    object-fit: contain; object-position: left center;
}
.zmit-story .body { padding: 20px; }
.zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.zmit-story p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   S14 BLOGS — live d730615: white, padding 30px, 30px gap.
   Heading c0a9cde = 29px/300/1.5em; "Explore All…" 55eab48 = transparent with
   a 1px accent underline and the chevron AFTER the label (row-reverse on live,
   which puts the icon on the right of an RTL-flipped wrapper).
   Cards bbff8d0: 10px radius, overflow hidden, 10px gap.
   ============================================================ */
.zmit .zmit-articles.z-section { padding: 45px 0; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); }
.zmit-articles-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; color: var(--zab-accent);
    border-bottom: 1px solid var(--zab-accent); padding-bottom: 5px;
}
.zmit-articles-more:hover { color: #141414; border-color: #141414; }
.zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.zmit-articles-grid { gap: 30px; }
.zmit-article { border-radius: 10px; overflow: hidden; text-decoration: none; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article-img img { height: 270px; }
.zmit-article .body { padding: 24px 2px 32px; }
.zmit .zmit-article .date { font-size: 13px; font-weight: 500; color: var(--zab-accent); margin: 0 0 14px; }
.zmit .zmit-article h3 { font-size: 18px; font-weight: 600; line-height: 27px; color: var(--zab-ink); margin: 0; transition: color .2s ease; }

/* Live's Blogs cards (785d722) carry two fields the reference's Articles cards
   do not — the taxonomy term above the date and the full post excerpt below the
   title — and its type steps differ from the reference's Articles band. All
   measured on live at 1440 (card 465 wide x 790 tall, image 435 x 250 cover):
     term  8635228  14px / 18px / 500  #0161ff
     date  2ed54b1  14px / 400         #5e5e5e
     title ccfb150  24px / 36px / 500  #000
     excerpt 5e6ef82 16px / 26px / 400 #000, NOT clamped (9 lines on card 1)
   These override the reference sheet's 13px date / 18px-27px title, which were
   measured on a different band on a different page. */
.zmit .zmit-article-cat { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--zab-accent); margin: 0 0 8px; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 400; color: #5e5e5e; margin: 0 0 12px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 500; line-height: 36px; color: #000; }
.zmit .zmit-article-img img { height: 250px; }
/* Counter prefix span (e.g. a `<` before the number). Unused on this page —
   all three live counters are suffix-only — but styled so the shared markup
   stays safe to copy. */
.zmit-stat .big .pre { font-size: inherit; font-weight: inherit; color: inherit; }
/* ============================================================
   S15 BUSINESS ADVANTAGES — live 43ab1b2: white, padding 10px 0 30px,
   50px gap. Heading 01b6716 = clamp(1.5rem,…,2.125rem)/300/1.3em (34px at
   1440). Grid ebfd715 = TWO columns, 30px gap. Cards 56864d7 = #eff0f7,
   20px padding, title 18px/700 with 20px below, copy 15px/400.
   ============================================================ */

/* ============================================================
   S16 MEASURABLE RESULTS — live 9d19ee4: background #262338, margin 30px 0,
   padding 50px 0, 50px gap, two columns (copy | counters row).
   Heading 67e5b1d renders 34px/44.2px/400 #fcfcfc (the clamp is overridden on
   live by a later rule — measured, not computed), 438 wide, then a 50px drop
   to the CTA. Counter row e5bfa3e is 877 wide, VERTICALLY CENTRED in the band,
   three 263px counters 44px apart.
   Counter order, measured off live (number-wrapper y 8265, title y 8340):
   the NUMBER IS ON TOP — 57px/57px/600 in #76aaff, centred — and the label
   sits 18px BELOW it at 14px/21px/400 #fcfcfc. Our markup emits the label
   first, so the number is re-ordered here rather than in the PHP (the same
   partial feeds the responsive stack).
   DARK BAND ⇒ LIGHT COPY. Never set a dark colour on anything in here.
   ============================================================ */
.zmit-stats { background: var(--zab-dark); }
.zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
/* PER-PAGE DELTA: this page's stats band leads with a SMALL EYEBROW, not a
   second big heading. Live 9d19ee4 measures h2 "Managed IT Services Charlotte"
   at 16px/600/19.2px and h3 "Operational Performance Indicators" at
   34px/400/44.2px — the h3 is the real heading. The shared sheet styles
   .zmit-stats-copy h2 at 34px, which would render the eyebrow as a second
   headline and add ~70px to the band, so it is overridden here.
   DARK BAND => LIGHT COPY: both stay #fcfcfc. */
.zmit .zmit-stats-copy h2 {
    font-size: 16px;
    font-weight: 600; line-height: 19.2px; color: #fcfcfc; margin: 0 0 10px;
}
.zmit-stats-copy h3 {
    font-size: 34px;
    font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 50px;
}
@media (min-width: 1081px) {
    .zmit-stats-layout { grid-template-columns: 438fr 877fr; gap: 50px; align-items: center; }
    /* Three counters in a row, matching live's flex row (space-between). */
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; align-items: start; }
}
.zmit-stat { display: flex; flex-direction: column; }
.zmit-stat p { font-size: 14px; font-weight: 400; line-height: 21px; color: #fcfcfc; margin: 0; }
.zmit-stat .big {/* Owner request 2026-08-31: the stat NUMBER is left-aligned so it shares a left edge with its label. Live centres the number inside the same column while the label is start-aligned, so short labels look detached from their figure. Deliberate deviation from live, applied on request. */ order: -1; text-align: left;
    font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}

/* ============================================================
   S17 TESTIMONIALS — live 65e1765 padding 30px 0, 50px gap;
   heading b3cd7c7 = clamp(…,2.125rem)/300/1.3em. Name h3, hairline, location,
   quote. Card gradient carried from the approved Family A value.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 40px; }
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
    min-height: 415px;
}
.zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; }

/* ============================================================
   S18 FAQ — live 1ad22e1: background #eff0f7, padding 30px 0, 30px gap,
   two accordion widgets split 6 / 5.
   The two-value-shorthand trap: NEVER write `padding: 25px 0` here — it zeroes
   the shared sheet's 22px horizontal padding and every question goes flush to
   the card edge. Always restate the 22px.
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 36px 0; }
.zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
/* The shared list is a CSS multi-column box, which BALANCES the columns. Live
   ships two explicit accordion widgets split 6 / 5, so its left column is the
   taller one and sets the section height. Forcing the break after item 6
   reproduces that split. Gated above the phone breakpoint: with column-count:1
   a forced break creates a SECOND column and the list overflows the viewport. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(6) { break-after: column; }
}

/* ============================================================
   S19 FINAL CTA — live 5adf0d8 / 8864: banner 2dee0b2 carries
   linear-gradient(102.29deg,#ecf1eb 8.75%,#aec8fd 45.11%,#84c3fc 81.46%),
   inner 718d6c9 radius 5px + 50px padding; heading 33a894d 33.05px/600/1.3em;
   copy 4658da0 17.16px/400/25.2px; figure 4f2c262 is 500px wide, aligned to
   the bottom-right and lifted -10% so it breaks above the banner's top edge.
   ============================================================ */

/* ============================================================
   S20 REQUEST A CONSULTATION — live 7572440 / 8978: section carries a photo
   background; heading 3946774 = 33.89px/300/43px #fcfcfc centred; the form
   card d511f3d is #fff, 8px radius, 30px padding; "Contact now" 8927c4b is
   25px/400 #6e7191.
   ============================================================ */
.zmit-contact {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
    background-color: #1f4fd6;
}
.zmit .zmit-contact.z-section { padding: 50px 0; }
.zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; }
.zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; }
/* Owner request 2026-08-26: narrower card, no dead space. The 621px min-height
   was padding the card out to live's band height while the form itself is 443;
   dropped so the card hugs its content. Width 720 -> 620. */
.zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 620px; }
.zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; }

/* ============================================================
   S21 PRE-FOOTER BAND — live 6648aeb, measured at 1440:
     band  #000, padding 80px 0, total height 436
     box   1400 wide at x 13 — the ONE container on this page that is the
           shared 1400px box with NO 30px gutter, so .z-container is restored
     left  170b7dd 770 wide, column gap 20:
             row  [logo 194x56 (image 194x43) | title 556 wide]  = 56 tall
             copy fa7ec24 = 200 tall
     right 4eec9af 280 wide at x 1133, column gap 20, two 280x58 buttons,
           16px/24px/500, 16px 30px pad, 5px radius, 1px solid #fff border;
           first solid white with black label, second transparent with white.
   Left and right are 350px apart, i.e. justified to the box edges.
   Title 1702e8c is 28px/28px (NOT 1.3em — that made it 73 tall, not 56).
   The 116px under the copy is live's own: its text is 3 lines (84px) and the
   remainder is four empty blocks left behind by the ChatGPT paste in the CMS
   (min-h-[46px] / mt-3 / text-center / -mt-). Reproduced as one margin so the
   band is 436 with live's 80px padding, instead of faking the height with
   127px of padding live does not have.
   DARK BAND ⇒ LIGHT COPY.
   ============================================================ */
/* Colour treatment is width-independent; the 1440 geometry is gated below. */
.zmit-insights-copy p.zmit-insights-title { font-weight: 400; border-left: 2px solid #fff; }
.zmit-insights-copy p:not(.zmit-insights-title) { font-weight: 400; color: #fff; }
.zmit-insights-btns a {
    background: #fff; color: #000; border: 1px solid #fff; border-radius: 5px;
    font-size: 16px; font-weight: 500; line-height: 24px; min-width: 0; justify-content: center;
}
.zmit-insights-btns a:last-child { background: transparent; color: #fff; }
.zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; }

@media (min-width: 1081px) {
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    /* container inherits the shared centred box (1400 / 30px gutter) */
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 194px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 43px; width: 194px; }
    .zmit-insights-copy p.zmit-insights-title {
        font-size: 28px; line-height: 28px;
        padding-left: 20px; margin-left: 0; max-width: none;
    }
    .zmit-insights-copy p:not(.zmit-insights-title) {
        /* Owner request 2026-08-26: no dead space under this band. Live pads the
           paragraph by 116px to hold a 436px band; we let the section hug its
           content instead (band ~320). Deliberate deviation from live. */
        font-size: 20px; line-height: 28px; max-width: 770px; margin: 0;
    }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { padding: 16px 30px; width: 280px; }
}

/* ============================================================
   TABLET (<=1080)
   The desktop lead-ins and overlaps are desktop compositions; stacked layouts
   just butt up, and the desktop type steps overflow a narrow column.
   ============================================================ */
@media (max-width: 1080px) {
    .zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
    .zmit .zab-problems-head,
    .zmit .zab-cmp-head h2,
    .zmit .zab-steps h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-problems-answer { font-size: 19px; line-height: 1.6; }
    .zab-tick-text { line-height: 26px; }
    .zab-problems-cols { grid-template-columns: 1fr; gap: 0; }
    .zmit .zab-band h2 { font-size: 24px; line-height: 1.3; }
    .zab-band-inner { grid-template-columns: 1fr; gap: 24px; }
    .zab-band-copy { padding: 0; gap: 24px; }
    .zmit .zmit-article h3 { font-size: 20px; line-height: 30px; }
    .zab-tick-text { font-size: 16px; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
    .zab-steps-grid { grid-template-columns: 1fr; margin-top: 0; }
    .zmit .zab-trust-eyebrow { font-size: 24px; line-height: 1.3; margin-bottom: 28px; }
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { border-right: 0; border-bottom: 1px solid #fff; }
    .zab-trust-cell:last-child { border-bottom: 0; }
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .zmit-recognized-band { padding: 32px 26px; }
    .zmit .zmit-recognized.z-section { padding: 40px 0; }
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 24px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 17px; line-height: 26px; }
    /* Stacked: no overflow trick, figure sits under the copy. */
    /* Hero is single-column below 1081, so the deep left-column pad just opens
       a gap between the CTA and the form card. */
    .zmit-hero-left { padding-bottom: 0; }
    /* Desktop card floor is a desktop composition; stacked it just adds dead space. */
    .zmit-testi-card { min-height: 0; }
}

/* Tablet-only: the shared sheet already collapses these to one column at 680px,
   and this sheet loads after it, so gating stops them re-imposing a two-up
   layout on a phone. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-articles-grid { grid-template-columns: repeat(2, 1fr); }
    /* live at 768 keeps the advantages cards two-up */
    /* HubSpot's meetings widget sets a taller height on its own iframe once the
       narrow layout stacks the slot picker (inline style, so it wins over the
       760px above). Let the well follow the iframe instead of clipping it. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 660px; }
}

/* ============================================================
   PHONE (<=680)
   Re-measured rhythm for a 375 viewport; the shared sheet's structural
   stacking does the rest.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section  { padding: 20px 0; }
    .zmit-services-grid .zmit-svc-card { padding: 22px; }
    .zmit .zab-problems.z-section   { padding: 40px 0; }
    .zmit .zab-cmp-acc.z-section    { padding: 0 0 200px; }
    .zmit .zab-certified.z-section  { padding: 124px 0; }
    .zmit .zab-steps.z-section      { margin: 20px 0; padding: 30px 0; }
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
    .zmit .zab-trust.z-section      { padding: 24px 0 100px; }
    .zmit .zmit-stories.z-section   { padding: 24px 0; }
    .zmit .zmit-articles.z-section  { padding: 88px 0; }
    .zmit .zmit-stats.z-section     { margin: 20px 0; padding: 34px 0; }
    .zmit .zmit-testi.z-section     { padding: 24px 0; }
    .zmit .zmit-faq.z-section       { padding: 40px 0; }
    .zmit .zmit-contact.z-section   { padding: 40px 0; }
    .zmit .zmit-insights.z-section  { padding: 0; }

    .zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems-head,
    .zmit .zab-cmp-head h2,
    .zmit .zab-steps h2,
    .zmit .zab-certified h2,
    .zmit .zab-problems-answer { font-size: 16px; line-height: 25px; }
    .zab-tick-text { font-size: 15px; line-height: 24px; }
    .zmit .zab-step h3 { font-size: 18px; }
    .zab-step { padding: 14px 0; }
    .zab-step-ico { width: 88px; height: 88px; margin-bottom: 18px; }
    .zab-step-ico svg { width: 42px; height: 42px; }
    .zmit-testi-lead { font-size: 18px; line-height: 26px; }
    .zmit-testi-quote { font-size: 14px; line-height: 22px; }
    .zmit .zab-trust-cell h3 { font-size: 14px; line-height: 24px; }
    .zab-trust-cell { padding: 44px 20px; }
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
    /* This sheet loads after the shared one, so the desktop fixed-column rules
       above have to be undone explicitly on a phone. */
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
    .zmit-stats-grid { grid-template-columns: 1fr; gap: 24px; }
    .zab-acc-q { padding: 14px 16px; font-size: 16px; }
    .zab-acc-a { padding: 0; }
    .zab-acc-row { padding: 14px 16px; }
    /* Full-bleed at one column, so the desktop 250px reads taller — matches live. */
    .zmit-story-img img { height: 240px; }
    .zmit-article-img img { height: 240px; }
    .zmit-faq-q { padding: 16px; font-size: 15px; line-height: 22px; }
    .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 21px; padding-left: 14px; margin-left: 14px; }
    .zmit-insights-btns a { padding: 14px 28px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}
/* ============================================================
   1440 SECTION-HEIGHT RECONCILIATION — every value below is the delta
   between our render and live's, measured section by section at 1440 and
   traced to the element that caused it.

   Everything derived from a 1440 measurement is GATED to the desktop
   composition. Ungated, these rules load after the tablet/phone blocks above
   and silently win there — which is exactly what happened on the first pass:
   the 36.8px comparison heading came back at 375, the article and FAQ bands
   lost their phone padding, and the fixed 784px calendar well clipped the
   taller mobile HubSpot widget.
   ============================================================ */

/* --- correct at every width --- */

/* S05 — live 9289888/H2 is weight 400 and LEFT aligned, not 600 centred. */
.zmit .zab-cmp-head h2 { font-weight: 400; text-align: left; }
/* S15 — the shared sheet pins .zmit-stats-copy to 420px, narrower than live's
   438 column, which wraps the CTA label onto a second line (53 tall vs 39). */
.zmit-stats-copy { max-width: none; }
/* S17 — live e667b75 is weight 400. */
.zmit .zmit-faq h2 { font-weight: 400; }

@media (min-width: 1081px) {
    /* S02 — live caps the lead at 918 and still renders ONE line; our Poppins
       metrics are a shade wider and wrap at that width, costing a whole 43px
       line, so the cap is deliberately NOT carried. */

    /* S03 — live's icon-list block fd81f61 carries `padding: 0 0 20`, which is
       the whole of our 20px shortfall (list 401 vs 421). */
    .zab-problems-cols { padding-bottom: 20px; }

    /* S04 — live 93d485c is full-bleed: heading 858b4de is 30px/39px/400 with a
       10px drop, the copy sits on the full 1405 (two lines, not the three our
       1000px cap forced), 20 clears to the embed, and the embed is 784.
       30 + 39 + 10 + 53 + 20 + 784 = 936. */
    .zmit .zmit-bookcal h2 { font-size: 30px; line-height: 39px; font-weight: 400; margin-bottom: 10px; }
    .zmit .zmit-bookcal p { max-width: none; padding: 0 10px; margin: 0 0 20px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container,
    .zmit-bookcal-embed iframe { height: 784px; }

    /* S05 — 36.8px/36.8px is 37 tall; 33.05/43 was 43, the band's whole error. */
    .zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; }

    /* S08 — live 8020c71 is full-bleed: its inner is 1425, so the six badges
       get 224px cells (227 tall) instead of 214. The copy is 26.4 line-height
       and the badge row clears it by 27 (live nets +25.6 -23 +25). */
    .zmit .zab-certified > .z-container > p { line-height: 26.4px; }
    .zab-certified-badges { margin-top: 27px; }

    /* S14 — live ccfb150 (the Blogs title field) is 24px/36px/500 on desktop.
       NOT the reference page's 24/28.8/600: different band, different page. */
    .zmit .zmit-article h3 { font-size: 24px; line-height: 36px; font-weight: 500; }

    /* S14 — live d730615 pads the band 30 (not 45) and drops 29 from the head
       row to the grid. (Live's grid measures 455 to our 447 because its
       JetEngine listing keeps a loader node under the cards.) */
    .zmit .zmit-articles.z-section { padding: 30px 0; }
    .zmit-articles-head { margin-bottom: 29px; }

    /* S16 — live's inner gap is 50, not 40 (heading 8621 -> carousel 8671). */
    .zmit-testi h2 { margin-bottom: 50px; }

    /* S17 — live 1ad22e1: 30px band padding and TWO 655px columns 30 apart
       inside the 1365 box (the 25px remainder sits to the right of column
       two). A plain column-count:2 makes them 667.5 and the taller column
       then reads 19px short. */
    .zmit .zmit-faq.z-section { padding: 30px 0; }
    .zmit .zmit-faq h2 { margin-bottom: 30px; }
    .zmit-faq-list { column-gap: 30px; padding-right: 25px; }
}

/* ============================================================
   TABLET / PHONE RECONCILIATION — measured the same way as the 1440 block,
   against live at 768 and 375. Loads last so it wins over the generic
   responsive blocks further up.
   ============================================================ */
@media (max-width: 1080px) {
    /* S18 — the desktop figure is pinned 500x551; the tablet rule reset only
       the WIDTH, so the image kept a 551px box and stretched. */
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S09 — live df23ff0 stays THREE columns at 768 (205 wide, 20 gap) and
       keeps a -100 lift onto the waves art. Stacking them cost 382px. */
    .zmit .zab-steps.z-section { margin: 30px 0; padding: 30px 0; }
    .zmit .zab-steps h2 { font-size: 33.05px; line-height: 42.965px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 16px; line-height: 26.4px; margin-bottom: 20px; }
    .zab-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -100px; padding-bottom: 10px; }
    .zab-step { padding: 0; }

    /* S15 — live 9d19ee4 at 768: 30px band padding, 50 between the copy and
       the counter row, heading two lines (70) not three (133), counters 3-up
       212 wide with a 36 gap. */
    .zmit .zmit-stats.z-section { margin: 30px 0; padding: 30px 0; }
    .zmit-stats-layout { gap: 50px; }
    .zmit-stats-copy h3 { font-size: 26px; line-height: 35px; margin-bottom: 20px; }
    .zmit-stats-grid { gap: 36px; }

    /* S10 — the two-up band squeezes the copy into 323px at 768 and triples
       its height; live runs the band as a single column here. */
    .zmit-recognized-band { grid-template-columns: 1fr; gap: 24px; }
    .zmit .zmit-recognized-copy h2 { font-size: 24px; line-height: 32px; }
}

@media (max-width: 680px) {
    /* S09 — live at 375 keeps a -70 lift and drops the lead to 14px/23.1px. */
    .zmit .zab-steps.z-section { margin: 30px 0; padding: 20px 0 30px; }
    .zmit .zab-steps h2 { font-size: 26px; line-height: 33.8px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 14px; line-height: 23.1px; margin-bottom: 40px; }
    .zab-steps-grid { margin-top: -70px; gap: 40px; padding-bottom: 30px; }

    /* S15 — live at 375: 50px band padding, heading three lines (89), the
       three counters stacked 20 apart at 108 each. */
    .zmit .zmit-stats.z-section { margin: 30px 0; padding: 50px 0; }
    .zmit-stats-layout { gap: 50px; }
    .zmit-stats-copy h3 { font-size: 20px; line-height: 29.7px; margin-bottom: 20px; }
    .zmit-stats-grid { gap: 20px; }

    .zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S03 — live fd81f61 keeps TWO 344px columns at 768 (40 gap); the heading
       is 31/40.3 and the answer 22/37.4, not 27/33.75 and 19/30.4. */
    .zab-problems-cols { grid-template-columns: 1fr 1fr; gap: 0 40px; }
    .zmit .zab-problems-head { font-size: 31px; line-height: 40.3px; }
    .zmit .zab-problems-answer { font-size: 22px; line-height: 37.4px; }

    /* S07 — live's accordion rows are 68 tall (20px pad) and the band clears
       40 at the bottom; ours were 61 and 30. */
    .zab-acc-q { padding: 22px; }
    .zmit .zab-cmp-acc.z-section { padding: 0 0 40px; }

    /* S18 — live's consultant figure is 363x400 at 768, not 280 wide. */

    /* S20 — live 6648aeb keeps the two columns at 768: 400 and 218, justified
       to the box edges, inside 80px of band padding. */
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 400px 218px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 218px; padding: 16px 30px; }

    /* S11 — live's four trust cells run 13px taller each at 768. */
    .zab-trust-cell { padding: 50px 25px; }

    /* S16 — live's band is 583 around a 498 slide: 20px of band padding and a
       20px drop off the heading, not 30 and 40. */
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
}

@media (max-width: 680px) {
    /* S02 — live's uc_content cards keep their 30px pad at 375 (302/279 tall). */
    .zmit-services-grid .zmit-svc-card { padding: 30px; }

    /* S18 — live's figure is 335x500 at 375 (it stretches it, as on desktop). */

    /* S20 — live stacks the band at 375 inside 60px of padding: copy column
       283 (logo row 103 + copy 160), buttons 136 (two 58s, 20 apart). */
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 100%; padding: 16px 30px; }

    /* S11 — live's cells are 21px taller each at 375. */
    .zab-trust-cell { padding: 65px 20px; }

    /* S16 — same 20/20 rhythm as 768 around live's 498 slide. */
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
}

/* ------------------------------------------------------------
   FINAL BAND-HEIGHT TRIM. Live builds several of these bands out of Elementor
   widgets whose internals do not map onto our markup one-for-one (the trust
   panel is an icon-box + grid pair, the testimonial band is a Swiper, the
   accordion is e-n-accordion). Where the composition already matches, the
   remaining difference is closed on the band's own padding, each value being
   the measured delta against live at that width.
   ------------------------------------------------------------ */
@media (min-width: 1081px) {
    .zab-steps-grid { padding-bottom: 33px; }   /* S09 699 - 676 */
    .zmit .zmit-stories.z-section { padding: 23px 0; }  /* S12 670 - 648 */
    .zmit .zmit-stats.z-section { padding: 60px 0; }    /* S15 385 - 365 */
}

@media (max-width: 1080px) and (min-width: 681px) {
    .zab-trust-cell { padding: 43px 25px; }             /* S11 1316 */
    .zab-step { padding: 20px 10px; }                   /* S09 838 */
    .zmit-recognized-band { padding: 60px 26px; }       /* S10 546 */
    .zmit .zmit-articles.z-section { padding: 25px 0; } /* S13 1036 */
    .zab-acc-q { padding: 26px 22px; }                  /* S07 701 */
    .zab-problems-cols { padding-bottom: 20px; }        /* S03 1142 */
    .zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 1093 */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 714px; } /* S04 978 */
}

@media (max-width: 680px) {
    .zab-trust-cell { padding: 55px 20px; }             /* S11 1689 */
    .zmit-services-grid .zmit-svc-card { padding: 26px; } /* S02 2050 */
    .zmit-recognized-band { padding: 46px 26px; }       /* S10 828 */
    .zmit .zab-steps.z-section { padding: 0 0 20px; }   /* S09 1410 */
    .zmit .zmit-stats.z-section { padding: 40px 0; }    /* S15 677 */
    .zmit .zmit-stories.z-section { padding: 8px 0; }   /* S12 1931 */
    .zmit .zmit-faq.z-section { padding: 67px 0; }      /* S17 1341 */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 524px; } /* S04 1084 */
}

@media (max-width: 1080px) and (min-width: 681px) {
    /* S01 — live's hero headline is 40.98px/49.17px at 768, which wraps to
       FOUR lines (197). At 38/46.36 it fell to three (139) and took 58px —
       most of the hero's 128px shortfall — out of the banner. */
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-hero-grid { padding-bottom: 68px; }   /* S01 1418 */
}

/* Last two bands. The HubSpot meetings widget sizes its own iframe, so S04's
   remaining difference is closed on the band, not on the embed. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-bookcal.z-section { padding: 30px 0 27px; }  /* S04 978 */
    .zmit-hero-grid { padding-bottom: 114px; }               /* S01 1418 */
}
@media (max-width: 680px) {
    .zmit .zmit-bookcal.z-section { padding: 0; }            /* S04 1084 */
    .zmit-hero-grid { padding-bottom: 14px; }                /* S01 1925 */
}

/* ============================================================
   MOBILE OPTIMISATION (owner request 2026-08-26). One consolidated
   <=680 block appended LAST so it wins over the stacked earlier blocks.
   Measured at 375 before: doc 25017, hero 1800 (headline 30px/7 lines,
   sub 290), cmp-acc padB 200, certified pad 124, articles pad 88,
   trust padB 100, marquee chips 180x70, final figure 500px tall.
   ============================================================ */
@media (max-width: 680px) {
    /* Hero type: tighter on phones */
    .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
    .zmit-hero .zmit-hero-sub { font-size: 14px; line-height: 1.55; }
    .zmit-form-card h3 { font-size: 16px; line-height: 1.4; }

    /* Blunt band paddings dialled to content */
    .zmit .zab-cmp-acc.z-section   { padding: 0 0 40px; }
    .zmit .zab-certified.z-section { padding: 48px 0; }
    .zmit .zab-trust.z-section     { padding: 24px 0 40px; }
    .zmit .zmit-articles.z-section { padding: 48px 0; }
    .zmit .zmit-insights.z-section { padding: 40px 0; }

    /* Marquee chips scale down with the viewport */
    .zmit .zmit-trust-band { padding: 12px 0 24px; }
    .zmit .zmit-trust-chip { width: 140px; height: 56px; }
    .zmit .zmit-trust-chip img { max-height: 46px; max-width: 128px; }

    /* Final-CTA figure: natural ratio, phone-sized */
}

/* Mobile content reduction (owner approved 2026-08-26: "reduce or hide some
   content where necessary keeping the essence"). CSS-only hides — the markup,
   its links and SEO text stay in the DOM, so interlinking is unchanged. */
@media (max-width: 680px) {
    /* Service cards: title + first 3 bullets carry the point */
    .zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
    /* Article cards: keep title/meta/link, drop the artwork */
    .zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
    /* Story cards: image + logo + title; excerpt is desktop detail */
    .zmit-stories .zmit-story .body p { display: none; }
    /* Trust panel copy: clamp to 4 lines */
    /* trust copy lives in the cell's h3 */
    .zab-trust-cell h3 {
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* Certified badges: 3-up small instead of 2-up large */
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* Mobile round 2: the trust cells are icon-driven (110px art), not copy-driven */
@media (max-width: 680px) {
    .zmit .zab-trust-ico, .zmit .zab-trust-ico svg, .zmit .zab-trust-ico img {
        width: 64px; height: 64px;
    }
    .zmit .zab-trust-cell { padding: 20px 16px; }
    .zmit .zab-steps-card { padding: 20px 16px; }
}

/* Mobile polish from the screenshot pass (2026-08-26) */
@media (max-width: 680px) {
    /* Review logos: one even row of three, not a 2+1 wrap */
    .zmit .zmit-recognized-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
    .zmit .zmit-recognized-logos img { max-width: 96px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
    /* Articles read as a list once artwork is hidden - give items a hairline */
    .zmit .zmit-articles-grid .zmit-article { border-bottom: 1px solid rgba(6, 0, 28, .1); padding-bottom: 18px; }
    .zmit .zmit-articles-grid .zmit-article:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   SERVICE CARDS - matched to live, measured in the browser on
   /managed-it-services-charlotte at 1440 (not inferred from CSS).

   Live's card:  .uc_post_grid_style_one_item is TRANSPARENT with a
                 1px solid #eff0f7 border and 10px radius; the fill comes from
                 an inner .uc_content.padding (background #eff0f7, padding 30px).
                 Reproduced here as one filled box plus the same 1px border, so
                 the rendered box metrics match.

   Live's bullets are the browser's NATIVE disc marker:
                 ul  padding-left 20px, list-style disc
                 li  padding-left 0
                 ::marker  rgb(173,173,236) at 14px
   The SHARED sheet (not ours to edit) instead draws a custom ::before "•" in
   rgb(110,113,200) at 15px with li padding-left 18px - a darker, larger bullet.
   These rules override it; the page sheet loads after the shared one and the
   selectors are more specific.

   Live's "Explore ..." link sits 10px below the list (margin-top: 10px).

   HOVER - MEASURED by hovering live with a real pointer at 1440. Seraphinite
   injects these rules at runtime, so they appear in NONE of live's stylesheets
   and the CSSOM does not hold them; a synthetic mouseover event does not fire
   CSS :hover either. Both methods give a false "live has no hover" reading.
   Actual, on cards that HAVE a link:
       fill      #eff0f7 -> #d5e0f3
       CTA row   display:none (height 0) -> display:block (34px)
       border    unchanged (#eff0f7 on this template)
       NO lift, NO shadow, transition .3s
   So live HIDES the "Explore ..." CTA until hover - a resting screenshot makes
   it look as though live has no CTA at all. Cards without a link get no hover
   change. Do NOT add a lift or shadow.
   --------------------------------------------------------------------------- */
.zmit-services-grid .zmit-svc-card { border: 1px solid #eff0f7; }
.zmit-services-grid .zmit-svc-card ul { padding-left: 20px; list-style: disc; }
.zmit-services-grid .zmit-svc-card li { padding-left: 0; }
.zmit-services-grid .zmit-svc-card li::before { content: none; }
.zmit-services-grid .zmit-svc-card li::marker { color: #adadec; font-size: 14px; }
.zmit-services-grid .zmit-svc-card { transition: background-color .3s; }
/* The CTA is hidden at rest and revealed on hover, but it KEEPS ITS SPACE.
   Live's card measures the same height at rest and hovered (338x374 on
   charlotte at 1440), so the card must not grow when the CTA appears.
   display:none removes it from flow and grew the card 383 -> 403, which made
   the whole tile shift on hover - visibility keeps the box and only paints it. */
.zmit-services-grid .zmit-svc-card .zab-svc-cta,
.zmit-services-grid .zmit-svc-card .zab-svc-more,
.zmit-services-grid .zmit-svc-card .zmit-svc-more { visibility: hidden; margin-top: auto; padding-top: 10px; }
/* Revealed on hover, and on focus-within so the CTA stays keyboard-reachable.
   Live omits the focus case; either way the destination is reachable via the
   .z-explore overlay anchor, which carries the card title as its label. */
.zmit-services-grid .zmit-svc-card:hover .zab-svc-cta,
.zmit-services-grid .zmit-svc-card:hover .zab-svc-more,
.zmit-services-grid .zmit-svc-card:hover .zmit-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zab-svc-cta,
.zmit-services-grid .zmit-svc-card:focus-within .zab-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zmit-svc-more { visibility: visible; }
/* Hover: live lifts the card AND turns the border blue. Read straight out of
   live's page CSS in the raw HTML (not runtime-injected):
     .hasLink:hover { transform: translate(-10px,-10px); border: 1px solid #0161ff }
   An earlier reference comment claimed "no lift, no border change, measured
   three times" - that reading probed .uc_content (the INNER node) instead of
   the outer .uc_post_grid_style_one_item where .hasLink and the transform sit,
   so it saw an identity matrix and an unchanged border. CLAUDE.md's hover table
   agrees: city template lifts, industry template does not. */
.zmit-services-grid .zmit-svc-card { border: 1px solid #eff0f7; transition: all .3s ease; }
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within,
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within {
    background: #d5e0f3; border-color: #0161ff; transform: translate(-10px, -10px);
}

/* ------------------------------------------------------------
   375 RECOGNITION BAND. The shared sheet pins .zmit-recognized-cta .z-btn to
   white-space: nowrap; its ~395px min-content then blows the band's 1fr track
   inside a 315px container. body{overflow-x:hidden} HIDES this from
   scrollWidth, so an hScroll assertion passes while the band is visibly
   broken — measure element widths, not scrollWidth.
   ------------------------------------------------------------ */
@media (max-width: 680px) {
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
}

/* A 10px hover translate is exactly what this guard exists for; the
   accessibility bar outranks copying live's omission. Scoped to the card
   hover only - the hero scroll cue has its own guard higher up. */
@media (prefers-reduced-motion: reduce) {
    .zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
    .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within,
    .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit-services-grid .zmit-svc-card.has-link:focus-within { transform: none; }
}

/* Live's review-logo row is FLUSH (column-gap 0) and fits 574px of logos in a
   613px track at 768. The inherited 36px column gap needs 646px in a 641px
   track, so the row wraps and the band inflates ~106px. Measured on live. */
@media (max-width: 768px) {
    .zmit .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; justify-content: center; }
}

/* 375: live keeps the review marks at FULL size and wraps them to three rows.
   The inherited mobile caps (max-width:96px/max-height:26px) squashed them into
   one 26px row; max-height overrides height, so both caps must be released.
   Live's band is 335 wide at 375 vs our 315; NOT matched - CLAUDE.md forbids
   zeroing a .z-container gutter, and width is where the house standard wins. */
@media (max-width: 680px) {
    .zmit .zmit-recognized-logos img {
        max-width: none; max-height: none; width: auto; height: 70px; object-fit: contain;
    }
    .zmit .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; justify-content: center; }
}

/* Video-quote mark, desktop pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. Mark only - the
   quote text, author line and spacing are untouched. */
@media (min-width: 1080.02px) {
    .zmit .zab-band-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -45px;
    }
}

/* Video-quote mark, tablet pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. Mark only - the
   quote text, author line and spacing are untouched. */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-band-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -45px;
    }
}

/* Video-quote mark, mobile pass (2026-10-01) - see CLAUDE.md "Video quote mark".
   Matches the -wp reference (it-support-for-nonprofit-organizations-wp
   .elementor-blockquote::before): U+201C, 900 70px/70px Times New Roman, #0161ff,
   35x42 box, 45px left of the quote text and 20px above it. Mark only - the
   quote text, author line and spacing are untouched. */
@media (max-width: 680.98px) {
    .zmit .zab-band-quote::before {
        content: "\201C"; position: absolute; top: -20px; display: flex; width: 35px; height: 42px;
        font: 900 70px/70px "Times New Roman", Times, serif; color: #0161ff;
        left: -45px;
    }
}
/* ============================================================================
   2026-10-13 - matched to the -wp reference (/managed-it-services-san-antonio-wp)
   at desktop, tablet and phone. Every value measured on that page at 1440,
   1024, 768 and 390. Kept on purpose: the owner hero headline sizes 42 / 40.98 / 24 (owner,
   2026-08-26), the shared comparison accordion, the trust-panel body at 400
   (owner), the upright 600 video quote (owner), left-aligned stat numbers,
   57px tablet stat numbers, the house content width and form column.
   ============================================================================ */

/* services band white; only the cards carry a fill (every width). Eyebrow
   16.31/700 #14142b, heading 34.7/400/43 in a 716px column, card titles
   18/23.4, bullets 14/23.1 */
.zmit .zmit-services.z-section { background: #fff; }
.zmit .zmit-services-head .z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: #14142b; }
.zmit .zmit-services-head h3 { font-size: 34.7px; font-weight: 400; line-height: 43px; max-width: 716px; }
.zmit .zmit-services-grid .zmit-svc-card h4 { font-size: 18px; line-height: 23.4px; }
.zmit .zmit-services-grid .zmit-svc-card li { font-size: 14px; line-height: 23.1px; margin-bottom: 0; }

/* in-copy links: #046bd2 on light bands, the house FAQ look in the dark FAQ */
.zmit .zab-step p a { color: #046bd2; }
.zmit .zmit-faq-a-inner a,
.zmit .zmit-faq-a-inner a:hover,
.zmit .zmit-faq-a-inner a:focus,
.zmit .zmit-faq-a-inner a:visited { color: #85bcff; font-weight: 500; text-decoration: none; }

/* problems: live's #000 copy */
.zmit .zab-problems .zab-tick-text { color: #000; }

/* video band: the CTA label sits centred in the full-width button */
.zmit .zab-band-btn { justify-content: center; }

/* three-step path: "Get Started" 15.38px as live */
.zmit .zab-steps-cta .zab-btn { font-size: 15.38px; }

/* trust panel ("The Standards Behind ..."): heading 34.7/400/43 at every
   width; each title 20 above its copy, copy 15/28 (body stays 400, owner) */
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { line-height: 19.5px; margin: 0 0 20px; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-size: 15px; line-height: 28px; }

/* articles: date 500 #0161ff, titles 24/28.8 #141414 (every width) */
.zmit .zmit-article .date { font-weight: 500; color: #0161ff; }
.zmit .zmit-article h3 { font-size: 24px; line-height: 28.8px; color: #141414; }

/* success stories heading line as live */
.zmit .zmit-stories h2 { line-height: 37.7px; color: #141414; }

/* testimonial card and its gradient as live (radius 5); the card keeps the
   tallest quote's height, so it never jumps between slides */
.zmit .zmit-testi-card { background-color: transparent; background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); border-radius: 5px; display: grid; }
.zmit .zmit-testi-card > .zmit-testi-slide { display: block; grid-area: 1 / 1; visibility: hidden; }
.zmit .zmit-testi-card > .zmit-testi-slide.is-active { visibility: visible; }
.zmit .zmit-testi-role { font-weight: 600; }

/* FAQ colours as live */
.zmit .zmit-faq-q span:first-child { color: #fcfcfc; }
.zmit .zmit-faq-a-inner p { color: #d9dbe9; }

/* light buttons and the hero CTA: live's #f2f7ff fill */
.zmit .zmit-hero-cta-btn,
.zmit .zmit-recognized-cta .z-btn,
.zmit .zmit-stats-copy .z-btn:not(:hover) { background-color: #f2f7ff; }
.zmit .zmit-hero-cta-btn { font-weight: 500; }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1081px) {
    /* compliance band heading in live's 850px column, 56px lines */
    .zmit .zab-certified h2 { max-width: 850px; margin-left: auto; margin-right: auto; line-height: 56px; }
    /* testimonials: 80px card; name 22/600/28.6, role line 34/600/47.6 */
    .zmit .zmit-testi-card { min-height: 0; padding: 80px; }
    .zmit .zmit-testi-role { font-size: 22px; line-height: 28.6px; margin: 0; }
    .zmit .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; margin: 0 0 10px; }
    .zmit .zmit-testi-quote { margin: 0; }
    /* FAQ answers 16/25.6 */
    .zmit .zmit-faq-a-inner p { font-size: 16px; line-height: 25.6px; }
}

/* ----------------------------------------------------------------- tablet */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    /* section headings scale with the viewport as on live (768 -> 1024):
       26.87 -> 31.30 */
    .zmit .zab-adv h2,
    .zmit .zmit-stats-copy h3,
    .zmit .zmit-testi h2,
    .zmit .zmit-faq h2 { font-size: calc(13.59px + 1.7291vw); line-height: 1.3; }
    /* book-a-consultation 22.8 -> 30 */
    .zmit .zmit-bookcal h2 { font-size: calc(1.2px + 2.8125vw); line-height: 1.3; }
    /* comparison heading 33.56 -> 36.8, set solid */
    .zmit .zab-cmp-head h2 { font-size: calc(23.84px + 1.2656vw); line-height: 1; }
    /* compliance band heading 31 -> 36 on 56px lines, copy 14/23.1 */
    .zmit .zab-certified h2 { font-size: calc(16px + 1.953vw); line-height: 56px; }
    .zmit .zab-certified > .z-container > p { font-size: 14px; line-height: 23.1px; }

    /* problems copy 17px */
    .zmit .zab-problems .zab-tick-text { font-size: 17px; }

    /* video band heading 30/39 (25/32.5 once it sits beside the video) */
    .zmit .zab-band-copy h2 { font-size: 30px; line-height: 39px; }

    /* recognized: heading 30/42, copy full width, logos one row at 70 */
    .zmit .zmit-recognized-copy h2 { font-size: 30px; line-height: 42px; }
    .zmit .zmit-recognized-copy h2,
    .zmit .zmit-recognized-copy p { max-width: none; }
    .zmit .zmit-recognized-logos { display: flex; align-items: center; column-gap: 30px; }
    .zmit .zmit-recognized-logos img { height: 70px; width: auto; max-width: none; max-height: none; object-fit: contain; }

    /* stats: heading 400, CTA 16/500 */
    .zmit .zmit-stats-copy h3 { font-weight: 400; }

    /* testimonials: 30px card; name 22/600/28.6, role line scales, quote 18/29.7 */
    .zmit .zmit-testi-card { min-height: 0; padding: 30px; }
    .zmit .zmit-testi-role { font-size: 22px; line-height: 28.6px; margin: 0; }
    .zmit .zmit-testi-rule { width: 24px; height: 2px; margin: 5px 0 10px; }
    .zmit .zmit-testi-lead { font-size: calc(13.59px + 1.7291vw); font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
    .zmit .zmit-testi-quote { font-size: 18px; line-height: 29.7px; margin: 0; }

    /* FAQ rows: 16/24 questions, 25px top and bottom (the 22px sides stay) */
    .zmit .zmit-faq-q { padding: 25px 22px; font-size: 16px; line-height: 24px; }
    .zmit .zmit-faq-q span:first-child { font-size: 16px; line-height: 24px; }

    /* hero form title 18 */
    .zmit .zmit-form-card h3 { font-size: 18px; line-height: 1.3; }

    /* pre-footer: logo 144 beside its 16/16 title and rule, copy below, the
       214px buttons on the right - live's tablet layout, 80 above and below */
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit .zmit-insights-grid { grid-template-columns: minmax(0, 392px) 214px; justify-content: space-between; column-gap: 20px; align-items: start; }
    .zmit .zmit-insights-copy { display: grid; grid-template-columns: 144px minmax(0, 1fr); column-gap: 22px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { width: 144px; height: auto; max-width: 144px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; padding-left: 10px; border-left: 2px solid #fff; margin: 0; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-column: 1 / -1; font-size: 14px; line-height: 19.6px; color: #fff; margin: 0; }
    .zmit .zmit-insights-btns { display: flex; flex-direction: column; gap: 20px; }
    .zmit .zmit-insights-btns a { width: 214px; }
}
/* video band from 922: heading 25/32.5 (live keeps it stacked, a smaller step) */
@media (min-width: 921.98px) and (max-width: 1080.98px) {
    .zmit .zab-band-copy h2 { font-size: 25px; line-height: 32.5px; }
}
/* problems: the two columns share rows on live, so item N on the left lines
   up with item N on the right (tablet and desktop; 8 items, 4 rows) */
@media (min-width: 680.02px) {
    .zmit .zab-problems-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
    .zmit .zab-problems-cols > .zab-problems-list { display: contents; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 680.98px) {
    .zmit .zmit-form-card h3 { font-size: 18px; line-height: 1.3; }

    .zmit .zab-problems-head { font-size: 26px; line-height: 33.8px; }
    .zmit .zab-problems-answer { font-size: 20px; line-height: 34px; }
    .zmit .zab-band-copy h2 { font-size: 26px; line-height: 33.8px; }
    .zmit .zab-band-quote p { font-size: 16px; line-height: 20.8px; }
    .zmit .zmit-bookcal h2 { font-size: 22.8px; line-height: 29.64px; }
    .zmit .zab-cmp-head h2 { font-size: 22px; line-height: 26.4px; }
    .zmit .zab-certified h2 { font-size: 31px; line-height: 56px; }
    .zmit .zab-certified > .z-container > p { font-size: 14px; line-height: 23.1px; }
    .zmit .zab-step h3 { font-size: 17px; line-height: 20.4px; }

    /* recognized: a full-bleed dark band (no frame, no radius), heading 30/42 */
    .zmit .zmit-recognized.z-section { margin: 0; padding: 0; }
    .zmit .zmit-recognized-band { margin: 0 -30px; border-radius: 0; padding: 30px; gap: 40px; }
    .zmit .zmit-recognized-copy h2 { font-size: 30px; line-height: 42px; margin-bottom: 20px; }
    .zmit .zmit-recognized-copy p { margin-bottom: 20px; max-width: none; }

    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { font-size: 15px; }
    .zmit .zmit-articles-head h2 { font-size: 38px; line-height: 38px; }
    .zmit .zab-adv h2,
    .zmit .zmit-stats-copy h3,
    .zmit .zmit-testi h2,
    .zmit .zmit-faq h2 { font-size: 23.07px; line-height: 30px; }
    .zmit .zmit-stats-copy h3 { font-weight: 400; }

    /* testimonials: 20px card; name 18/23.4, role line 20/28, quote 14/23.1 */
    .zmit .zmit-testi-card { min-height: 0; padding: 20px; }
    .zmit .zmit-testi-role { font-size: 18px; line-height: 23.4px; margin: 0; }
    .zmit .zmit-testi-rule { width: 24px; height: 2px; margin: 5px 0 10px; }
    .zmit .zmit-testi-lead { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 10px; }
    .zmit .zmit-testi-quote { font-size: 14px; line-height: 23.1px; margin: 0; }

    /* FAQ: 14px questions and answers, 25px top and bottom (22px sides stay) */
    .zmit .zmit-faq-q { padding: 25px 22px; font-size: 14px; line-height: 21px; }
    .zmit .zmit-faq-q span:first-child { font-size: 14px; line-height: 21px; }
    .zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 21px; }

    .zmit .zmit-contact-head p { font-size: 14px; line-height: 23.1px; }
}

/* phone, as the reference at 390: compliance badges two per row at their
   natural size (16 apart); success-story cards keep their excerpt; trust
   panel icons at their full 100px with live's 40px cell padding and the
   panel 60 under its heading */
@media (max-width: 680.98px) {
    .zmit .zab-certified .zab-certified-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .zmit .zmit-stories .zmit-story .body p { display: block; }
    .zmit .zab-trust-ico, .zmit .zab-trust-ico svg, .zmit .zab-trust-ico img { width: 100px; height: 100px; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell { padding: 40px 30px; }
    .zmit .zab-trust-eyebrow { margin-bottom: 60px; }
}

/* rhythm re-measured against the reference, heading to heading:
   - services cards 16 apart on desktop (live), so the titles wrap as live's do
   - the trust panel's heading sits 325 under the recognized heading on
     desktop (was 444), and directly under the recognized band on tablet and
     phone (was 160 / 24 of extra white) */
@media (min-width: 1081px) {
    .zmit .zmit-services-grid { gap: 16px; }
    .zmit .zab-trust.z-section { padding-top: 41px; }
}
@media (max-width: 1080.98px) {
    .zmit .zab-trust.z-section { padding-top: 0; }
}

/* phone service cards as the reference at 390: title 31 into the card, list
   20 under it, 45 under the last bullet (the hidden CTA row included), cards
   30 apart */
@media (max-width: 680.98px) {
    .zmit .zmit-services-grid { gap: 30px; }
    .zmit .zmit-services-grid .zmit-svc-card { padding: 31px 30px 11px; }
    .zmit .zmit-services-grid .zmit-svc-card h4 { padding-top: 0; margin: 0 0 20px; }
}
/* desktop: the trust heading 325 under the recognized heading */
@media (min-width: 1081px) {
    .zmit .zab-trust.z-section { padding-top: 0; }
}
/* wide tablet (881-1080): live shows the FAQ in one column */
@media (min-width: 880.02px) and (max-width: 1080.98px) {
    .zmit .zmit-faq .zmit-faq-list { column-count: 1; }
    .zmit .zmit-faq .zmit-faq-list > .zmit-faq-item { break-after: auto; }
}

/* video band below desktop, as live: heading 50 under the video, button and
   quote 40 apart; the video fills its box (no letterbox bar over the poster) */
@media (max-width: 1080.98px) {
    .zmit .zab-band-inner { gap: 50px; }
    .zmit .zab-band-copy { gap: 40px; }
}
.zmit .zab-band-video { object-fit: cover; }

/* trust panel below desktop, measured cell by cell at 768 and 390: icon 32
   into the cell, title 27 under the 100px icon, copy ends 33 above the cell
   edge, 25 at the sides; the panel 53 under its heading */
@media (max-width: 1080.98px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell { padding: 32px 25px; }
    .zmit .zab-trust:not(.v-split) .zab-trust-ico { margin-bottom: 27px; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { margin-bottom: 0; }
    .zmit .zab-trust-eyebrow { margin-bottom: 53px; }
}
/* phone service cards: 22px sides so the bullets break where live's do */
@media (max-width: 680.98px) {
    .zmit .zmit-services-grid .zmit-svc-card { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 680.98px) {
    /* phone: the heading sits 24 under the video, as live */
    .zmit .zab-band-inner { gap: 24px; }
}

/* testimonial card ends one quote line below the longest quote on tablet
   (live's card 310 at 768) and 16 below on desktop */
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-testi-quote { margin-bottom: 29.7px; } }
@media (min-width: 1081px) { .zmit .zmit-testi-quote { margin-bottom: 16px; } }

/* service cards (every width), measured on the reference card: title 31 into
   the card, list 20 under it, 45 under the last bullet including the hidden
   "Explore" row. The title's old 20px top padding pushed every card ~30 taller. */
@media (min-width: 680.02px) {
    .zmit .zmit-services-grid .zmit-svc-card { padding: 31px 30px 11px; }
    .zmit .zmit-services-grid .zmit-svc-card h4 { padding-top: 0; margin: 0 0 20px; }
}
/* trust panel: live leaves 48 of white under it on tablet */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-trust.z-section { padding-bottom: 48px; }
}

/* recognized band on tablet: live's flat 40px inside the dark panel (was
   60 / 26). Padding only - the shared stacking and button rules stay. */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-recognized-band { padding: 40px; }
}

/* ============================================================================
   2026-10-13 - San Antonio values (carried from Oakland, re-measured on /managed-it-services-
   san-antonio-wp; the block above is the city fix set carried from Detroit)
   ============================================================================ */

/* comparison table (desktop): the Zazz column is #eff0f7 on the reference
   now (rows 2 and 4 stay #f9fcff); cell copy sits at the top of the cell,
   20 in, not centred; the table starts 20 under the heading */
.zmit .zab-cmp-col-1 { background: #eff0f7; }
.zmit .zab-cmp-cell { align-items: flex-start; }
@media (min-width: 1081px) {
    .zmit .zab-cmp-head.z-section { padding-bottom: 10px; }
    .zmit .zab-cmp.z-section { padding-top: 10px; }
    /* band rhythm, heading to heading as the reference */
    .zmit .zab-certified.z-section { padding: 40px 0; }
    .zmit .zab-steps.z-section { padding: 30px 0; }
    .zmit .zab-trust.z-section { padding-top: 39px; }
    .zmit .zmit-articles.z-section { padding-bottom: 66px; }
    .zmit .zmit-stats.z-section { padding: 40px 0; }
}

/* pre-footer, the reference's widget (same as every -wp page): desktop logo
   200 wide, a 2px white rule 20 to its right, title 28/28 22 past the rule,
   copy 20/28 white 20 below, the 280x58 buttons on the right; 1024: logo
   173, title 20/20, copy 14/19.6, buttons 220; 768: logo 147, title 16/16;
   phones: logo 230, the ruled title under it, copy, then the two buttons full
   width */
.zmit .zmit-insights.z-section { padding: 80px 0; }
.zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; justify-content: initial; }
.zmit .zmit-insights-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 20px; align-items: center; }
.zmit .zmit-insights .zmit-insights-logo { width: 200px; height: auto; max-width: none; }
.zmit .zmit-insights-copy p.zmit-insights-title { font-size: 28px; line-height: 28px; max-width: 528px; margin: 0; padding-left: 22px; border-left: 2px solid #fff; color: #fff; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-column: 1 / -1; font-size: 20px; line-height: 28px; color: #fff; max-width: 745px; margin: 0; }
.zmit .zmit-insights-btns { display: flex; flex-direction: column; gap: 20px; }
.zmit .zmit-insights-btns a { width: 100%; min-height: 58px; font-size: 16px; font-weight: 500; border-radius: 5px; }
.zmit .zmit-insights-btns a:not(:first-child) { border-color: #fff; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 220px; }
    .zmit .zmit-insights .zmit-insights-logo { width: 173px; max-width: none; }
    .zmit .zmit-insights-copy { grid-template-columns: auto minmax(0, 1fr); }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 20px; line-height: 20px; max-width: 326px; padding-left: 22px; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14px; line-height: 19.6px; max-width: 521px; }
    .zmit .zmit-insights-btns a { width: 100%; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
    .zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr) 218px; }
    .zmit .zmit-insights .zmit-insights-logo { width: 147px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 16px; max-width: 234px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit .zmit-insights-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .zmit .zmit-insights-copy { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .zmit .zmit-insights .zmit-insights-logo { width: 230px; height: auto; }
    .zmit .zmit-insights-copy p.zmit-insights-title { grid-column: 1; grid-row: 2; font-size: 16px; line-height: 16px; max-width: none; padding-left: 12px; border-left: 2px solid #fff; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { grid-row: 3; font-size: 14px; line-height: 19.6px; }
    .zmit .zmit-insights-btns { flex-direction: column; }
    .zmit .zmit-insights-btns a { flex: none; width: 100%; }
}

/* pre-footer, this page's sizes: the logo 287 / 248 / 203 / 230 wide by
   width; the white rule runs the logo's full height with the title at its
   top, 20 past the rule (10 at 768, 12 on phones); copy 20 under the logo */
.zmit .zmit-insights .zmit-insights-logo { width: 287px; }
.zmit .zmit-insights-copy { align-items: stretch; }
.zmit .zmit-insights-copy p.zmit-insights-title { align-self: stretch; padding-left: 20px; max-width: none; }
.zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 770px; }
.zmit .zmit-insights-btns a span { margin-left: 6px; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-insights .zmit-insights-logo { width: 248px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 20px; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 541px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
    .zmit .zmit-insights .zmit-insights-logo { width: 203px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 10px; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { max-width: 400px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-insights .zmit-insights-logo { width: 230px; }
    .zmit .zmit-insights-copy p.zmit-insights-title { padding-left: 12px; }
}

/* services lead (an h2 here): 34.7/400/43 at every width in live's 624px
   column; 10 into the band below desktop */
.zmit .zmit-services-head .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; letter-spacing: normal; max-width: 624px; }
@media (max-width: 1080.98px) { .zmit .zmit-services.z-section { padding-top: 10px; } }
/* recognized CTA 16/500 as the reference */
.zmit .zmit-recognized-cta .z-btn { font-size: 16px; font-weight: 500; }

/* compliance band: badges 16 apart at their natural aspect at every width
   (the reference; the tiles were touching); heading on one line on desktop
   (no 850px column on this page); the copy link light blue as live */
.zmit .zab-certified .zab-certified-badges { gap: 16px; }
.zmit .zab-certified .zab-certified-badges img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.zmit .zab-certified p a { color: #85bcff; }
@media (min-width: 1081px) { .zmit .zab-certified h2 { max-width: none; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zab-certified.z-section { padding-top: 30px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified.z-section { padding-top: 50px; } }
/* badges sit where the reference's do under the copy */
.zmit .zab-certified .zab-certified-badges { margin-top: 74px; }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 68px; } }
@media (max-width: 680.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 68px; } }

/* three-step path, measured on the reference: desktop columns 361 wide, 60
   apart, centred; tablet columns 20 apart (886 wide at 1024, 655 at 768)
   with 90px icon circles; phones 77px circles and a 13px button; the art
   and circles sit ~24 lower under the lead; titles carry side padding so
   they wrap where live's do */
.zmit .zab-steps-art { margin-top: 24px; }
@media (min-width: 1081px) {
    .zmit .zab-steps-grid { max-width: 1203px; margin-left: auto; margin-right: auto; column-gap: 60px; }
    .zmit .zab-step { padding: 20px 0; }
    .zmit .zab-step h3 { padding: 0 38px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-steps-art { margin-top: 22px; }
    .zmit .zab-steps-grid { max-width: 886px; margin-left: auto; margin-right: auto; column-gap: 20px; }
    .zmit .zab-step-ico { width: 90px; height: 90px; }
    .zmit .zab-step-ico svg { width: 40px; height: 40px; }
    .zmit .zab-step h3 { padding: 0 22px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) {
    .zmit .zab-steps-grid { max-width: 655px; }
    .zmit .zab-step h3 { padding: 0 6px; }
}
@media (max-width: 680.98px) {
    .zmit .zab-steps-art { margin-top: 28px; }
    .zmit .zab-step-ico { width: 77px; height: 77px; }
    .zmit .zab-step-ico svg { width: 37px; height: 37px; }
    .zmit .zab-step h3 { padding: 0 40px; }
    .zmit .zab-steps-cta .zab-btn { font-size: 13px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-steps-art { margin-top: 42px; }
    .zmit .zab-step { padding: 20px 0; }
}
@media (max-width: 680.98px) { .zmit .zab-steps-art { margin-top: 68px; } }

/* FAQ, as the reference: question rows 25 in on every side, radius 5;
   answers 16/26.4 (14/23.1 on phones); bold blue plus / minus signs; on
   phones rows 7 apart and 20 of band above and below; at 1024 the first
   row starts 9 under the heading */
.zmit .zmit-faq-item { border-radius: 5px; }
.zmit .zmit-faq-q { padding-left: 25px; padding-right: 25px; }
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { font-size: 16px; line-height: 26.4px; }
.zmit .zmit-faq-q .sign { position: relative; width: 16px; height: 16px; font-size: 0; }
.zmit .zmit-faq-q .sign::before,
.zmit .zmit-faq-q .sign::after { content: ""; position: absolute; background: #0664ff; border-radius: 1px; }
.zmit .zmit-faq-q .sign::before { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.zmit .zmit-faq-q .sign::after { top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; }
.zmit .zmit-faq-item.open .zmit-faq-q .sign::before { content: ""; }
.zmit .zmit-faq-item.open .zmit-faq-q .sign::after { display: none; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-faq.z-section { padding: 30px 0; }
}
@media (min-width: 880.02px) and (max-width: 1080.98px) {
    .zmit .zmit-faq h2 { margin-bottom: 9px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-faq.z-section { padding: 20px 0; }
    .zmit .zmit-faq-item { margin-bottom: 7px; }
    .zmit .zmit-faq-a-inner,
    .zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 23.1px; }
}
/* FAQ answers: 16/25.6 on desktop, 14/22.4 on tablet (the reference's) */
.zmit .zmit-faq-a-inner,
.zmit .zmit-faq-a-inner p { line-height: 25.6px; }
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-faq-a-inner,
    .zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 22.4px; }
}
/* the open answer: 20 in at the sides, 30 under it (24 on phones) */
.zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 20px 30px; }
@media (max-width: 680.98px) { .zmit .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; } }

/* final CTA. Desktop: 426 tall, copy column 590. Phones, as the reference
   at 390: 30 / 20 inside, copy 14/25.2, a 13px full-width button, and the
   photo across the full band width, 500 tall, 8 under the button, flush
   with the band's foot (the older 260px cap is replaced) */
@media (min-width: 1081px) {
    .zmit .zmit-final-banner { min-height: 426px; }
    .zmit .zmit-final-copy h2,
    .zmit .zmit-final-copy p { max-width: 590px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-final-banner { padding: 30px 20px 0; }
    .zmit .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; }
    .zmit .zmit-final-copy .zab-btn,
    .zmit .zmit-final-copy .z-btn { font-size: 13px; width: 100%; justify-content: center; }
    .zmit .zmit-final-media img,
    .zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: 500px; max-height: none; object-fit: cover; object-position: center top; margin: 8px -20px 0; }
}

/* band paddings below desktop, measured section by section against the
   reference at 1024 / 768 and 390 */
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-services.z-section { padding-bottom: 0; }
    .zmit .zmit-recognized.z-section { padding-bottom: 0; }
    .zmit .zab-trust.z-section { padding-top: 30px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-services.z-section { padding-bottom: 0; }
    .zmit .zab-problems.z-section { padding: 30px 0; }
    .zmit .zmit-bookcal.z-section { padding-top: 30px; }
    .zmit .zab-steps.z-section { padding: 20px 0 30px; }
    .zmit .zmit-articles.z-section { padding: 20px 0 56px; }
    .zmit .zab-adv.z-section { padding: 0 0 30px; }
    .zmit .zmit-final.z-section { margin: 50px 0; }
    .zmit .zmit-contact.z-section { padding: 50px 0; }
    /* stats: 48px figures, the button on one line */
    .zmit .zmit-stats .zmit-stat .big,
    .zmit .zmit-stats .zmit-stat .big > span { font-size: 48px; line-height: 48px; }
    .zmit .zmit-stats-copy .zab-btn { white-space: nowrap; padding-left: 20px; padding-right: 20px; }
    /* recognized: the 13px button on one line, as the reference */
    .zmit .zmit-recognized .zmit-recognized-band .zmit-recognized-cta .z-btn { font-size: 13px; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }
}

/* success-story cards as the reference (same card on every city page):
   radius 5, 20 under the heading, text 25 in (the card's 14px template inset
   plus 11), logo 20 under the photo, title 18/25.2, excerpt 14/23.1
   indented 5, 40 at the foot, 250px photos */
.zmit .zmit-stories h2 { margin-bottom: 20px; }
.zmit .zmit-stories-grid > .zmit-story { border-radius: 5px; }
.zmit .zmit-stories-grid > .zmit-story .zmit-story-img img { height: 250px; }
.zmit .zmit-story .body { padding: 28px 11px 40px; }
.zmit .zmit-story .body .zmit-story-logos { height: 50px; min-height: 50px; margin: 0 0 12px; }
.zmit .zmit-story .body h3 { font-size: 18px; line-height: 25.2px; margin: 0 0 20px; }
.zmit .zmit-story .body p { font-size: 14px; line-height: 23.1px; padding-left: 5px; margin: 0; }
@media (max-width: 680.98px) { .zmit .zmit-story .body { padding-left: 6px; padding-right: 6px; } }

/* hero breadcrumb as the reference: "Home" white, the page label at 76% */
.zmit .zmit-hero-crumb a { color: #fff; }
.zmit .zmit-hero-crumb span:last-child { color: rgba(255, 255, 255, .76); }

/* comparison table as the reference renders it now: column heads 24/32/600
   #14142b, cells 16/28/500 #06001c; the table 35 under its heading */
.zmit .zab-cmp-col-head { font-size: 24px; font-weight: 600; line-height: 32px; color: #14142b; }
.zmit .zab-cmp-cell { font-size: 16px; font-weight: 500; line-height: 28px; color: #06001c; }
@media (min-width: 1081px) { .zmit .zab-cmp-head.z-section { padding-bottom: 25px; } }

/* services, this page's reference: the lead heading on one full-width line;
   cards 30 apart on desktop; title 30 into the card at every width (no extra
   side padding on the title), bullets 50 in */
.zmit .zmit-services-head .zab-svc-lead { max-width: none; }
.zmit .zmit-services-grid .zmit-svc-card h4 { padding-left: 0; padding-right: 0; }
@media (min-width: 1081px) { .zmit .zmit-services-grid { gap: 30px; } }
@media (max-width: 680.98px) { .zmit .zmit-services-grid .zmit-svc-card { padding-left: 30px; padding-right: 30px; } }

/* San Antonio, measured on the reference: compliance band 65/70 on
   desktop, 30 / 50 / 50 below; badges 28 under the copy on desktop,
   25 on tablet, 24 on phones; comparison heading 15 above the table,
   the table 20 below it */
@media (min-width: 1081px) {
    .zmit .zab-certified.z-section { padding: 65px 0 70px; }
    .zmit .zab-cmp-head.z-section { padding-bottom: 15px; }
    .zmit .zab-cmp.z-section { padding-top: 20px; }
}
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zab-certified.z-section { padding-bottom: 30px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-certified.z-section { padding-bottom: 50px; } }
@media (max-width: 680.98px) { .zmit .zab-certified.z-section { padding: 50px 0; } }
.zmit .zab-certified .zab-certified-badges { margin-top: 28px; }
@media (max-width: 1080.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 25px; } }
@media (max-width: 680.98px) { .zmit .zab-certified .zab-certified-badges { margin-top: 24px; } }
/* steps, San Antonio reference: titles #141414 and wrapping in the full
   column (no side padding); desktop icons 9 lower and the button 81 under
   the copy; tablet button 61 under the copy; phones band 70 top and
   bottom, icon 25 above the title, cards 12 apart */
.zmit .zab-step h3 { color: #141414; }
@media (min-width: 1081px) {
    .zmit .zab-step h3 { padding: 0; }
    .zmit .zab-steps-art { margin-top: 33px; }
    .zmit .zab-steps-grid { padding-bottom: 60px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-step h3 { padding: 0; }
    .zmit .zab-steps-grid { padding-bottom: 40px; }
}
@media (max-width: 680.98px) {
    .zmit .zab-steps.z-section { padding: 70px 0; }
    .zmit .zab-step h3 { padding: 0; }
    .zmit .zab-step-ico { margin-bottom: 25px; }
    .zmit .zab-steps-grid { row-gap: 12px; padding-bottom: 36px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zab-steps-grid { padding-bottom: 61px; } }
/* services, San Antonio reference: cards 30 in on top, radius 8 below
   desktop; the next band's heading 67 / 60 / 50 under the last card */
.zmit .zmit-services-grid .zmit-svc-card { padding-top: 30px; }
@media (max-width: 1080.98px) { .zmit .zmit-services-grid .zmit-svc-card { border-radius: 8px; } }
@media (min-width: 1081px) { .zmit .zmit-services.z-section { padding-bottom: 37px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-services.z-section { padding-bottom: 30px; } }
@media (max-width: 680.98px) { .zmit .zmit-services.z-section { padding-bottom: 20px; } }

/* problems, San Antonio reference: list 50 under the heading (38 on
   phones); the two columns run independently (no shared rows); items 21
   apart on tablet at 17/25.5, 18 apart on phones at 15/22.5 with 24
   between the two groups */
@media (min-width: 680.02px) {
    .zmit .zab-problems-head { margin-bottom: 51px; }
    .zmit .zab-problems-cols { grid-auto-flow: row; grid-template-rows: none; }
    .zmit .zab-problems-cols > .zab-problems-list { display: block; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zab-problems-head { margin-bottom: 50px; }
    .zmit .zab-problems .zab-tick-text { line-height: 25.5px; }
    .zmit .zab-problems-list li { padding-bottom: 10px; margin-top: 10px; }
}
@media (max-width: 680.98px) {
    .zmit .zab-problems-head { margin-bottom: 38px; }
    .zmit .zab-problems .zab-tick-text { line-height: 22.5px; }
    .zmit .zab-problems-list li { padding-bottom: 9px; margin-top: 9px; }
    .zmit .zab-problems-cols { row-gap: 24px; margin-bottom: 39px; }
}

/* video band, San Antonio reference: heading at normal tracking (it wraps
   to five lines on desktop); cite 5 under the quote; the next band 95
   under the video on desktop, 79 under the cite on tablet, 70 on phones;
   12px button text and a 12px cite on phones; at 881-1080 the band is
   881 wide, centred, with the quote 63 in */
.zmit .zab-band-copy h2 { letter-spacing: normal; }
.zmit .zab-band-quote footer { margin-top: 5px; }
@media (min-width: 1081px) { .zmit .zab-band.z-section { padding-bottom: 66px; } }
@media (max-width: 1080.98px) {
    .zmit .zab-band.z-section { padding-bottom: 50px; }
    .zmit .zab-band-btn { font-size: 12px; }
}
@media (min-width: 880.02px) and (max-width: 1080.98px) {
    .zmit .zab-band-inner { max-width: 881px; margin-left: auto; margin-right: auto; }
    .zmit .zab-band-quote { margin-left: 63px; margin-right: 23px; }
}
@media (max-width: 680.98px) {
    .zmit .zab-band.z-section { padding-bottom: 41px; }
    .zmit .zab-band-quote footer { margin-top: 13px; }
    .zmit .zab-band-quote cite { font-size: 12px; }
}
.zmit .zab-problems-list li:first-child { margin-top: 0; }
.zmit .zab-problems-list li:last-child { padding-bottom: 0; }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zab-band-quote { margin-right: 43px; } }
@media (min-width: 1081px) { .zmit .zab-band-copy { padding: 48px 0 24px; } }
/* steps to recognition: no margin under the steps band; the recognition
   heading 72 / 65 / 50 under it, as the reference */
.zmit .zab-steps.z-section { margin-bottom: 0; }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-recognized.z-section { padding-top: 65px; } }
@media (max-width: 680.98px) { .zmit .zmit-recognized.z-section { padding-top: 50px; } }

/* recognition band, San Antonio reference: the dark box 1280 wide on
   desktop; copy 21 under the heading at 26.4px; the CTA #fcfcfc with a
   one-line box (16px, 20 all round; 13px, 15 on phones) and 40 under the
   logos on tablet; the trust heading 38 / 57 / 50 under the band */
@media (min-width: 1081px) { .zmit .zmit-recognized .z-container { max-width: 1340px; } }
.zmit .zmit-recognized-copy p { line-height: 26.4px; }
@media (min-width: 680.02px) { .zmit .zmit-recognized-copy p { margin-top: 5px; } }
.zmit .zmit-recognized .zmit-recognized-cta .z-btn { background: #fcfcfc; line-height: 16px; padding: 20px; }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-recognized-cta { margin-top: 16px; } }
@media (max-width: 680.98px) {
    .zmit .zmit-recognized .zmit-recognized-band .zmit-recognized-cta .z-btn { line-height: 13px; padding: 15px; }
}
@media (min-width: 1081px) { .zmit .zab-trust.z-section { padding-top: 20px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zab-trust.z-section { padding-top: 57px; } }
@media (max-width: 680.98px) { .zmit .zab-trust.z-section { padding-top: 20px; } }
@media (min-width: 680.02px) { .zmit .zmit-recognized-copy h2 { margin-bottom: 19px; } }
@media (min-width: 1081px) { .zmit .zmit-recognized-copy p { max-width: 720px; } }

/* stories, San Antonio reference: heading 30/39 (22.8/29.64 up to 880),
   cards 30 apart; the band 10 from the trust copy on desktop, the trust
   band 69 under its copy at 881-1080 and 13 on phones; articles heading
   60 under the cards (40 on phones) */
.zmit .zmit-stories h2 { font-size: 30px; line-height: 39px; }
@media (max-width: 880.98px) { .zmit .zmit-stories h2 { font-size: 22.8px; line-height: 29.64px; } }
.zmit .zmit-stories .zmit-stories-grid { gap: 30px; }
@media (min-width: 1081px) { .zmit .zmit-stories.z-section { padding: 10px 0 30px; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zab-trust.z-section { padding-bottom: 69px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-stories.z-section { padding-bottom: 35px; } }
@media (max-width: 680.98px) {
    .zmit .zab-trust.z-section { padding-bottom: 13px; }
    .zmit .zmit-stories.z-section { padding-bottom: 20px; }
}

/* articles, San Antonio reference: heading 39/58.5/400 #141414 (38/38
   on phones), the explore link a 16px line (14.592px on phones, 25 under
   the heading); 270 images with the date 11 under them and 20 under the
   title; cards 20 apart below desktop */
.zmit .zmit-articles-head h2 { font-weight: 400; color: #141414; }
@media (min-width: 680.02px) { .zmit .zmit-articles-head h2 { font-size: 39px; line-height: 58.5px; } }
.zmit .zmit-articles-more { line-height: 16px; color: #141414; }
.zmit .zmit-articles .zmit-article-img img { height: 270px; }
.zmit .zmit-articles .zmit-article .body { padding-top: 11px; padding-bottom: 20px; }
.zmit .zmit-articles .zmit-article .date { line-height: 23.1px; }
@media (max-width: 1080.98px) { .zmit .zmit-articles .zmit-articles-grid { gap: 20px; } }
@media (max-width: 680.98px) { .zmit .zmit-articles-more { font-size: 14.592px; margin-top: 15px; } }
.zmit .zmit-articles .zmit-article .date { margin-bottom: 10px; }
@media (max-width: 880.98px) { .zmit .zmit-articles-more { font-size: 14.592px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-articles.z-section { padding-top: 30px; } }
@media (max-width: 680.98px) { .zmit .zmit-articles-more { margin-top: 18px; } .zmit .zmit-articles-head { margin-bottom: 34px; } }

/* stats, San Antonio reference: band 50 top and bottom on desktop (52 / 50
   on phones), the eyebrow 20 above the heading (a 24px line on phones) */
.zmit .zmit-stats .zmit-stats-copy h2 { margin-bottom: 20px; }
@media (min-width: 1081px) { .zmit .zmit-stats.z-section { padding: 50px 0; } }
@media (max-width: 680.98px) {
    .zmit .zmit-stats.z-section { padding: 52px 0 50px; }
    .zmit .zmit-stats .zmit-stats-copy h2 { line-height: 24px; margin-bottom: 18px; }
}

/* testimonial, San Antonio reference: lead and quote #14142b; the rule
   5 / 10 on desktop as below it; the heading 58 under the stats band on
   tablet (78 on phones) and 57 / 58 / 48 above the role */
.zmit .zmit-testi-lead, .zmit .zmit-testi-quote { color: #14142b; }
@media (min-width: 1081px) { .zmit .zmit-testi-rule { margin: 5px 0 10px; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zmit-testi.z-section { padding-top: 30px; } .zmit .zmit-testi h2 { margin-bottom: 8px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-testi.z-section { padding-top: 30px; } .zmit .zmit-testi h2 { margin-bottom: 12px; } }
@media (max-width: 680.98px) { .zmit .zmit-testi.z-section { padding-top: 50px; } .zmit .zmit-testi h2 { margin-bottom: 4px; } }
/* FAQ band, San Antonio reference: 50 top and bottom on desktop, 30 under
   the last row on tablet, 50 on phones */
@media (min-width: 1081px) { .zmit .zmit-faq.z-section { padding-top: 50px; padding-bottom: 50px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-faq.z-section { padding-bottom: 30px; } }
@media (max-width: 680.98px) { .zmit .zmit-faq.z-section { padding-bottom: 50px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-recognized.z-section { padding-top: 25px; } }
@media (max-width: 680.98px) { .zmit .zmit-recognized.z-section { padding-top: 20px; } }
/* testimonial card: the active slide sits at the top of the card (the
   reference's slide is as tall as the longest one, content top-aligned);
   heading 28-30 above the card below desktop */
.zmit .zmit-testi-card { align-items: start; }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zmit-testi h2 { margin-bottom: 28px; } .zmit .zmit-testi.z-section { padding-bottom: 30px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-testi h2 { margin-bottom: 30px; } }
@media (max-width: 680.98px) { .zmit .zmit-testi h2 { margin-bottom: 28px; } .zmit .zmit-testi.z-section { padding-bottom: 50px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-testi.z-section { padding-bottom: 30px; } }
@media (min-width: 680.02px) and (max-width: 1080.98px) { .zmit .zmit-articles.z-section { padding-bottom: 66px; } }

/* headings at normal tracking, as every heading on the reference (the
   shared -.01em changed where several of them wrap); comparison table 100
   above the compliance band on desktop */
.zmit :is(h1, h2, h3, h4) { letter-spacing: normal; }
@media (min-width: 1081px) { .zmit .zab-cmp.z-section { padding-bottom: 100px; } }

/* consultation band, San Antonio reference: copy at 26.4px; the calendar
   (756 tall at every width) 42 under the copy; the comparison heading 58
   under it on desktop, 31 on tablet, 42 on phones (its band 30 on top
   below desktop) */
.zmit .zmit-bookcal p { line-height: 26.4px; }
.zmit .zmit-bookcal-embed,
.zmit .zmit-bookcal-embed .meetings-iframe-container { height: 756px; min-height: 0; }
@media (min-width: 1081px) {
    .zmit .zmit-bookcal-embed { margin-top: 21px; }
    .zmit .zmit-bookcal.z-section { padding-bottom: 10px; }
}
@media (min-width: 680.02px) and (max-width: 1080.98px) {
    .zmit .zmit-bookcal-embed { margin-top: 41px; }
    .zmit .zmit-bookcal.z-section { padding-bottom: 1px; }
}
@media (max-width: 680.98px) {
    .zmit .zmit-bookcal-embed { margin-top: 40px; }
    .zmit .zmit-bookcal.z-section { padding-bottom: 7px; }
}
@media (max-width: 1080.98px) { .zmit .zab-cmp-head.z-section { padding-top: 30px; } }
@media (min-width: 1081px) { .zmit .zmit-bookcal-embed { margin-top: 39px; } .zmit .zmit-bookcal.z-section { padding-bottom: 16px; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zmit-bookcal.z-section { padding-bottom: 9px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-bookcal.z-section { padding-bottom: 12px; } }
@media (max-width: 680.98px) { .zmit .zmit-bookcal.z-section { padding-bottom: 15px; } }

/* text colours as the reference: #141414 on the video band heading and
   quote and the comparison heading; trust titles #fff; contact copy
   #fcfcfc at 26.4px; steps lead 26.4px; the pre-footer Contact Us #000 */
.zmit .zab-band-copy h2, .zmit .zab-band-quote p, .zmit .zab-cmp-head h2 { color: #141414; }
.zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { color: #fff; }
.zmit .zmit-contact-copy p { color: #fcfcfc; line-height: 26.4px; }
.zmit .zab-steps-lead { line-height: 26.4px; }
.zmit .zmit-insights-btns a:first-child { color: #000; }
.zmit .zmit-contact .zmit-contact-head p { color: #fcfcfc; line-height: 26.4px; }
@media (max-width: 680.98px) { .zmit .zmit-contact .zmit-contact-head p { line-height: 23.1px; } }

/* type details as the reference: breadcrumb 12px; hero sub white below
   desktop (23.1px on phones); hero CTA 16px on tablet, 14.592px at
   681-880, 12px on phones; one-line boxes on the small buttons; steps lead
   23.1px and FAQ answers 22.4px on phones */
.zmit .zmit-hero-crumb { font-size: 12px; }
@media (max-width: 1080.98px) { .zmit .zmit-hero .zmit-hero-sub { color: #fff; } }
@media (max-width: 680.98px) { .zmit .zmit-hero .zmit-hero-sub { line-height: 23.1px; } }
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { font-size: 16px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { font-size: 14.592px; } }
@media (max-width: 680.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { font-size: 12px; } }
.zmit .zmit-articles-more, .zmit .zab-band-btn { line-height: 1; }
@media (max-width: 680.98px) {
    .zmit .zab-steps-lead { line-height: 23.1px; }
    .zmit .zmit-faq-a-inner, .zmit .zmit-faq-a-inner p { line-height: 22.4px; }
}

/* hero below desktop, as the reference: CTA ~18 under the sub, a one-line
   button (13/35 at 881-1080, 14/28 at 681-880, 12/24 on phones), the form
   card 50 under it */
@media (max-width: 1080.98px) {
    .zmit .zmit-hero .zmit-hero-sub { margin-bottom: 19px; }
    .zmit .zmit-hero .zmit-hero-cta { margin-bottom: 20px; }
    .zmit .zmit-hero .zmit-hero-cta-btn { line-height: 1; padding: 13px 35px; }
}
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { padding: 14px 28px; } }
@media (max-width: 680.98px) {
    .zmit .zmit-hero .zmit-hero-sub { margin-bottom: 17px; }
    .zmit .zmit-hero .zmit-hero-cta-btn { padding: 12px 24px; }
}
@media (max-width: 1080.98px) { .zmit .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-text { line-height: 1; } .zmit .zmit-hero .zmit-hero-cta-btn { min-height: 0; height: auto; } }
/* the button carries a 1px border, so the padding is one less than live's */
@media (min-width: 880.02px) and (max-width: 1080.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { padding: 12px 34px; } }
@media (min-width: 680.02px) and (max-width: 880.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { padding: 13px 27px; } }
@media (max-width: 680.98px) { .zmit .zmit-hero .zmit-hero-cta-btn { padding: 11px 23px; } }