/* ============================================================
   Managed Security Service Provider — page-specific layer.
   23 live top-level sections at 1440 (24 in the raw HTML: 27668a9, the
   mobile compare accordion, is display:none at/above tablet_extra).

   Loads AFTER css/it-managed-services-zazz.css.

   Built band-by-band, not cloned from one page. Where a component already
   existed it was reused and only this page's measured deltas are written
   here; the reference used for each band is named in its own comment.

   MEASURED ON LIVE AT 1440 (window.innerWidth === 1440 asserted in the same
   evaluation as every reading below):
     - Live's boxed containers run 1365 at x30 (the tech-stack band 1385 at
       x20, the flip-card band 1400 at x13). The house 1400px .z-container is
       KEPT — owner decision 2026-08-26, CLAUDE.md §7 "Never widen the content
       box". Percentage column splits are used so the proportions carry.
     - Hero: section 797 tall at t100; H2 54px/600/64.8px white, 757 wide at
       x30 (5 lines, 324 tall); white card t140 h727 w508 x887 radius 8,
       padding 20px 25px 20px 20px; marquee 792 wide at x30, chips 70 tall.
     - Services: SIXTEEN cards. Hover MEASURED with a real pointer on live's
       widget uc_service_grid_card_elementor_9cdc36f — see the S02 block.
     - Compare: 3 columns 445 at x30 / x490 / x950 (gap 15), header 72 tall,
       body cells 100, FIVE rows. col-0 carries live's 3-layer gradient at
       walk depth 3.
     - Certifications: band #e6ebf5; h2 47px/600/65px #000 centred (644 wide);
       lead 16px/400/26px #5e5e5e centred (600 wide); WHITE tiles 424x178 at
       x65 / x501 / x936 (gap 12, tile padding 12), badge 134x134, inner gap
       20; tile h3 24px/600/36px #020101, p 14px/400/22px #5e5e5e.
     - Dark 4-up panel (e5d8633): eyebrow 34.7px/400/43px #14142b LEFT, 1157
       wide; panel #262338, FOUR 333.75px columns, gap 0 10px, 400 tall; cells
       334 wide, padding 32px 25px, NO right hairline on this page (live
       separates with the 10px gap instead of the 1px #fff rule the
       1password band uses); icon 100x100 rgb(105,114,125); title 15px/900
       #fff CENTRED, no underline; desc 15px/600/28px #f7f7fc CENTRED.
     - Stats (both bands): #262338; copy column 438 at x30 | counters 877 at
       x518; three cells 263 wide at x518 / x825 / x1132; number 57px/600
       #76aaff, label 14px/400/21px #fcfcfc.
     - Tech stack (212f32f): heading 34.7px/400/45px; lead 16px/24px, 693
       wide. Tabs are TWO COLUMNS — rail 305 at x20 (h450) | panel 1080 at
       x325; sideBySide TRUE (same top, 325 > 20 + 200). Tab pills 280x56,
       gap 10, radius 5, padding 20; active #0161ff/#fff, rest #fff/#141414.
       Vendor cards #eff0f7, radius 8, padding 15, 507x82 at x376 / x898 →
       TWO columns, 15px gap; title 18px/400/23.4px #141414.
     - NIST (fa51b42): white section; h2 40px/600/56px #141414 centred (1365
       wide); lead 1092 wide centred. Row of FIVE white radius-10 panels 320
       tall, gap 20: the OPEN one is 800 wide at x33, the four collapsed ones
       120 wide at x853 / x993 / x1133 / x1273. Icon 70x70 circle bg #ebebeb,
       colour rgb(37,2,255). The 90px/400 letter is #fff on the open panel
       (invisible against the white card) and #c2c2c2 on the collapsed ones —
       it IS the collapsed-state marker. Name 24px/600/31.2px #141414, copy
       16px/400/26.4px.
     - Process (7925397): TWO COLUMNS — copy 700 at x13 (inner 640 at x43) |
       accordion 700 at x713 (inner 640 at x743); sideBySide TRUE (same top,
       713 > 13 + 200). Both h2s 30px/400/39px #141414. Accordion is native
       <details>, all five CLOSED on load (413 = 5x77 + 4x7), item header
       #262338 / #fcfcfc, padding 25, radius 5, 77 tall.
     - Elevate (cfcd04b): #eff0f7; copy 658 at x30 | 50 gap | 2x2 card grid
       658 at x738 (cells 318.75, gap 20). IDENTICAL to the law-firms band —
       live serves the same container id — so that page's values are reused.
     - Overview (7b280f8): #fcfcfc; copy 658 at x30 (h2 34px/400/44.2px
       #14142b, 40px stack gap, 402x46 #0161ff button) | 50 gap | 658x400
       photo at x738. Same shape as the law-firms .zab-empower band.
     - Industries (7f62b53): band #f7f7fc, padding 70px 0; heading
       34.7px/400 #1f1f1f centred; lead 15.5px/400/25px centred (728 wide);
       flip cards 260x270 radius 10, five per row 15px apart, front padding
       12px 27px, back padding 11px.
     - FAQ: #eff0f7; h2 34px/400/44.2px LEFT; 24 items split 12 / 12 across
       live's two accordion widgets => the forced column break sits on
       nth-child(12).
     - Recognition band (f6fae33): rgb(20,20,20), radius 10, padding 40,
       width 1365 — ALL THREE are already correct in the shared sheet and are
       deliberately NOT re-specified here.
     - Pre-footer (a8ff3b4): #000; copy column 770 at x13 | buttons 280 at
       x1133; 80px vertical padding.

   Owner-approved deviations from live, carried from the reference family and
   tagged inline: hero headline 42px not live's 54, contact card 620 wide,
   stat number left-aligned, marquee chips bounded on both axes, the 1400px
   container. Deliberate; do not "fix" them back.

   Split rule: a given CSS property for a given selector lives in exactly one
   of the two sheets, never both.
   ============================================================ */

/* ------------------------------------------------------------
   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;              /* dark 4-up panel + stats bands */
}

/* ============================================================
   S01 HERO — the approved Family A geometry; only the artwork is this page's.
   Live paints the banner as a plain <img> with object-fit:fill (stretched,
   not cropped) — center/100% 100% is the background equivalent.
   ============================================================ */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/20080217/Managed-Security-Service-Provider-Main-Banner-1.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    /* Crumb: live 12px white at t118, separators .76 white. */
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 20px; font-size: 12px; color: rgba(255, 255, 255, .76); }
    .zmit .zmit-hero-crumb a { color: #fff; }
    .zmit .zmit-hero-crumb .sep { opacity: 1; }
    /* OWNER 2026-09-25: match live's hero exactly. Live at 1440: copy column
       766 wide, white card 514 wide (x896, t140, h728), banner 672 tall
       (t100..772). Copy column kept at the house x43. */
    .zmit .zmit-hero-grid {
        grid-template-columns: 766px 514px; justify-content: space-between;
        gap: 0; align-items: stretch; padding: 28px 0 0;
    }
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    /* Live: H2 54px/600/64.8px. OWNER 2026-09-28: smaller than live -
       deliberate deviation, do not "fix" back to 54. */
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 52px; }
    /* Live: sub 16px/26.4px white, 766 wide, 21px above the CTA. */
    .zmit-hero .zmit-hero-sub { max-width: 766px; color: #fff; margin-bottom: 21px; font-size: 16px; line-height: 26.4px; }
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    /* Live CTA: 484x42, 16px/500 label, padding 13px 35px, radius 8, #f2f7ff. */
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px; min-height: 42px;
        background: #f2f7ff; border: 0; border-radius: 8px;
    }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 16px; }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* Live's white hero CARD (found by its own styling, never by walking up
       from the form): t140 h728 w514, radius 8, 2px rgba(93,100,129,.2)
       border, padding 20px 25px 20px 20px. Stretched to the row, it
       overhangs the banner 96px into the logo strip — live's composition. */
    /* OWNER 2026-09-28 compact hero: the card sizes to its content (live
       stretches it to the row) so the copy column drives a shorter banner
       and the card ends at the note + 20px padding, no dead space. */
    .zmit .zmit-hero-right { align-self: start; margin: -44px 0 -95.55px; }
    .zmit-form-card {
        margin: 0; height: auto; transform: none;
        padding: 20px 25px 20px 20px;
    }
    /* OWNER 2026-09-28: shorter banner than live. The card drives the banner
       height, so the form is compacted (live: title gap 58, submit gap 29,
       note gap 60, rows 20) - deliberate deviation. */
    .zmit-form-card h3 { font-size: 20px; line-height: 27px; margin-bottom: 20px; }
    .zmit-form-card .zmit-hsform { min-height: 0; }
    .zmit .zmit-form-card .zmit-hsform .hsfc-Row { margin-bottom: 14px !important; }
    .zmit-form-card .zmit-hsform .hsfc-NavigationRow { margin-top: 16px !important; }
    .zmit-form-card .zmit-hsform .hsfc-Button,
    .zmit-form-card .zmit-hsform button[type="submit"] {
        height: 42px !important; padding: 13px !important; border-radius: 3px !important;
        font-size: 16px !important; font-weight: 700 !important;
    }
    .zmit-form-card .zmit-form-note { margin-top: 16px !important; margin-bottom: 0 !important; }
}

/* HubSpot field look — live's hero AND contact forms share it: label
   14px/500/20px rgb(33,45,58) + red asterisk, 10px, input 40 tall (#eff0f7,
   no border, radius 5, padding 10px 20px), 20px between rows (90px pitch),
   textarea 68, submit 42 tall 16px/700 radius 3. Scoped to the two wrappers
   — never bare .zmit-hsform (the footer newsletter uses it too). */
.zmit-form-card .zmit-hsform .hsfc-Row,
.zmit-contact-form .zmit-hsform .hsfc-Row { margin-bottom: 20px !important; }
.zmit-form-card .zmit-hsform .hsfc-FieldLabel,
.zmit-contact-form .zmit-hsform .hsfc-FieldLabel { font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: rgb(33, 45, 58) !important; margin-bottom: 10px !important; }
.zmit-form-card .zmit-hsform .hsfc-FieldLabel span,
.zmit-contact-form .zmit-hsform .hsfc-FieldLabel span { font-size: 14px !important; font-weight: 500 !important; color: rgb(33, 45, 58) !important; margin-bottom: 0 !important; }
.zmit-form-card .zmit-hsform .hsfc-FieldLabel span.hsfc-FieldLabel__RequiredIndicator,
.zmit-contact-form .zmit-hsform .hsfc-FieldLabel span.hsfc-FieldLabel__RequiredIndicator { color: rgb(229, 21, 32) !important; }
/* Live: the .hsfc-DropdownInput / .hsfc-PhoneInput WRAPPERS are transparent
   with no padding - only the inner inputs are filled. Styling the wrappers
   drew a grey box around a second, white inner field (box-in-box). */
.zmit-form-card .zmit-hsform .hsfc-DropdownInput, .zmit-form-card .zmit-hsform .hsfc-PhoneInput,
.zmit-contact-form .zmit-hsform .hsfc-DropdownInput, .zmit-contact-form .zmit-hsform .hsfc-PhoneInput {
    height: 40px !important; padding: 0 !important; gap: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
.zmit-form-card .zmit-hsform .hsfc-TextInput, .zmit-form-card .zmit-hsform select,
.zmit-contact-form .zmit-hsform .hsfc-TextInput, .zmit-contact-form .zmit-hsform select,
.zmit-form-card .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput,
.zmit-form-card .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput,
.zmit-contact-form .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput,
.zmit-contact-form .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput {
    height: 40px !important; min-height: 40px !important; padding: 10px 20px !important;
    background-color: #eff0f7 !important; border: 0 !important; border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important; font-size: 16px !important;
}
.zmit-form-card .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput,
.zmit-contact-form .zmit-hsform .hsfc-DropdownInput .hsfc-TextInput { padding: 10px 25px 10px 20px !important; }
/* Phone: flag segment #eff0f7 radius 3 0 0 3 + number radius 0 5 5 0 = one joined field. */
/* .hsfc-PhoneInput in the selector: the partial's inline rule is the same
   specificity without it and, emitted later, wins (white 8px-radius chip). */
.zmit-form-card .zmit-hsform .hsfc-PhoneInput .hsfc-PhoneInput__FlagAndCaret,
.zmit-contact-form .zmit-hsform .hsfc-PhoneInput .hsfc-PhoneInput__FlagAndCaret {
    box-sizing: border-box !important;
    height: 40px !important; padding: 7px !important; background: #eff0f7 !important;
    border: 0 !important; border-radius: 3px 0 0 3px !important;
}
.zmit-form-card .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput,
.zmit-contact-form .zmit-hsform .hsfc-PhoneInput .hsfc-TextInput { border-radius: 0 5px 5px 0 !important; }
.zmit-form-card .zmit-hsform .hsfc-TextareaInput, .zmit-form-card .zmit-hsform textarea,
.zmit-contact-form .zmit-hsform .hsfc-TextareaInput, .zmit-contact-form .zmit-hsform textarea {
    height: 68px !important; min-height: 68px !important; padding: 10px 20px !important;
    background-color: #eff0f7 !important; border: 0 !important; border-radius: 5px !important;
    font-size: 16px !important;
}
.zmit-form-card .zmit-hsform .hsfc-Button, .zmit-form-card .zmit-hsform button[type="submit"],
.zmit-contact-form .zmit-hsform .hsfc-Button, .zmit-contact-form .zmit-hsform button[type="submit"] {
    height: 42px !important; padding: 13px !important; border-radius: 3px !important;
    font-size: 16px !important; font-weight: 700 !important;
}
/* Scroll cue — live is Font Awesome chevron-circle-down, 30px,
   rgba(255,255,255,.66), 20px above the banner foot. The shared partial ships
   a bare chevron svg, so the disc glyph is painted as a mask instead. */
.zmit-hero .zmit-hero-scroll svg { display: none; }
.zmit-hero .zmit-hero-scroll::before {
    content: ""; display: block; width: 30px; height: 30px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 20px;
    width: 30px; height: 30px; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .66);
    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's chip row is 70px and the wrapper 792 wide.
   Owner request 2026-08-26: every marquee logo bounded on BOTH axes, so the
   chip height and the max-* pair move together and `height` is never set on
   the image itself. */
.zmit .zmit-trust-band { padding: 15px 0 40px; }
.zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; }
.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 — label first, then arrow (live's own order).
   ============================================================ */
.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; }
.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; }
/* stats CTA: #0161ff label on a #f2f7ff pill, 13px 35px, 8px radius */
.zmit .zab-btn-light {
    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-btn-light:hover { background: #e2ecff; color: var(--zab-accent); }
/* overview CTA: live's own #0161ff button, 402x46, 8px radius */
.zmit .zab-btn-accent { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; font-weight: 500; gap: 16px; }
/* final CTA: accent pill (live's e3a91e7 button is the same accent as the
   recognition band's, not the law-firms black square). */
.zmit .zab-btn-final { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; }
.zmit .zab-btn-final:hover { background: #141414; color: #fcfcfc; }

/* ============================================================
   S02 SERVICES — 16 cards, FOUR columns / 30px gap. Card internals carried
   from the measured Family A grid-card design (light-lavender fill, 1px
   border, 10px radius) which the shared sheet already owns.
   ============================================================ */
/* Live 8f3c267: transparent band, eyebrow at +1, lead at +35, cards at +99,
   33px under the last row (band 1257 at 1440). */
.zmit .zmit-services.z-section { padding: 1px 0 33px; background: transparent; }
.zmit-services-head { margin-bottom: 21px; }
.zmit .zmit-services-head h2.z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); text-transform: none; letter-spacing: 0; margin: 0 0 10px; display: inline-block; }
.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; }
.zmit-services-grid .zmit-svc-card {
    /* Flex COLUMN so the hover CTA pins to the card bottom with
       margin-top:auto (live's own mechanism); display:block would tie the
       CTA's y to the bullet count and break row alignment. */
    display: flex;
    flex-direction: column;
    background: var(--zab-fill);
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 30px;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.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; transition: color .2s ease; }
/* NO list-style and NO left padding: the shared sheet draws the bullet itself
   (li::before over li { padding-left: 18px }) — adding a native disc gives
   TWO dots per bullet. */
/* Live bullets: 12px/19.8px #111, text 20px in from the h3 edge, ul flush
   under the h3 (h3 margin 20). Marker stays the shared ::before. */
.zmit-services-grid .zmit-svc-card ul { margin: 0; padding: 0; list-style: none; }
.zmit-services-grid .zmit-svc-card li { font-size: 12px; font-weight: 400; line-height: 19.8px; color: #111; margin-bottom: 0; padding-left: 20px; }
.zmit-services-grid .zmit-svc-card li::before { left: 7px; color: #9aa3c0; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }

/* HOVER — MEASURED with a real pointer on THIS page's live widget
   (#uc_service_grid_card_elementor_9cdc36f), transitions zeroed,
   el.matches(':hover') asserted true, and a resting sibling read in the same
   pass as a control:
        border  #eff0f7                 -> #0161ff
        fill    #eff0f7                 -> #d5e0f3
        CTA     display none            -> block, 34px
        transform none                  -> matrix(1,0,0,1,-10,-10)
        radius  10px                    -> unchanged
   THIS PAGE LIFTS. The industry template does NOT — never carry either way
   without re-measuring the page you are building.
   :focus-within beside every :hover — the overlay anchor is the only tab
   stop, so keyboard users must also see the CTA appear.
   The rule is keyed on BOTH .has-link and :has(.z-explore) so it holds
   whether or not the markup carries the class. */
.zmit-services-grid .zmit-svc-card.has-link:hover,
.zmit-services-grid .zmit-svc-card.has-link:focus-within,
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within {
    border-color: #0161ff;
    background: #d5e0f3;
    transform: translate(-10px, -10px);
}
@media (prefers-reduced-motion: reduce) {
    .zmit-services-grid .zmit-svc-card.has-link:hover,
    .zmit-services-grid .zmit-svc-card.has-link:focus-within,
    .zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
    .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: none; }
}
/* Live toggles the CTA display:none -> block, but display:none makes the card
   GROW 34px on hover and makes the bottom-gap assertion meaningless (a
   display:none box measures 0). House rule (CLAUDE.md §7): keep the box and
   hide it with `visibility`, with `margin-top: auto` pinning the reserved row
   to the card foot and `padding-top` supplying the minimum gap — so every
   card's CTA sits on the same line whatever its bullets wrap to, and the card
   height is identical resting and hovered. */
.zmit-services-grid .zmit-svc-card .zmit-svc-cta {
    display: flex; align-items: center; height: 34px;
    visibility: hidden; margin-top: auto; padding-top: 10px;
    /* Live's resting card is 258 tall: 30 pad + h3 + 20 + bullets + 12 + 30.
       The reserved CTA row sits inside that foot, so the resting card
       matches live and nothing jumps on hover (house padding 30 kept). */
    margin-bottom: -22px;
}
.zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover .zmit-svc-cta,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within .zmit-svc-cta { visibility: visible; }
.zmit-svc-cta .z-svc-more {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 14px; font-weight: 700; line-height: 24px; color: #000;
    text-decoration: none;
    /* Owner 2026-09-30: the CTA never breaks onto a second line (labels are kept short
       enough to fit the narrowest card, 253px of text box). */
    white-space: nowrap;
}
.zmit-svc-cta .z-svc-more:hover,
.zmit-svc-cta .z-svc-more:focus { color: #000; text-decoration: none; }
.zmit-svc-cta .ico { display: inline-flex; align-items: center; }
.zmit-svc-cta svg { display: block; width: 14px; height: 8px; }

/* ============================================================
   S03 COMPARISON HEADING — live a27d75e: heading-only sibling, 529 bytes.
   36.8px/400/36.8px #141414, LEFT aligned, 1015 wide at x30.
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 20px 0 15px; }  /* live 72 */
.zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; font-weight: 400; text-align: left; color: #141414; margin: 0; }

/* ============================================================
   S04 COMPARISON TABLE — live 328e9ae, DESKTOP ONLY (its own container
   carries elementor-hidden-tablet_extra / -tablet / -mobile_extra /
   -mobile). 3 columns 445 at x30 / x490 / x950 (gap 15); header cells 72
   tall, body cells 100; FIVE rows.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0 0 30px; }  /* live 602 */
.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; height: 72px;
    display: flex; align-items: center;
    font-size: 24px; font-weight: 600; line-height: 32px; color: #141414;
}
/* Live cells: block (text TOP-aligned, not centred), padding 20px 30px,
   fixed 100 tall, 16px/500/28px #06001c; text box 388 wide. The house
   column is 12px narrower, so 24px side padding keeps live's 388 text
   width and therefore its line breaks. */
.zmit .zab-cmp-cell {
    margin: 0; padding: 20px 24px; height: 100px;
    display: block;
    font-size: 16px; font-weight: 500; line-height: 28px; color: #06001c;
    border: 1px solid var(--zab-line); border-top-width: 0;
}
.zab-cmp-cell a { color: var(--zab-accent); }
/* ONE flex item per cell: an inline link plus a bare text node would become
   two items and wrap independently, scrambling the sentence. */
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Only the FIRST body cell of each column is rounded and carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Key Challenges column: live's 3-layer gradient (a 70% white veil over two
   blue gradients), found at background-walk depth 3 — a shallower walk
   reports "none". Cells transparent so it shows. NEVER flatten it. */
.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; }
/* Live's alternate-row stripes, read cell by cell at 1440 on this page:
   Zazz col  rows 1-5 = column #eff0f7 / #f9fcff / #eff0f7 / #f9fcff / #eff0f7
   Others    rows 1-5 = #f9fcff / #fff / #f9fcff / #fff / #f9fcff
   Written nth-of-type(even), never an enumerated list — an enumerated list
   silently drops off the bottom rows of a longer table. */
.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; }
/* Zazz-column hairline on EVERY row — row-count-independent house rule. */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
.zab-cmp-acc { display: none; }

/* ============================================================
   27668a9 COMPARISON ACCORDION — MOBILE/TABLET ONLY. Live's own container is
   hidden from tablet_extra up, so below 1081 it is the ONLY rendering of
   this band and the desktop table is hidden. Native <details>, as live.
   ============================================================ */
/* Up to 1200 = live's tablet_extra: 328e9ae (the table) carries
   elementor-hidden-tablet_extra, so on live the accordion shows on EVERY tablet,
   portrait and landscape (verified at 1180, 2026-09-29); the table only from 1201. */
@media (max-width: 1200px) {
    .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);
}
.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 22px 20px; }
.zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding-top: 14px; }
.zmit .zab-acc-row .zab-acc-label { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-body); margin: 0; }

/* ============================================================
   S05 CERTIFICATIONS — live 93b93db: LIGHT band #e6ebf5. Centred 47px black
   h2 (644 wide), centred grey lead (600 wide), then SIX WHITE tiles in a
   3x2 grid: tile 424x178 with 12px padding, 134px badge left + copy right
   (inner gap 20). 12px grid gap.
   Badge sizing: NATURAL aspect at this page's REAL intrinsic 134x134 — never
   gap:0 with a forced aspect-ratio / object-fit:fill, and never a sibling's
   stale 225x150.
   ============================================================ */
/* Live band 606: padding 30, h2 at +30, lead +5, tiles 52 below the lead,
   white SQUARE tiles 179 tall (131 badge, 12 pad), 11.6 x 15 gaps. */
.zmit .zab-certified.z-section { background: #e6ebf5; padding: 30px 0; }
.zmit .zab-certified h2 { font-size: 47px; font-weight: 600; line-height: 65px; color: #000; text-align: center; max-width: 700px; margin: 0 auto; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26px; color: #5e5e5e; text-align: center; max-width: 600px; margin: 5px auto 0; }
.zab-certified-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 12px; margin-top: 52px; align-items: stretch; }
/* Owner 2026-09-30 (ss6 / ss8): live's tile internals — badge 134x134 (its real
   intrinsic size), padding 24px 12px, 20px from badge to copy. Live's tiles grow wider
   on very wide screens because live runs full-width; the house 1400 container is kept. */
.zab-cert-box { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 0; padding: 24px 12px; min-height: 179px; }
.zab-cert-box img { width: 134px; height: 134px; flex: 0 0 134px; object-fit: contain; display: block; }
.zmit .zab-cert-box h3 { font-size: 24px; font-weight: 600; line-height: 36px; color: #020101; margin: 0 0 2px; }
.zmit .zab-cert-box p { font-size: 14px; font-weight: 400; line-height: 22px; color: #5e5e5e; margin: 0; }

/* ============================================================
   S06 WHY BUSINESS LEADERS CHOOSE — live e5d8633: white section, LEFT
   eyebrow 34.7px/400/43px, then the dark #262338 panel: FOUR 333.75px
   columns 10px apart, 400 tall, cells 32px 25px with a 100px icon.
   No cell hairline on THIS page (the 1password band's 1px #fff right rule
   would be wrong here — live separates with the 10px gap).
   DARK PANEL => LIGHT COPY.
   ============================================================ */
/* Live band 526: eyebrow at +30, panel 53 below it, band ends on the panel. */
.zmit .zab-trust.z-section { background: #fff; padding: 30px 0 0; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 53px; letter-spacing: normal; }  /* band H2 since 2026-09-29 (was a p): cancel the shared h2 tracking */
.zab-trust-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 15px;
}
/* Live cells 400 tall: icon at +32, title 28 below it, copy 20 below. */
.zab-trust-cell { padding: 32px 25px; border-right: 0; min-height: 400px; }
/* Live: every cell carries a 1px white right border (all four, incl. the last) - the column dividers. Desktop 4-up only; stacked layouts keep no divider. */
@media (min-width: 1081px) { .zab-trust-cell { border-right: 1px solid #fff; } }
.zab-trust-ico { display: block; margin: 0 auto 28px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 900; line-height: 19.5px; color: #fff; text-align: center; text-decoration: none; margin: 0 0 20px; }  /* card title: h3 since 2026-09-29 (was an h2) */
.zmit .zab-trust-cell p { font-size: 15px; font-weight: 600; line-height: 28px; color: #f7f7fc; text-align: center; margin: 0; letter-spacing: -.01em; }  /* card sentence: body copy since 2026-09-29 (was an h3); tracking kept */

/* ============================================================
   S07 BOOK A FREE CONSULTATION — live 82d31d4: heading 30px/400/39px
   #14142b CENTRED. The embed geometry is the shared sheet's.
   ============================================================ */
/* Live band 910: h2 at +30, lead 10 below on ONE line (no max-width),
   calendar 40 below the lead, 9px under it. */
.zmit .zmit-bookcal.z-section { padding: 30px 0 9px; }
.zmit .zmit-bookcal h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: var(--zab-ink); margin: 0 0 10px; }
.zmit .zmit-bookcal .z-container > p { max-width: none; margin: 0; font-size: 16px; line-height: 26.4px; }
.zmit .zmit-bookcal-embed { margin-top: 40px; }

/* ============================================================
   S08 + S16 STATS — both live bands (f1184cf, 9ed71af) are #262338 with the
   copy column 438 at x30 and THREE counters 263 wide at x518 / x825 / x1132.
   Number 57px/600 #76aaff ON TOP; label 14px/21px #fcfcfc below.
   DARK BAND => LIGHT COPY.
   ============================================================ */
.zmit-stats { background: var(--zab-dark); }
/* Live bands 324 / 364: flush to their neighbours (no margin), padding 30;
   eyebrow 16px/600, heading 20 below, CTA 49 below the heading. */
.zmit .zmit-stats.z-section { margin: 0; padding: 30px 0; }
.zmit-stats-copy { max-width: none; }
.zmit .zmit-stats-copy h2.zmit-stats-eyebrow { font-size: 16px; font-weight: 600; line-height: 19px; color: #fff; margin: 0 0 20px; display: block; letter-spacing: normal; text-transform: none; }
.zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 49px; }
@media (min-width: 1081px) {
    .zmit-stats-layout { grid-template-columns: 438fr 877fr; gap: 50px; align-items: center; }
    /* THREE counters — live's own grid on both bands (cells 263, 44px apart). */
    .zmit-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; align-items: start; }
}
/* Live 9ed71af (second band) is 364: 50px padding, not 30. */
.zmit .zmit-stats.zab-stats-2.z-section { padding: 50px 0; }
.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. Deliberate deviation from
       live — do NOT "fix" this back to center. */
    order: -1; text-align: left;
    font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px;
}

/* ============================================================
   S09 TECH STACK — NEW .zab-stack (live 212f32f measured at 1440).
   TWO COLUMNS, confirmed with the sideBySide test: rail 305 wide at x20
   (450 tall) and panel 1080 wide at x325 share a top, and 325 > 20 + 200.
   Rail: ten 280x56 pills, 10px apart, radius 5, padding 20; active
   #0161ff on #fff text, resting #fff on #141414 text.
   Panel: vendor cards #eff0f7, radius 8, padding 15, 507x82 at x376 and
   x898 => TWO columns 15px apart. Card title 18px/400/23.4px #141414.
   ============================================================ */
/* Live 212f32f at 1440: band 724 — h2 at +30, lead 21 below (700 wide),
   then the tab box 31 below the lead: 500 tall with a 1px top rule; the
   rail column is 308 wide with a 1px right rule, 50px top inset, and SCROLLS
   (450 visible) — ten 288x56 tabs, 10 apart, plain (no border), radius 5,
   padding 20, 16px/16px; active #0161ff/#fff. Panel 51px right of the rail,
   50px down: 2 x 513 cards, 15 gap, #eff0f7, radius 8, padding 15, 82 tall,
   52px logo, title 28px right of it. 49px under the tab box. */
.zmit .zab-stack.z-section { background: #fff; padding: 30px 0 49px; }
.zmit .zab-stack-head h2 { font-size: 34.7px; font-weight: 400; line-height: 45px; color: #141414; margin: 0 0 21px; }
.zmit .zab-stack-head p { font-size: 16px; font-weight: 400; line-height: 24px; color: #000; max-width: 700px; margin: 0 0 31px; }
.zab-stack-tabs { display: grid; grid-template-columns: 1fr; gap: 20px; }
.zab-stack-rail { display: flex; flex-direction: column; gap: 10px; }
.zmit .zab-stack-tab {
    display: flex; align-items: center; text-align: left; flex: 0 0 auto;
    background: #fff; border: 0; border-radius: 5px;
    padding: 20px; min-height: 56px;
    font-size: 16px; font-weight: 400; line-height: 16px; color: #141414;
    cursor: pointer; transition: background .2s ease, color .2s ease;
}
.zmit .zab-stack-tab:hover { background: #eff0f7; }
.zmit .zab-stack-tab.is-active { background: var(--zab-accent); color: #fff; }
.zab-stack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-content: start; }
.zab-stack-card {
    display: flex; align-items: center; gap: 28px;
    background: var(--zab-fill); border-radius: 8px; padding: 15px; min-height: 82px;
}
.zab-stack-card img { flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; display: block; }
.zmit .zab-stack-card h3 { font-size: 18px; font-weight: 400; line-height: 23.4px; color: #141414; margin: 0; letter-spacing: normal; }  /* an H3 since 2026-09-29 (live's heading level); reset the shared h3 margin + tracking so it renders as the old label */
/* Linked tool cards (2026-10-05): same treatment as it-managed-services a.zab-stack-card - no underline, lift + shadow on hover. */
.zmit a.zab-stack-card { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.zmit a.zab-stack-card:hover, .zmit a.zab-stack-card:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 20, 43, .10); }
@media (prefers-reduced-motion: reduce) { .zmit a.zab-stack-card:hover, .zmit a.zab-stack-card:focus-visible { transform: none; } }
@media (min-width: 1081px) {
    .zab-stack-tabs { grid-template-columns: 308px 1fr; gap: 0; height: 500px; border-top: 1px solid #dcdcdc; align-items: stretch; }
    .zab-stack-rail { height: 499px; overflow-y: auto; padding: 50px 20px 0 0; border-right: 1px solid #dcdcdc; }
    .zab-stack-panels { padding: 50px 0 0 51px; }
}
/* ============================================================
   S10 NIST FRAMEWORK — NEW .zab-nist (live fa51b42 measured at 1440).
   White section; h2 40px/600/56px #141414 centred over the full 1365 box;
   lead 1092 wide centred. The row is FIVE white radius-10 panels 320 tall
   with a 20px gap: the OPEN panel is 800 wide (x33) and the four collapsed
   ones are 120 wide (x853 / x993 / x1133 / x1273).
   Icon: 70x70 circle, background #ebebeb, colour rgb(37,2,255).
   Letter: 90px/400 — #fff on the open panel (so it disappears into the white
   card) and #c2c2c2 when collapsed. It IS the collapsed-state marker, which
   is why the open panel appears to have no letter.
   Name 24px/600/31.2px #141414; copy 16px/400/26.4px.
   ============================================================ */
/* Re-measured IN VIEW (Seraphinite defers the paint) 2026-09-25:
   band 631, padding 30, background a .08 blue->violet veil over white;
   h2 at +30, lead 30 below (1104 wide, #5e5e5e), row 30 below the lead.
   Panels: NO border, shadow 0 0 14px 2px rgba(0,31,31,.08), radius 10.
   Open panel: 170px label strip painted #0161ff -> #9572f7 (live's own
   gradient), icon at the top (+20), WHITE 90px letter at the foot (-20);
   body 50px right of the strip, vertically centred, name 24/31.2 then 20
   then copy 16/26.4 #000. Collapsed (120 wide): icon at +30 centred,
   #c2c2c2 letter at the foot (-30). */
.zmit .zab-nist.z-section {
    padding: 30px 0;
    background: linear-gradient(rgba(1, 97, 255, .08) 0%, rgba(149, 114, 247, .08) 100%), #fff;
}
.zmit .zab-nist h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #141414; text-align: center; margin: 0 0 30px; }
.zmit .zab-nist-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #5e5e5e; text-align: center; max-width: 1104px; margin: 0 auto 30px; }
.zab-nist-lead a { color: var(--zab-accent); }
.zab-nist-row { display: flex; flex-direction: column; gap: 20px; }
.zab-nist-item {
    background: #fff; border: 0; border-radius: 10px;
    box-shadow: 0 0 14px 2px rgba(0, 31, 31, .08);
    overflow: hidden; transition: flex-basis .35s ease;
}
.zmit .zab-nist-tab {
    display: flex; align-items: center; gap: 20px;
    width: 100%; background: none; border: 0; padding: 20px; cursor: pointer;
}
.zab-nist-item.is-open .zab-nist-tab { background: linear-gradient(180deg, #0161ff 0%, #9572f7 120%); }
.zab-nist-ico {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 70px; width: 70px; height: 70px; border-radius: 50%;
    background: #ebebeb; color: rgb(37, 2, 255);
}
.zab-nist-ico svg { display: block; width: 38px; height: 38px; }
.zab-nist-letter { font-size: 90px; font-weight: 400; line-height: 90px; color: #c2c2c2; }
.zab-nist-item.is-open .zab-nist-letter { color: #fff; }
/* Screen-reader name on the tab: the visible name lives in the body, which is
   hidden while collapsed, so the control would otherwise have no label. */
.zab-nist-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zab-nist-body { padding: 20px; }
.zmit .zab-nist-body h3 { font-size: 24px; font-weight: 600; line-height: 31.2px; color: #141414; margin: 0 0 20px; }
.zmit .zab-nist-body p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #000; margin: 0; }
@media (min-width: 1081px) {
    .zab-nist-row { flex-direction: row; align-items: stretch; height: 320px; }
    .zab-nist-item { flex: 0 0 120px; display: flex; flex-direction: column; }
    .zab-nist-item.is-open { flex: 1 1 auto; flex-direction: row; align-items: stretch; }
    .zmit .zab-nist-tab { width: auto; flex: 1 1 auto; flex-direction: column; justify-content: space-between; align-items: center; gap: 0; padding: 30px 0; }
    .zab-nist-item.is-open .zab-nist-tab { flex: 0 0 170px; padding: 20px 0; }
    .zab-nist-body { display: none; }
    .zab-nist-item.is-open .zab-nist-body { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; padding: 0 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .zab-nist-item { transition: none; }
}
/* ============================================================
   S11 SECURITY IMPLEMENTATION PROCESS — NEW .zab-proc (live 7925397
   measured at 1440). TWO COLUMNS, confirmed with the sideBySide test: copy
   column 700 at x13 (inner 640 at x43) and accordion column 700 at x713
   (inner 640 at x743) share a top, and 713 > 13 + 200.
   Both h2s are 30px/400/39px #141414 — the second ("What This Process
   Includes:") is a real heading, not a lead.
   Accordion: native <details>, all five CLOSED on load (live's column
   measures 413 = 5x77 + 4x7). Item header #262338 with #fcfcfc 18px/400/27px
   label, padding 25, radius 5, 77 tall. DARK PANEL => LIGHT COPY.
   ============================================================ */
/* Live band 586: copy starts +50, h2 -> 20 -> p -> 45 -> h2 -> 20 -> p,
   56 under the copy; columns 640 | 60 | 640. */
.zmit .zab-proc.z-section { background: #fff; padding: 50px 0 56px; }
.zab-proc-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 20px; }
.zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 45px; }
.zmit .zab-proc-copy p:last-child { margin-bottom: 0; }
.zab-proc-copy a { color: var(--zab-accent); }
.zab-proc-acc { display: flex; flex-direction: column; gap: 7px; }
.zab-proc-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; }
.zab-proc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 25px; cursor: pointer; list-style: none; min-height: 77px;
    font-size: 18px; font-weight: 400; line-height: 27px; color: #fcfcfc;
}
.zab-proc-q::-webkit-details-marker { display: none; }
/* Live sign: bold #0664ff plus, 15px. */
.zab-proc-sign { position: relative; flex: 0 0 15px; height: 15px; }
.zab-proc-sign::before,
.zab-proc-sign::after { content: ''; position: absolute; background: #0664ff; }
.zab-proc-sign::before { left: 0; top: 6px; width: 15px; height: 3px; }
.zab-proc-sign::after { left: 6px; top: 0; width: 3px; height: 15px; transition: opacity .2s ease; }
.zab-proc-item[open] .zab-proc-sign::after { opacity: 0; }
.zab-proc-a { padding: 0 25px 25px; }
.zmit .zab-proc-a p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #f7f7fc; margin: 0; }
.zab-proc-a a { color: #a9c9ff; }
@media (min-width: 1081px) {
    /* 700 | 700 of live's 1400 row; live's own 60px inner gutter comes from
       the two 30px paddings, so a 50px grid gap reproduces the same rhythm
       inside the narrower house container. */
    .zab-proc-grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
}

/* ============================================================
   S12 RECOGNIZED — live f6fae33: dark rgb(20,20,20) box, radius 10,
   padding 40, 1365 wide. All three are ALREADY CORRECT in the shared sheet
   and are deliberately NOT re-specified here. Only the type and the logo row
   are this page's.
   ============================================================ */
/* Live f6fae33 at 1440: band 315 = 30 top + the 285 box, nothing below.
   Box 1380 wide on live; here it takes the house content box (1340, same x
   as every other section) rather than the shared 1280 exception, because at
   1280 the one-line heading wraps and the band grows 42px.
   Copy 845 wide: h2 30/42/300 one line, lead 16/26.4/300 20 below, logos
   19 below at their intrinsic 130/181/241 x 70, butted (no gap). CTA 354x56,
   padding 20px 30px, #f2f7ff, 16px/500 #141414, radius 8. */
/* Owner 2026-09-30: 30px of white UNDER the dark box too, as live (measured at 1440:
   box foot -> 30 -> the lavender "Why Choose Zazz" band). It was 0, so the box sat
   directly on the next section. */
.zmit .zmit-recognized.z-section { padding: 30px 0; }
.zmit .zmit-recognized .z-container { max-width: 1400px; }
@media (min-width: 1081px) { .zmit .zmit-recognized-band { grid-template-columns: 845px auto; justify-content: space-between; gap: 20px; } }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; margin: 0 0 20px; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 26.4px; color: #f2f7ff; max-width: none; margin: 0 0 19px; }
.zmit-recognized-logos { gap: 0; }
.zmit-recognized-logos img { height: 70px; width: auto; }
.zmit-recognized-cta .z-btn { background: #f2f7ff; color: #141414; border-radius: 8px; padding: 20px 30px; font-size: 16px; font-weight: 500; line-height: 16px; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }
/* ============================================================
   S13 ELEVATE — live cfcd04b: #eff0f7, 30px vertical padding, TWO columns
   658 | 50 gap | 658; right column a 2x2 card grid (318.75px cells, 20px
   gap), cards TRANSPARENT (the band is the fill), 20px padding, 50px icon,
   title 20px/700 #141414, copy 15px/22.5px rgba(20,20,20,.7).
   Live serves the SAME container id on managed-it-services-for-law-firms and
   the measured geometry is identical (copy 658 at x30, cards 658 at x738,
   cells 318.75, gap 20), so that page's values are reused unchanged.
   ============================================================ */
.zmit .zab-elevate.z-section { background: var(--zab-fill); padding: 30px 0; }
.zab-elevate-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
/* Live cfcd04b re-measured 2026-09-25: copy 665 wide (h2 ONE line), h2 22
   above the first paragraph, 27 between paragraphs; card grid starts 20
   below the copy top, cards transparent + unpadded, 60px column gap. */
.zmit .zab-elevate-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0 0 22px; }
.zmit .zab-elevate-copy p { font-size: 18px; font-weight: 400; line-height: 27px; color: var(--zab-ink); margin: 0 0 27px; }
.zmit .zab-elevate-copy p:last-child { margin-bottom: 0; }
.zab-elevate-copy a { color: var(--zab-accent); }
.zab-elevate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; align-content: start; }
.zab-elevate-card { padding: 0; }
.zab-elevate-ico { display: block; margin-bottom: 13px; }
.zab-elevate-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-elevate-card h3 { font-size: 20px; font-weight: 700; line-height: 24px; color: #141414; margin: 0 0 10px; }
.zmit .zab-elevate-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: var(--zab-body); margin: 0; }
.zab-elevate-card a { color: var(--zab-accent); }
@media (min-width: 1081px) {
    .zab-elevate-grid { grid-template-columns: 665px 1fr; gap: 50px; align-items: start; }
    .zab-elevate-cards { gap: 100px 60px; margin-top: 20px; }
}

/* ============================================================
   S14 TESTIMONIALS — 10 slides; heading 34px/300/44.2px LEFT.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0 31px; }
.zmit-testi h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 50px; }
/* Live 6a57162 at 1440 (band 507): slide spans the full content box, 352
   tall, radius 5, padding 80, content TOP-aligned, live's 102.29deg
   gradient. Name 22/28.6/600, 2px rule, lead 34/47.6/600, quote 18/29.7,
   all #14142b. Nav: 38x38 #e9eaf2 squares (radius on the inner side)
   overhanging the slide edges by 15px, vertically centred. */
.zmit-testi-carousel { position: relative; display: block; }
.zmit-testi-card {
    border-radius: 5px; padding: 80px; min-height: 352px; align-items: flex-start;
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
}
.zmit .zmit-testi-role { font-size: 22px; font-weight: 600; line-height: 28.6px; margin: 0; color: #14142b; }
.zmit-testi-rule { margin: 3px 0 12px; }
.zmit .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; color: #14142b; margin: 0 0 10px; }
.zmit .zmit-testi-quote { font-size: 18px; line-height: 29.7px; color: #14142b; }
.zmit .zmit-testi-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; min-width: 38px; border: 0; background: #e9eaf2; color: #000; font-size: 22px;
}
.zmit .zmit-testi-nav.prev { left: -15px; border-radius: 0 5px 5px 0; }
.zmit .zmit-testi-nav.next { right: -15px; border-radius: 5px 0 0 5px; }
.zmit .zmit-testi-nav:hover { background: var(--zab-accent); color: #fff; }
@media (max-width: 680px) {
    .zmit-testi-card { padding: 40px 24px; min-height: 0; }
    .zmit .zmit-testi-lead { font-size: 22px; line-height: 1.32; }
    .zmit .zmit-testi-nav.prev { left: -8px; }
    .zmit .zmit-testi-nav.next { right: -8px; }
}
/* ============================================================
   S15 MSSP OVERVIEW — live 7b280f8: near-white #fcfcfc, TWO columns
   658 | 50 | 658. Left: h2 34px/400/44.2px #14142b (133 tall), 40px stack
   gap, 16px/26.4px copy, 402x46 accent button. Right: 658x400 photo,
   radius 10, cover, vertically centred. Same shape as the law-firms
   .zab-empower band, so its class set is reused.
   ============================================================ */
.zmit .zab-empower.z-section { background: #fcfcfc; padding: 30px 0; }
.zab-empower-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.zmit .zab-empower-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0 0 40px; }
.zmit .zab-empower-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 26px; }
.zab-empower-copy a { color: var(--zab-accent); }
.zmit .zab-empower-copy .zab-btn { margin-top: 14px; }
.zab-empower-media img { display: block; width: 100%; height: auto; aspect-ratio: 658 / 400; object-fit: cover; border-radius: 10px; }
@media (min-width: 1081px) {
    /* align-items START, not center: live's right column is 707 tall with the
       400-tall photo pinned to its TOP (73e27cd shares the column's own y),
       so centring it drops the photo ~150px and the sideBySide test fails on
       the top comparison. */
    /* Re-shot in view 2026-09-25: live centres the 400-tall photo on the
       767-tall copy column (photo top at +184). */
    .zab-empower-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
}

/* ============================================================
   S17 SUCCESS STORIES — card + 50px left-aligned brand-logo treatment
   (approved Family A rule). Heading 29px/300/37.7px LEFT on this page.
   ============================================================ */
/* Live 9ca9c81 at 1440 (band 717): h2 at +30, grid 20 below. Card #eff0f7,
   radius 5, NO inset: featured image full-bleed 250 tall, then logo 20
   below (50 tall), title 22 below (18/25.2/700), excerpt 18 below
   (14/23.1, 5px further in than the title), ~49 under the tallest excerpt.
   Card hover lift from the shared sheet is not on live. */
.zmit .zmit-stories.z-section { padding: 30px 0 31px; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; margin-bottom: 20px; }
.zmit .zmit-story { background: #eff0f7; border-radius: 5px; overflow: hidden; --zs-inset: 0px; padding: 0; box-shadow: none; transition: background-color .3s ease, transform .4s ease; }
/* Owner 2026-09-30: live's story card DOES hover (loop-12066, read off live's inline CSS):
   the fill turns #CDE9FF and the card lifts 15px (translateY -15). */
.zmit .zmit-story:hover,
.zmit .zmit-story:focus-visible { box-shadow: none; background: #cde9ff; transform: translateY(-15px); }
@media (prefers-reduced-motion: reduce) {
    .zmit .zmit-story:hover, .zmit .zmit-story:focus-visible { transform: none; }
}
.zmit .zmit-story-img { border-radius: 0; }
.zmit .zmit-story-img img { height: 250px; border-radius: 0; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 22px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 250px;
    object-fit: contain; object-position: left center;
}
.zmit .zmit-story .body { padding: 20px 25px 49px; }
.zmit .zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 25.2px; margin: 0 0 18px; color: var(--zab-ink); }
.zmit .zmit-story p { font-size: 14px; line-height: 23.1px; color: var(--zab-ink); padding: 0 5px; }
/* ============================================================
   S18 ARTICLES — heading 29px/300 on THIS page (measured); cards are
   image + date + title, NO excerpt (owner ruling) and NO category (live
   ships none here).
   ============================================================ */
.zmit .zmit-articles.z-section { background: #fff; padding: 30px 0; }
/* Live cd91406 (band 572): grid at +88, image 270 with top-only radius,
   date 9 below (14px/500 accent, 10px in), title 10 below, 86 under it. */
.zmit-articles-head { margin-bottom: 20px; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; }
.zmit-articles-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; color: #141414;
    border-bottom: 1px solid #141414; padding-bottom: 5px;
}
.zmit-articles-more:hover { color: var(--zab-accent); border-color: var(--zab-accent); }
.zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.zmit-articles-grid { gap: 30px; }
.zmit-article { border-radius: 0; overflow: visible; text-decoration: none; }
.zmit .zmit-article-img { border-radius: 10px 10px 0 0; overflow: hidden; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article-img img { height: 270px; }
.zmit .zmit-article .body { padding: 9px 10px 55px; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 500; line-height: 23px; color: var(--zab-accent); margin: 0 0 10px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 600; line-height: 28.8px; color: var(--zab-ink); margin: 0; }

/* ============================================================
   S19 INDUSTRIES — live 7f62b53: band #f7f7fc, 70px vertical padding.
   Heading 34.7px/400 #1f1f1f centred; lead 15.5px/400/25px centred (728
   wide). Flip cards 260x270, radius 10, FIVE per row 15px apart, front
   padding 12px 27px, back padding 11px. The 3D flip mechanism itself is
   already in the shared sheet (.zmit-ind-inner / -front / -back) — only
   this band's sizing and type are set here.
   ============================================================ */
.zmit .zmit-industries { background: #f7f7fc; }
.zmit .zmit-industries.z-section { padding: 70px 0; }
/* Re-measured 2026-09-25 (band 867): heading ONE line across the box, lead
   728 centred, cards at +242; cards flex-wrap CENTRED (4 on row two sit in
   the middle), 15 gap; front = white 75px icon tile (radius 16, padding 12)
   + title 27 below, the pair vertically centred in the card. */
.zmit-industries-head { text-align: center; max-width: none; margin: 0 auto 57px; }
.zmit .zmit-industries-head h2 { font-size: 34.7px; font-weight: 400; line-height: 45px; color: #1f1f1f; margin: 0 0 20px; }
.zmit .zmit-industries-head p.z-lead { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; margin: 0 auto; max-width: 728px; }
.zmit .zmit-industries-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.zmit .zmit-industries-grid > .zmit-ind-card { flex: 0 0 calc((100% - 60px) / 5); }
.zmit .zmit-industries .zmit-ind-card { min-height: 270px; border-radius: 10px; }
.zmit .zmit-ind-front { background: #f1f1f7; border-radius: 10px; padding: 12px 27px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.zmit .zmit-ind-front .zmit-ind-ic { display: inline-flex; align-items: center; justify-content: center; width: 75px; height: 77px; background: #fff; border-radius: 16px; padding: 12px; margin: 0 0 27px; }
.zmit-ind-back { background: #fff; border-radius: 10px; padding: 11px; }
.zmit .zmit-ind-front h3 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #111; }
.zmit .zmit-ind-back h3 { font-size: 13px; font-weight: 700; line-height: 1.3; color: #1c1a33; }
.zmit .zmit-ind-back li { font-size: 11.5px; line-height: 1.4; color: #333; }
.zmit-ind-back a { color: var(--zab-accent); }
.zmit .zmit-ind-ic img { width: 51px; height: 51px; object-fit: contain; }

/* ============================================================
   S20 FAQ — #eff0f7 band, 30px padding, two columns split 12 / 12.
   NEVER a two-value padding shorthand here (it zeroes the shared 22px
   sides).
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 30px 0; }
.zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 30px; }
/* Live: question 16px/400 #fcfcfc (text 25 in), answer #d9dbe9 20 in. */
.zmit .zmit-faq-q { padding: 25px 25px; font-size: 16px; line-height: 27px; font-weight: 400; color: #fcfcfc; }
.zmit .zmit-faq-q span:first-child { font-weight: 400; }
.zmit .zmit-faq-a-inner p { color: rgb(217, 219, 233); font-size: 16px; line-height: 25.6px; }
.zmit-faq-item { margin-bottom: 7px; }
/* Live answer: 20 in from the left, text box as wide as the item allows
   (4 lines on item 1, open item 225 tall). */
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 0 40px 20px; }
.zmit .zmit-faq-a-inner p { margin: 0; }
.zmit-faq-list { column-gap: 30px; padding-right: 0; }
/* Live ships two explicit accordion widgets split 12 / 12 (39fe936 and
   2737bc7); the forced break reproduces that split. Gated to DESKTOP only:
   below 1081 live stacks the two widgets into one column (measured at 768 and
   1024), and with column-count:1 a forced break would still create a second
   column. */
@media (min-width: 1081px) {
    .zmit-faq-item:nth-child(12) { break-after: column; }
}

/* ============================================================
   S21 FINAL CTA — live e3a91e7: no band fill of its own (transparent to
   walk depth 8), copy column left with the accent CTA and a 611x583
   consultant figure right.
   The SHARED sheet absolutely positions this figure for the REFERENCE band
   (position:absolute; right:56px; bottom:0; height:320px). This page's band
   is a two-column row, so that MUST be reset here — otherwise the image
   leaves its cell, the cell collapses to 0 height, and it covers the copy.
   ============================================================ */
/* Re-measured IN VIEW 2026-09-25 (the earlier "transparent" reading was the
   Seraphinite deferred-paint trap): band 569 = 150 above the row + the 339
   painted row + 80 below. Row: live's 102.29deg gradient, radius 5; copy
   column 690 at padding 50 (h2 33.05/42.97/600, 2 lines); figure 500x477
   object-fit fill, bottom-aligned, overhanging the row top by 138 — the row
   height is driven by the COPY, never by the figure. */
.zmit .zmit-final.z-section { margin: 0; padding: 150px 0 80px; background: #fff; }
.zmit .zmit-final-banner {
    background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px; padding: 0;
    display: flex; align-items: stretch; justify-content: space-between; gap: 0;
}
.zmit .zmit-final-copy { flex: 0 1 690px; max-width: 690px; padding: 50px; min-height: 339px; display: flex; flex-direction: column; justify-content: center; }
.zmit .zmit-final-copy h2 { font-size: 33.05px; font-weight: 600; line-height: 42.97px; color: var(--zab-ink); margin: 0 0 15px; max-width: 590px; }
.zmit .zmit-final-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); max-width: 590px; margin: 0 0 25px; }
.zmit .zmit-final-copy .zab-btn-final { align-self: flex-start; border-radius: 5px; font-size: 15.38px; font-weight: 600; }
.zmit .zmit-final-media { flex: 0 0 500px; align-self: flex-end; margin-top: -138px; position: relative; }
.zmit .zmit-final-media img {
    position: static; right: auto; bottom: auto;
    display: block; width: 500px; max-width: 100%; height: auto; aspect-ratio: 500 / 477;
    margin: 0; object-fit: fill;
}
/* ============================================================
   S22 REQUEST A CONSULTATION — photo-backed band, white 620px form card
   (owner-approved narrower card, no dead space).
   Heading 33.89px/300/43px light on the photo.
   ============================================================ */
.zmit-contact {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
    background-color: #1f4fd6;
}
/* Live 7572440 at 1440 (band 857): h2 at +50, lead 20 below (1242 wide, one
   wrap), card 19 below: 966 wide, padding 30, radius 8, NO shadow; title
   25px, form 30 below it; submit 88 below the textarea; 51 under the card.
   OWNER 2026-09-25 (match live on everything not in the keep list): the
   old 620px narrower card is retired in favour of live's 966. */
.zmit .zmit-contact.z-section { padding: 50px 0 51px; }
.zmit-contact .zmit-contact-head { max-width: 1242px; margin: 0 auto 19px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; margin: 0 0 20px; }
.zmit-contact-head p { font-size: 16px; line-height: 26.4px; color: #fcfcfc; max-width: none; margin: 0 auto; }
.zmit .zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 966px; box-shadow: none; }
.zmit-contact-form h3 { font-size: 25px; font-weight: 400; line-height: 32.5px; color: #6e7191; margin: 0 0 30px; }
.zmit-contact-form .zmit-hsform .hsfc-NavigationRow { margin-top: 80px !important; }
/* ============================================================
   S23 PRE-FOOTER BAND — live a8ff3b4: #000, 80px vertical padding, copy
   column 770 at x13 and the two buttons 280 wide at x1133.
   DARK BAND => LIGHT COPY.
   ============================================================ */
.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: 600; 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) {
    /* Live band box is 324 but its footer overlaps the last 33px, so the
       visible black is 291 — matched here (80 + 136 + 75). */
    .zmit .zmit-insights.z-section { padding: 80px 0 75px; }
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 225px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 50px; width: 225px; object-fit: contain; object-position: left center; }
    .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. */
        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)
   ============================================================ */
@media (max-width: 1080px) {
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* The SHARED sheet never stacks .zmit-stats-layout, so without this the
       copy | counters row stays 2-col and the counter column overflows the
       viewport at 375 (measured: grid at left 306, right 401 on a 375 box).
       body{overflow-x:hidden} hides that from scrollWidth — it was found by
       measuring element widths, not by reading scrollWidth. */
    .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; }
    .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-certified h2 { font-size: 34px; line-height: 1.3; }
    .zab-certified-badges { grid-template-columns: repeat(2, 1fr); }
    .zab-trust-panel { grid-template-columns: 1fr 1fr; }
    .zmit .zab-trust-eyebrow { font-size: 26px; line-height: 1.3; margin-bottom: 24px; }
    .zmit .zab-stack-head h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-nist h2 { font-size: 30px; line-height: 1.3; }
    .zmit .zab-proc-copy h2 { font-size: 25px; line-height: 1.3; }
    .zmit .zab-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-elevate-copy p { font-size: 16px; line-height: 25px; }
    .zmit .zmit-industries-grid > .zmit-ind-card { flex-basis: calc((100% - 30px) / 3); }
    .zmit .zmit-final.z-section { padding: 40px 0; }
    .zmit .zmit-final-banner { flex-direction: column; align-items: stretch; }
    .zmit .zmit-final-copy { max-width: none; flex: none; min-height: 0; padding: 40px 30px; }
    .zmit .zmit-final-media { align-self: center; margin-top: 0; flex: none; }
    .zmit .zmit-final-media img { width: 400px; }
}

/* Live's recognition band at 768: the inherited 36px gap wraps the logo row
   and inflates the band by ~106px. Kill the column gap and give the row its
   own 20px row-gap instead. */
@media (max-width: 1080px) {
    .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; }
}

/* ============================================================
   PHONE (<= 680)
   ============================================================ */
@media (max-width: 680px) {
    .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
    .zmit-services-grid { grid-template-columns: 1fr; }
    .zmit .zmit-services-head h2.z-eyebrow { font-size: 14px; }
    .zmit .zab-svc-lead { font-size: 24px; line-height: 1.3; }
    .zmit .zab-cmp-head h2 { font-size: 22px; }
    .zmit .zab-certified.z-section { padding: 40px 0; }
    .zmit .zab-certified h2 { font-size: 26px; }
    .zab-certified-badges { grid-template-columns: 1fr; margin-top: 28px; }
    .zab-cert-box { min-height: 0; }
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { padding: 24px 20px; }
    .zmit .zab-trust-eyebrow { font-size: 22px; }
    .zmit .zab-stack-head h2 { font-size: 22px; }
    .zab-stack-grid { grid-template-columns: 1fr; }
    .zmit .zab-nist h2 { font-size: 22px; line-height: 1.3; }
    .zab-nist-letter { font-size: 60px; line-height: 60px; }
    .zmit .zab-proc-copy h2 { font-size: 22px; }
    .zmit .zab-elevate-copy h2,
    .zmit .zab-empower-copy h2 { font-size: 22px; }
    .zab-elevate-cards { grid-template-columns: 1fr; gap: 20px; }
    .zab-elevate-card { padding: 16px 0; }
    .zmit .zmit-industries-grid > .zmit-ind-card { flex-basis: calc((100% - 15px) / 2); }
    .zmit .zmit-industries.z-section { padding: 40px 0; }
    .zmit .zmit-industries-head h2 { font-size: 24px; }
    .zmit-final-copy h2 { font-size: 26px; line-height: 1.3; }
    .zmit .zmit-final-media img { width: 300px; }
    .zmit .zmit-final-copy { padding: 30px 20px; }
    /* Live's recognition CTA overflows its box at 375 unless the label is
       allowed to wrap. */
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
    /* At 375 BOTH bounds must be released on the review logos — max-height
       beats height, so leaving it set keeps the row too tall. */
    .zmit-recognized-logos img { height: auto; max-height: 40px; max-width: 100%; }
}
.zmit .zmit-faq-q .sign { font-size: 28px; font-weight: 600; color: #0664ff; }

/* ============================================================
   AUDIT FIXES 2026-09-29 — the it-managed-services checklist re-run against
   live WP (managed-security-service-provider-wp), measured at 375 / 768 /
   1024 / 1180 / 1440. Page-local only. Each block names what it matches.
   ============================================================ */

/* INDUSTRIES — owner 2026-09-29: the it-managed-services cards exactly — the same 16
   industries, LINKED, no flip, and the same tile: every card a uniform 250 tall with the
   lavender front filling it (the old 270 card with a 200 front left a pale strip under
   the front, ss4), 75px white icon tile (radius 16, 44px icon), icon + title centred in
   the tile with a 20px gap. Layout as it-managed-services: centred 256px cards on
   desktop, 2 columns on tablet, 1 on phone. */
.zmit .zmit-industries .zmit-ind-card { min-height: 250px; }
.zmit .zmit-industries .zmit-ind-card .zmit-ind-inner { min-height: 250px; height: 100%; }
.zmit .zmit-industries .zmit-ind-card .zmit-ind-front {
    min-height: 250px; height: 100%; justify-content: center; align-items: flex-start; gap: 20px; padding: 30px 24px;
}
.zmit .zmit-industries .zmit-ind-front .zmit-ind-ic { width: 75px; height: 75px; flex: 0 0 75px; border-radius: 16px; padding: 0; margin: 0; }
.zmit .zmit-industries .zmit-ind-ic img { width: 44px; height: 44px; }
@media (max-width: 1080px) {
    .zmit .zmit-industries-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .zmit .zmit-industries-grid > .zmit-ind-card { flex: none; }
}
@media (max-width: 680px) {
    .zmit .zmit-industries-grid { grid-template-columns: 1fr; }
}
.zmit .zmit-industries .zmit-ind-card { position: relative; }
.zmit .zmit-industries .zmit-ind-card .z-explore { position: absolute; inset: 0; z-index: 3; }
.zmit .zmit-industries .zmit-ind-card:hover .zmit-ind-inner,
.zmit .zmit-industries .zmit-ind-card:focus-within .zmit-ind-inner,
.zmit .zmit-industries .zmit-ind-card.is-flipped .zmit-ind-inner { transform: none; }
.zmit .zmit-industries .zmit-ind-card.has-link { transition: transform .2s ease, box-shadow .2s ease; }
.zmit .zmit-industries .zmit-ind-card.has-link:hover,
.zmit .zmit-industries .zmit-ind-card.has-link:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 20, 43, .10); }
@media (prefers-reduced-motion: reduce) {
    .zmit .zmit-industries .zmit-ind-card.has-link:hover,
    .zmit .zmit-industries .zmit-ind-card.has-link:focus-within { transform: none; }
}

/* TECH STACK — live 2d8ae86. Mouse hover = #EDF4FF with black text (live's
   data-touch-mode="false" rule); the rail never scrolls sideways. */
.zmit .zab-stack-tab:hover { background: #edf4ff; color: #000; }
.zmit .zab-stack-tab.is-active,
.zmit .zab-stack-tab.is-active:hover { background: var(--zab-accent); color: #fff; }
@media (min-width: 681px) {
    /* Live's rail scrollbar is a 5px #7F8EA7 thumb — a default-width bar eats ~10px
       of the tab column (tabs 121 wide at 768 vs live's 132). */
    .zab-stack-rail { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #7f8ea7 transparent; }
    .zab-stack-rail::-webkit-scrollbar { width: 5px; }
    .zab-stack-rail::-webkit-scrollbar-thumb { background: #7f8ea7; border-radius: 10px; }
}
/* TABLET (681-1080): live keeps rail | cards side by side (rail 22%, measured at 768
   and 1024) with the rail scrolling inside 450. Logo scales 36 -> 52 as on live. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zab-stack-tabs { grid-template-columns: 22% minmax(0, 1fr); gap: 0; height: 500px; border-top: 1px solid #dcdcdc; align-items: stretch; }
    .zab-stack-rail { height: 499px; overflow-y: auto; padding: 50px 15px 0 0; border-right: 1px solid #dcdcdc; }
    .zab-stack-panels { padding: 50px 0 0 30px; min-width: 0; }
    .zab-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
    .zab-stack-card { gap: 16px; min-height: 76px; min-width: 0; }
    .zab-stack-card img { flex: 0 0 auto; width: clamp(36px, 5vw, 52px); height: clamp(36px, 5vw, 52px); }
    .zmit .zab-stack-card h3 { font-size: 16px; line-height: 20.8px; }
}
/* PHONE (<=680, and phones turned landscape): live's accordion — each category bar
   with its tools directly beneath (the inline `order` interleaves them once the rail
   and panels turn display:contents). White rows, BLUE when active or tapped (live's
   touch-mode hover), tools 2-up with a 26px logo over a 16px name. */
@media (max-width: 680px), (orientation: landscape) and (max-height: 500px) {
    .zab-stack-tabs { display: flex; flex-direction: column; gap: 10px; height: auto; border-top: 0; }
    .zab-stack-rail, .zab-stack-panels { display: contents; }
    .zmit .zab-stack-tab { width: 100%; min-height: 56px; padding: 20px; border-radius: 5px; background: #fff; color: #141414; }
    .zmit .zab-stack-tab:hover,
    .zmit .zab-stack-tab.is-active { background: var(--zab-accent); color: #fff; }
    .zab-stack-panel { width: 100%; }
    .zab-stack-panel[hidden] { display: none; }
    .zab-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .zab-stack-card { flex-direction: column; justify-content: center; text-align: center; gap: 13px; padding: 15px; min-height: 0; min-width: 0; }
    .zab-stack-card img { flex: 0 0 auto; width: 26px; height: 26px; }
    .zmit .zab-stack-card h3 { font-size: 16px; line-height: 20.8px; }
}

/* VALUE PANEL (e5d8633) — stacked below desktop as live (1 column at 768 and 1024,
   not 2), cells 32px 25px with content-driven height, and live's white hairline
   between the stacked cells. Desktop keeps its border-right dividers. */
@media (max-width: 1080px) {
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { padding: 32px 25px; min-height: 0; border-right: 0; }
    /* Owner 2026-09-30: stronger and UNIFORM on tablet and phone. A 1px hairline lands
       on fractional device pixels on scaled screens (read as 0.8px), so some lines drew
       faint and others bright; 2px renders the same weight everywhere. */
    .zab-trust-cell:not(:last-child) { border-bottom: 2px solid rgba(255, 255, 255, .85); }
}

/* NIST — below desktop every item puts the icon LEFT and the letter RIGHT, closed ones
   100 tall (70px disc at 30/15, letter 30 from the right), the open one with a 60px
   disc at 20/15. Only the open item shows its body. Tablet = live's 2-column grid
   (336 at 768, 464 at 1024, 20 gap), closed items centred beside the open one. */
@media (max-width: 1080px) {
    .zmit .zab-nist-tab { justify-content: space-between; padding: 15px 30px; }
    .zmit .zab-nist-item.is-open .zab-nist-tab { padding: 15px 20px; }
    .zab-nist-item.is-open .zab-nist-ico { flex-basis: 60px; width: 60px; height: 60px; }
    .zab-nist-body { display: none; }
    .zab-nist-item.is-open .zab-nist-body { display: block; }
}
/* TABLET — owner 2026-09-30: ONE item per line (live's 2-column zigzag grid, with the
   open item beside a vertically-centred closed one, read as broken — ss3). */
@media (min-width: 681px) and (max-width: 1080px) {
    .zab-nist-row { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    .zab-nist-letter { font-size: 80px; line-height: 70px; }
}
@media (max-width: 680px) {
    .zab-nist-letter { line-height: 70px; }
}

/* COMPARE ACCORDION (27668a9) — owner 2026-09-29 (ss5 vs ss6): the it-managed-services
   treatment, which is also live's: each item a BOXED card — the WP gradient (a 70% white
   veil over #ecf1eb -> #aec8fd -> #84c3fc), radius 10, a faint outline — with a hairline
   under the header, then the two full-width bands #eff0f7 / #f9fcff, a GREEN CHECK on
   the Zazz row and a RED X on the "others" row, labels BLUE 18/500, copy dark (the
   second band's copy 12px, as live). */
.zmit .zab-cmp-acc .zab-acc-item {
    background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border: 1px solid #e4e7f1; border-radius: 10px; margin-bottom: 15px; overflow: hidden;
}
.zmit .zab-cmp-acc .zab-acc-q { padding: 18px 22px; font-size: 16px; font-weight: 600; line-height: 1.4; color: #1f2124; }
.zmit .zab-cmp-acc .zab-acc-item[open] .zab-acc-q { border-bottom: 1px solid rgba(20, 20, 43, .12); }
.zmit .zab-cmp-acc .zab-acc-a { padding: 0; }
.zmit .zab-cmp-acc .zab-acc-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px; margin: 0; }
.zmit .zab-cmp-acc .zab-acc-row:nth-of-type(1) { background: #eff0f7; }
.zmit .zab-cmp-acc .zab-acc-row:nth-of-type(2) { background: #f9fcff; }
.zmit .zab-cmp-acc .zab-acc-ico { flex: 0 0 22px; margin-top: 1px; }
.zmit .zab-cmp-acc .zab-acc-ico svg { display: block; width: 22px; height: 22px; }
.zmit .zab-cmp-acc .zab-acc-row .zab-acc-label { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--zab-accent); margin: 0 0 6px; }  /* was an h3 - a label now (no outline noise), same look */
.zmit .zab-cmp-acc .zab-acc-row p { font-size: 14px; line-height: 1.55; color: var(--zab-ink); }
.zmit .zab-cmp-acc .zab-acc-row:nth-of-type(2) p { font-size: 12px; }

/* SERVICES — live is 3-up on landscape tablets (1081-1200, 347px at 1180). */
@media (min-width: 1081px) and (max-width: 1200px) {
    .zmit .zmit-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}
/* SERVICES on phones turned landscape — one column, as live (ss9). The shared sheet
   forces 2-up at 681-1080 with !important, so this page-local override needs it too;
   it is scoped to short landscape screens only, so tablets keep their 2-up. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1080px) {
    /* ...and NOT full width: live's card sits centred at ~70% of the screen (owner's
       landscape-phone screenshot), so the single column is capped and centred. */
    .zmit .zmit-services-grid { grid-template-columns: minmax(0, 460px) !important; justify-content: center; }
}

/* FAQ — radius 5 as live at every width; TABLET = one full-width column (live stacks
   its two widgets at 768 and 1024), answers 14/22.4; PHONE questions 14px. */
.zmit .zmit-faq-item { border-radius: 5px; }
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-faq-list { column-count: 1; }
}
@media (max-width: 1080px) {
    .zmit .zmit-faq-a-inner p { font-size: 14px; line-height: 22.4px; }
}
@media (max-width: 680px) {
    .zmit .zmit-faq-q { font-size: 14px; line-height: 21px; }
}

/* ARTICLES — live's JetEngine listing 25421 (the same template as it-managed-services):
   the WHOLE card tints rgba(1,97,255,.08) on hover and the title stays DARK; the image
   is clipped by the card's 10px radius (square bottom edge); img -> 10 -> date -> 10 ->
   title -> 20. The band's bottom padding takes the 35px the card no longer carries, so
   the band height is unchanged. TABLET = 2 columns (live at 768 and 1024). */
.zmit .zmit-articles.z-section { padding: 30px 0 65px; }
.zmit .zmit-articles .zmit-article { border-radius: 10px; overflow: hidden; transition: background .3s ease; }
.zmit .zmit-articles .zmit-article:hover,
.zmit .zmit-articles .zmit-article:focus-within,
.zmit .zmit-articles .zmit-article:active { background: rgba(1, 97, 255, .08); }
.zmit .zmit-articles .zmit-article:hover h3 { color: var(--zab-ink); }
.zmit .zmit-articles .zmit-article-img { border-radius: 0; }
.zmit .zmit-articles .zmit-article .body { padding: 10px 10px 20px; }
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* RECOGNIZED logos on phone — live keeps them 70px tall at natural width (130 / 181
   / 241), stacked and centred; the old 40px cap made them small. */
@media (max-width: 680px) {
    .zmit .zmit-recognized-logos { flex-direction: column; align-items: center; row-gap: 16px; }
    .zmit .zmit-recognized-logos img { height: 70px; max-height: none; width: auto; max-width: 100%; }
}

/* PRE-FOOTER on phone — the shared grid kept copy | buttons side by side and crushed
   the copy to ~120px. Stacked: logo, barred tagline, copy, full-width buttons. */
@media (max-width: 680px) {
    .zmit .zmit-insights.z-section { padding: 50px 0; }
    .zmit .zmit-insights-grid { grid-template-columns: 1fr; gap: 40px; }
    .zmit .zmit-insights-copy { grid-template-columns: 1fr; row-gap: 20px; }
    .zmit .zmit-insights-logo { height: 50px; width: auto; max-width: 100%; }
    .zmit .zmit-insights-copy p.zmit-insights-title { font-size: 16px; line-height: 22px; padding-left: 10px; margin-left: 0; max-width: none; }
    .zmit .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 14.6px; line-height: 22px; max-width: none; margin: 0; }
    .zmit .zmit-insights-btns { flex-direction: column; gap: 17px; }
    .zmit .zmit-insights-btns a { width: 100%; padding: 13px 20px; }
}

/* HERO FORM — owner 2026-09-29: position it exactly like 1password-support-services
   (measured on live at 1440 and 1200): the card STRETCHES with the banner, top 40px
   into it (tucked under the header, never dropped) and its foot 10px past the logo row
   (30px above the strip's lower edge) at every desktop width — card height is always
   banner height + 55. It was align-self:start, so on this page's taller banner the
   compact card stopped mid-logo row (ss1). */
@media (min-width: 1081px) {
    .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
    .zmit .zmit-form-card { height: 100%; }
}

/* CERTIFICATIONS on phone (and phones turned landscape) — live stacks each tile: badge
   centred on top, then the title (20px) and description (12px) centred; one column,
   12px apart, tile padding 24px 12px (ss7 / ss10). */
@media (max-width: 680px), (orientation: landscape) and (max-height: 500px) {
    /* Measured on live at 375: tile padding 15 10 20, the badge at its full 134x134,
       7 to the title (20/600/36 #020101), 5 to the description (12/18 #5e5e5e),
       12 between tiles. Live's tiles are 355 wide because its section runs a 10px
       gutter; the house 30px gutter is kept so the band lines up with every other. */
    .zab-certified-badges { grid-template-columns: 1fr; gap: 12px; }
    .zab-cert-box { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; padding: 15px 10px 20px; min-height: 0; }
    .zab-cert-box img { flex: 0 0 auto; width: 134px; height: 134px; }
    .zmit .zab-cert-box h3 { font-size: 20px; font-weight: 600; line-height: 36px; margin: 0 0 5px; }
    .zmit .zab-cert-box p { font-size: 12px; line-height: 18px; }
}

/* NIST on phones turned landscape — the phone layout (one column), not the tablet
   grid (ss12 vs ss13). */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1080px) {
    /* stretch: the tablet grid's align-items:center would otherwise shrink-wrap and
       centre each stacked item. */
    .zab-nist-row { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    .zab-nist-letter { font-size: 60px; line-height: 70px; }
}

/* RECOGNIZED band on tablet — live is ONE column (measured at 768: heading full width,
   the three logos in a row at 130 / 181 / 241, the button below them, left-aligned).
   The shared two-column copy | CTA grid squeezed the copy and wrapped the logos into a
   column (ss15). */
/* Up to 1200 (live's tablet_extra): on a landscape tablet the desktop 845px copy
   column + the CTA overflowed the box and cut the button off (owner ss, 1180). */
@media (max-width: 1200px) {
    .zmit .zmit-recognized-band { grid-template-columns: 1fr; gap: 28px; }
    .zmit .zmit-recognized-cta { justify-self: start; }
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; }
}
/* Above 1200 the copy column may shrink below 845 so narrow desktops can't push the
   CTA out of the box either. */
@media (min-width: 1201px) {
    .zmit .zmit-recognized-band { grid-template-columns: minmax(0, 845px) auto; }
}
/* Owner 2026-09-30 (ss2): more breathing room inside the dark box on tablet and desktop
   — was the shared 40px all round, so the CTA sat tight to the right edge. */
@media (min-width: 681px) {
    .zmit .zmit-recognized-band { padding: 50px 60px; }
}

/* CONSULTANT band ("Recognized Among Leading…", live component 8864 — the same one as
   it-managed-services) on TABLET: a ROW, as live (measured at 768: copy 315 of the 693
   row, photo 358x342 on the right, bottom-aligned, gradient across the row). Phone keeps
   the stack. */
@media (min-width: 681px) and (max-width: 1080px) {
    .zmit .zmit-final-banner { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 20px; }
    .zmit .zmit-final-copy { flex: 0 0 46%; max-width: 46%; min-height: 0; padding: 30px; }
    .zmit .zmit-final-media { flex: 1 1 auto; align-self: flex-end; margin: 0; min-width: 0; }
    .zmit .zmit-final-media img { width: 100%; max-width: 100%; height: auto; margin: 0; }
}
/* ...but phones turned LANDSCAPE stack it, as live (owner's screenshots): copy and CTA
   across the full band, the figure centred beneath, bottom of the band. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1080px) {
    .zmit .zmit-final-banner { flex-direction: column; align-items: stretch; gap: 0; }
    .zmit .zmit-final-copy { flex: none; max-width: none; padding: 30px; }
    .zmit .zmit-final-media { flex: none; align-self: center; width: auto; margin: 0; }
    .zmit .zmit-final-media img { width: 300px; max-width: 100%; height: auto; }
}

/* CONSULTANT band on PHONE — owner 2026-09-30 (ss7), measured on live at 375: heading
   33.05/42.97/600, copy 14/25.2, the CTA spanning the copy column, and the figure the
   full width of the band 10px under the CTA, sitting on the band's foot. */
@media (max-width: 680px) {
    .zmit .zmit-final-copy { padding: 30px 20px 10px; }
    .zmit .zmit-final-copy h2 { font-size: 33.05px; line-height: 42.97px; }
    .zmit .zmit-final-copy p { font-size: 14px; line-height: 25.2px; }
    .zmit .zmit-final-copy .zab-btn-final { align-self: stretch; justify-content: center; }
    .zmit .zmit-final-media { align-self: stretch; width: 100%; max-width: none; margin: 0; }
    .zmit .zmit-final-media img { width: 100%; max-width: 100%; height: auto; margin: 0; }
}

/* ticon DESKTOP: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (min-width: 1080.02px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* ticon TABLET: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (min-width: 767.02px) and (max-width: 1080.98px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* ticon MOBILE: dark advantage panel - icon centred in its card, card heading
   underlined, body copy regular 400 (owner 2026-10-01, matches the
   mobile-app-development-company .zab-adv4 reference). Dark panel only. */
@media (max-width: 767.98px) {
    .zmit .zab-trust:not(.v-split) .zab-trust-cell h3 { text-decoration: underline; }
    .zmit .zab-trust:not(.v-split) .zab-trust-cell p { font-weight: 400; }
}

/* plink (owner 2026-10-06): internal links inside the process/approach
   answers look and behave like the FAQ links (reference: it-managed-services
   FAQ, .zmit-faq-a-inner a): #85bcff, weight 500, no underline, and the SAME
   on hover / focus / visited. Scoped to the answer only - the copy column,
   the FAQ and every other link on the page keep their own colour. */
.zmit .zab-proc-a a,
.zmit .zab-proc-a a:hover,
.zmit .zab-proc-a a:focus,
.zmit .zab-proc-a a:visited { color: #85bcff; font-weight: 500; text-decoration: none; }

/* ---------------------------------------------------------------------------
   PRE-FOOTER, TABLET (681-1080) - owner, 2026-10-09. Match the reference
   pages (it-staff-augmentation-services, beyondtrust-services): the 183x41
   logo sits BESIDE a 16px title carrying the 2px left rule, and the lead runs
   full width under both at 14/19.6. The inherited 24/31 title wrapped to 5-7
   lines in a narrow column (and an auto-width logo could collapse to 0).
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-insights .zmit-insights-copy {
        display: grid; grid-template-columns: 183px minmax(0, 1fr);
        column-gap: 20px; row-gap: 20px; align-items: center;
    }
    .zmit .zmit-insights .zmit-insights-logo {
        grid-column: 1; grid-row: 1; width: 183px; height: 41px; max-width: none;
        object-fit: contain; object-position: left center; margin: 0;
    }
    .zmit .zmit-insights .zmit-insights-copy p.zmit-insights-title {
        grid-column: 2; grid-row: 1; margin: 0; max-width: none;
        padding: 0 0 0 10px; border-left: 2px solid #fff;
        font-size: 16px; line-height: 20px; font-weight: 400;
    }
    .zmit .zmit-insights .zmit-insights-copy > p:not(.zmit-insights-title) {
        grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: none;
        font-size: 14px; line-height: 19.6px;
    }
}

/* Pre-footer tablet, second pass (owner, 2026-10-09): this family's own
   tablet rules stack the copy full width and shrink the buttons to 154x50.
   it-managed-services-wp at 768: copy column ~400 with the 214-218 wide,
   58 tall buttons at the right edge (16px/500, 16px 30px), band padded 80. */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit .zmit-insights .zmit-insights-grid {
        grid-template-columns: 400px 218px; justify-content: space-between;
        gap: 0; align-items: start;
    }
    .zmit .zmit-insights .zmit-insights-btns { flex-direction: column; gap: 20px; }
    .zmit .zmit-insights .zmit-insights-btns a {
        width: 218px; padding: 16px 30px; font-size: 16px; line-height: 24px; font-weight: 500;
    }
    .zmit .zmit-insights.z-section { padding: 80px 0; }
}

/* Consultant (final) band on PHONES = the reference layout (managed-it-services-portland,
   vanta-support-services, tier-2-it-support at 390; owner 2026-10-22): 30px / 20px inside the
   card, copy 14/25.2, a 13px full-width button, then the photo across the FULL card width at
   its OWN proportions (never cropped - owner 2026-10-22), 8px under the button and flush with the card's
   bottom edge. Phones only - tablet and desktop unchanged. */
@media (max-width: 680.98px) {
    body .zmit section.zmit-final .zmit-final-banner { min-height: 0; padding: 30px 20px 0; row-gap: 0; }
    body .zmit section.zmit-final .zmit-final-copy { max-width: 100%; margin-bottom: 0; padding: 0; }   /* no inner padding on top of the card's (owner 2026-10-23) */
    body .zmit section.zmit-final .zmit-final-copy h2 { margin: 0 0 16px; }
    body .zmit section.zmit-final .zmit-final-copy p { font-size: 14px; line-height: 25.2px; max-width: none; margin: 0 0 26px; }
    body .zmit section.zmit-final .zmit-final-copy a.zab-btn { font-size: 13px; width: 100%; justify-content: center; }
    body .zmit section.zmit-final .zmit-final-media { margin: 0; padding: 0; }
    body .zmit section.zmit-final .zmit-final-media img { position: static; display: block; width: calc(100% + 40px); max-width: none; height: auto; max-height: none; aspect-ratio: 611 / 583; object-fit: contain; object-position: center bottom; margin: 8px -20px 0; }
}

/* Overview CTA = the reference it-staff-augmentation-services (owner 2026-10-23):
   blue #0161ff / #f2f7ff, 16px Poppins 500, line-height 16, padding 13.5px 30px,
   radius 5, 12px to the arrow, hover + focus BLACK #141414 / #fcfcfc. Font and
   shape are DESKTOP only (the reference itself differs below 1081); hover at all widths. */
body .zmit section.zab-empower a.zab-btn.zab-btn-accent:hover,
body .zmit section.zab-empower a.zab-btn.zab-btn-accent:focus-visible { background: #141414; color: #fcfcfc; }
@media (min-width: 1081px) {
    body .zmit section.zab-empower a.zab-btn.zab-btn-accent { font-size: 16px; font-weight: 500; line-height: 16px; padding: 13.5px 30px; border-radius: 5px; gap: 12px; }
    body .zmit section.zab-empower a.zab-btn.zab-btn-accent > span:not([aria-hidden]) { font-size: 16px; font-weight: 500; line-height: 16px; }
}

/* Pre-footer "Subscribe" -> #footer lands the footer (newsletter) just below the 100px sticky header, like the WP original (owner 2026-10-23). All widths. */
#footer.zmit-footer-anchor { display: block; height: 0; scroll-margin-top: 100px; }