/* ============================================================
   Managed IT Services for Healthcare — page-specific layer.
   INDUSTRY OUTLIER TEMPLATE (shares ~4% of body data-ids with charlotte,
   0% with the it-infrastructure group), 19 depth-1 sections.

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

   Cloned from css/managed-it-services-charlotte.css (the owner-approved city
   reference carrying the alignment fixes), then EVERY value below re-measured
   on live /managed-it-services-for-healthcare at 1440 via chrome-devtools —
   the templates differ, so nothing was carried blind.

   MEASURED DELTAS vs the charlotte sheet:
     - hero banner URL (this page's own 2560x738 artwork; equals the preload)
     - hero CTA is live's 16px/500 pill (13px 35px pad, radius 8), arrow AFTER
       the label — not charlotte's 12px pill
     - services are THREE grids (6+6+3 cards) of UNLINKED cards -> no overlay,
       no CTA reveal, no hover styles at all on this page
     - comparison is FIVE rows with inline glyph marks; live's row-5 fills
       repeat row 4's (breaks its own odd/even cycle) — reproduced explicitly
     - FAQ uses the SHARED dark #262338 items (this template's live look);
       21 items split 10 / 11 -> column break after item 10
     - testimonial slide carries the 102.29deg ecf1eb-aec8fd-84c3fc gradient
       (charlotte's testi gradient is a different ramp)
     - recognized-band logos are 70px tall and gapless (charlotte: 50px/36px)
     - articles more-link and titles are BLACK on this page; dates are accent
     - NO video band, NO adv text cards, NO stats band, NO final-CTA figure

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

/* Owner decision 2026-08-26: the house centred box (shared .z-container =
   max-width 1400px, padding 0 30px) is kept even though live runs its boxed
   containers at 1365/x=30. Do NOT reintroduce max-width: none. */

/* ============================================================
   1. HERO — measured on live at 1440: banner img 1425x607 (object-fit fill,
   i.e. STRETCHED), trust strip 125 under it (total component 732). Left
   column 757 / gap 100 / form card 508 of the 1365 box. Card t140 h662:
   starts 44px above the grid (over the crumb row) and overhangs the banner
   bottom (y707) by 95px, stopping 30px above the strip's lower edge.
   ============================================================ */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/10/08131048/Managed-IT-Services-for-Healthcare-Banner-Image-2-scaled.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    /* crumb text lands at y118 (12px, white) */
    .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; }
    /* 757 / 100 / 508 of the 1365 box, as percentages so it tracks the
       viewport below 1440 instead of hard-coding a 1440-only pixel row. */
    .zmit .zmit-hero-grid {
        grid-template-columns: 55.46% 37.22%;
        gap: 7.33%; align-items: stretch; padding: 28px 0 0;
    }
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; }
    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    /* Owner request 2026-08-26 (carried by every live sibling: charlotte,
       accounting-firms): hero headline + sub reduced below live's 54px/16px.
       Deliberate deviation from live, applied on request — do NOT "fix" back. */
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; }
    .zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
    /* live b37b9ab: 16px/16px/500 label, 13px 35px pad, #f2f7ff fill, radius 8,
       476x42 -> label first, arrow AFTER it (measured; the shared component
       emits the icon span first, so it is re-ordered here). */
    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px; border-radius: 8px;
        background: #f2f7ff; border: 0; min-height: 42px;
    }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { order: 2; line-height: 10px; }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 10px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }
    /* -44px lifts the card past the breadcrumb row to the hero content top;
       -95px is live's own overhang into the logo strip (card bottom 802 vs
       banner bottom 707, measured). */
    .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95px; }
    .zmit-form-card {
        margin: 0; height: 100%; transform: none;
        padding: 20px 25px 20px 20px;
    }
    .zmit-form-card h3 { margin-bottom: 12px; }
}

/* Scroll cue — live d2ae808 is a 30px fa chevron-circle-down glyph at left 50
   percent, bottom ~18, fill rgba(255,255,255,.66), no translate. The shared
   component draws a bare chevron in a glass disc; restyled here to live's
   silhouette: a .66-white 30px disc with the banner-dark chevron cut into it. */
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 18px;
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    color: #05070f;
    /* The shared bob bakes translateX(-50%) into its keyframes, which pulls the
       chevron 15px left of where live puts it; redefined without the X shift. */
    animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 18px; height: 18px; }
.zmit-hero .zmit-hero-scroll:hover { background: #fff; color: #05070f; }

/* Trust strip — live 125 tall (15 top / 40 bottom around a 70px logo row).
   Chip bounding is the owner rule (2026-08-26): both axes capped so a square
   badge and a wide wordmark read the same optical weight. */
.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 BUTTONS — measured on THIS page's live CTAs.
   .zab-btn        accent pill (steps "Get Started"): 15.38px/600, 15px 30px,
                   radius 5, #0161ff — same as charlotte's
   .zab-btn-pill   light pill (problems CTA): 16px/500 #0161ff on #f2f7ff,
                   13px 35px pad, radius 8 — the same pill as this hero's CTA
   ============================================================ */
.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; }
/* Arrow sits AFTER the label on every live CTA of this page. */
.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; }
.zmit .zab-btn-pill {
    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-pill:hover { background: #e2ecff; color: var(--zab-accent); }
.zmit .zab-steps-cta .zab-btn:hover { background: #0a4fd0; color: #f2f7ff; }

/* ============================================================
   S02-S04 SERVICES — THREE grids, 3-up, 30px gaps (cards 435 wide at 1440).
   Grid 1 carries the eyebrow H2 (16.31px/700) + label; grids 2-3 label only
   (34.7px/400). Cards: #eff0f7 fill, 1px #eff0f7 border, radius 10, 30px pad,
   title 18px/700/23.4 + 20 below, native disc bullets 14px/23.1.
   Cards are UNLINKED on live -> NO overlay, NO CTA row, NO hover change.
   ============================================================ */
.zmit .zmit-services.z-section { padding: 0 0 21px; }
.zmit #why.zmit-services { padding-top: 20px; }
.zmit .zab-svc-last.zmit-services { padding-bottom: 64px; }
.zmit-services-head { margin-bottom: 0; }
.zmit .zab-svc-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); margin: 0 0 10px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 20px; }
.zmit-services-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.zmit-services-grid .zmit-svc-card {
    background: var(--zab-fill);
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; }
/* Live draws the browser's native disc (ul padding-left 20, marker #adadec at
   14px). The shared sheet draws its own ::before bullet - suppressed here or
   every bullet renders twice (CLAUDE.md 7). */
.zmit-services-grid .zmit-svc-card ul { margin: 0; padding-left: 20px; list-style: disc; }
.zmit-services-grid .zmit-svc-card li { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin-bottom: 0; padding-left: 0; }
.zmit-services-grid .zmit-svc-card li::before { content: none; }
.zmit-services-grid .zmit-svc-card li::marker { color: #adadec; font-size: 14px; }
.zmit-svc-card.no-image .zmit-svc-media { display: none; }
/* NO hover styles: live's cards on this page carry no link and no hover state
   (industry template rule - cards without a link change nothing on hover). */

/* ============================================================
   S05 CHALLENGES — live 61723e2: white band. Heading 33.05px/600 centred,
   two 4-item icon-list columns (22px #046bd2 check circles, 18px/500 items),
   answer 24px/43.2px/400 centred, then the 16px pill CTA. Measured rhythm:
   pad 10 top, head-to-cols 50, cols-to-answer 49, answer-to-CTA 45, 31 bottom.
   ============================================================ */
.zmit .zab-problems.z-section { background: #fff; padding: 10px 0 31px; }
.zmit .zab-problems-head { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 50px; }
.zab-problems-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 49px; }
.zab-problems-list { list-style: none; margin: 0; padding: 0; }
.zab-problems-list li { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 4px; margin-top: 4px; }
.zab-problems-list li:first-child { margin-top: 0; }
.zab-problems-list li:last-child { padding-bottom: 0; }
.zab-tick { flex: 0 0 22px; margin-top: 3px; }
.zab-tick svg { display: block; width: 22px; height: 22px; fill: #046bd2; }
.zab-tick-text { font-size: 18px; font-weight: 500; line-height: 29.7px; color: var(--zab-ink); }
.zmit .zab-problems-answer { font-size: 24px; font-weight: 400; line-height: 43.2px; color: var(--zab-ink); text-align: center; margin: 0 0 45px; }
.zab-problems-cta { text-align: center; }

/* ============================================================
   S06 BOOK YOUR CONSULTATION — live 5e40403: centred 30px/39px/400 heading,
   10 below, full-width 16px/26.4 copy, 20 to the embed, embed 764 tall.
   ============================================================ */
.zmit .zmit-bookcal.z-section { padding: 29px 0 0; }
.zmit .zmit-bookcal h2 { font-size: 30px; line-height: 39px; font-weight: 400; color: var(--zab-ink); text-align: center; margin-bottom: 10px; }
.zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); text-align: center; max-width: none; padding: 0 10px; margin: 0 0 20px; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 764px; min-height: 0; }

/* ============================================================
   S07 ADVANTAGES — live a30d4c4: white section, eyebrow 34.7px/400 with 53
   below, then the #262338 panel (radius 15, 4 columns, 10px column gap).
   Cells: 32px 25px pad, 1px #fff right border (last none), 100px icons,
   titles (h2) 15px/700/19.5 underlined #fff, copy (h3) 15px/600/28 #f7f7fc.
   DARK PANEL - LIGHT COPY. Never darken anything in here.
   ============================================================ */
.zmit .zab-trust.z-section { background: #fff; padding: 21px 0 0; }
.zmit .zab-trust-eyebrow { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0 0 53px; }
.zab-trust-panel {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px;
    background: var(--zab-dark); border-radius: 15px;
}
.zab-trust-cell {
    padding: 32px 25px; text-align: center;
    border-right: 1px solid #fff;
}
.zab-trust-cell:last-child { border-right: 0; }
.zab-trust-ico { display: block; margin: 0 auto 24px; }
.zab-trust-ico svg { display: block; width: 100px; height: 100px; margin: 0 auto; }
.zmit .zab-trust-cell h2 { font-size: 15px; font-weight: 700; line-height: 19.5px; color: #fff; text-decoration: underline; margin: 0 0 12px; }
.zmit .zab-trust-cell h3 { font-size: 15px; font-weight: 600; line-height: 28px; color: #f7f7fc; margin: 0; }

/* ============================================================
   S08 COMPARISON HEADING — live b840bdf: 36.8px/36.8px/400, LEFT aligned,
   ~50px above it (panel bottom 5065 -> heading 5117), table follows flush.
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 50px 0 0; }
.zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; font-weight: 400; color: #141414; text-align: left; margin: 0; }

/* ============================================================
   S09 COMPARISON TABLE — DESKTOP ONLY (live ea10be8 is hidden-tablet/mobile).
   3 columns, 15px gap; heads 24px/600 on #fff, 20px 30px pad; body cells
   100px tall, 16px/500/28px #06001c, 20px 30px pad.
   FILLS + HAIRLINES measured cell-by-cell on live at 1440 (5 rows):
     col-0  3-layer gradient on the COLUMN, cells transparent, hairline row 1
     col-1  column #eff0f7; cells odd transparent / even #f9fcff, EXCEPT row 5
            which is #f9fcff on live (live breaks its own odd/even cycle at the
            last row - both body columns repeat row 4's fill); hairline EVERY row
     col-2  cells odd #f9fcff / even #fff, EXCEPT row 5 = #fff; hairline row 1
   Written odd/even + one explicit row-5 override so the live render is exact.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0 0 30px; }
.zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.zmit .zab-cmp-col-head {
    background: #fff; padding: 20px 30px; margin: 0;
    font-size: 24px; font-weight: 600; line-height: 32px; color: var(--zab-ink);
}
.zmit .zab-cmp-cell {
    margin: 0; padding: 20px 30px; height: 100px;
    display: flex; align-items: center;
    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); }
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Live paints the criteria COLUMN with a 3-layer gradient (a 70 percent white
   veil over two blue gradients) and leaves its cells transparent. Verbatim
   from live's computed backgroundImage - never flatten it (CLAUDE.md 7). */
.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 { background: var(--zab-fill); }
.zab-cmp-col-1 .zab-cmp-cell { background: transparent; }
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; }
/* Live's last row repeats row 4's fill in BOTH body columns (measured). */
.zab-cmp-col-1 .zab-cmp-cell:nth-of-type(5) { background: #f9fcff; }
.zab-cmp-col-2 .zab-cmp-cell:nth-of-type(5) { background: #fff; }
/* Live hairlines EVERY cell of the Zazz column (row-count-independent rule). */
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }
/* Live's glyph marks: inline green/red bold spans before the cell text. */
.zab-cmp-mark { font-weight: 700; }
.zab-cmp-mark.yes { color: green; }
.zab-cmp-mark.no { color: red; }
.zab-cmp-acc { display: none; }

/* ============================================================
   S10 COMPARISON ACCORDION — MOBILE/TABLET ONLY (live afe32a1 is
   hidden-widescreen/desktop/laptop). Native <details>, as live.
   Rows are icon-box pairs: 20px green tick = Zazz, 22px red cross = Others.
   ============================================================ */
@media (max-width: 1080px) {
    .zab-cmp { display: none; }
    .zab-cmp-acc { display: block; }
}
.zmit .zab-cmp-acc.z-section { background: #fff; padding: 0 0 30px; }
.zab-acc-item { background: var(--zab-fill); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.zab-acc-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; cursor: pointer; list-style: none;
    font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--zab-ink);
}
.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; }
.zab-acc-ico { flex: 0 0 22px; margin-top: 2px; }
.zab-acc-ico svg { display: block; width: 22px; height: 22px; }
.zmit .zab-acc-row h3 { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--zab-ink); margin: 0 0 6px; }
.zmit .zab-acc-row p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--zab-body); margin: 0; }

/* ============================================================
   S11 THREE-STEP PROCESS — live 1f734f4: #f2f7ff, margin 0 0 30 (NO top
   margin: the table butts against it), pad 30 top. Heading 33.05px/600
   centred + 20; lead 16px/26.4 centred + 10 to the waves; the 3-card row
   lifts -140 over the waves art; icons in 104px white circles; CTA accent.
   ============================================================ */
.zmit .zab-steps.z-section { background: #f2f7ff; margin: 0 0 30px; padding: 30px 0 29px; }
.zmit .zab-steps h2 { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 20px; }
.zmit .zab-steps-lead { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); text-align: center; margin: 0 0 10px; }
.zab-steps-art { display: block; width: 100%; height: auto; }
.zab-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -140px; padding-bottom: 20px; }
.zab-step { padding: 20px; text-align: center; }
.zab-step-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 104px; height: 104px; border-radius: 50%; background: #fff;
    margin-bottom: 25px;
}
.zab-step-ico svg { display: block; width: 50px; height: 50px; }
.zmit .zab-step h3 { font-size: 20px; font-weight: 700; line-height: 1.2em; color: var(--zab-ink); margin: 0 0 12px; }
.zmit .zab-step p { font-size: 14px; font-weight: 500; line-height: 1.5em; color: var(--zab-body); margin: 0; }
.zab-step p a { color: var(--zab-accent); }
.zab-steps-cta { text-align: center; }

/* ============================================================
   S12 GLOBAL STANDARDS BAND — live 8b6ebe4: #000, pad 40 top / 30 bottom
   (471 total — shorter than charlotte's 65/70). Heading 40px/600/56 #fff
   centred; copy 16px/26.4 #c2c2c2, max 800, 11 below the heading; badges
   6-up gapless 28 below, each 224x227 (object-fit fill, live stretches).
   DARK BAND - LIGHT COPY.
   ============================================================ */
.zmit .zab-certified.z-section { background: #000; padding: 40px 0 30px; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; text-align: center; margin: 0; }
.zmit .zab-certified > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #c2c2c2; text-align: center; max-width: 800px; margin: 11px auto 0; }
.zab-certified > .z-container > p a { color: #fff; font-weight: 500; text-decoration: underline; }
.zab-certified-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 28px; align-items: center; }
/* Live renders the badges at natural aspect inside a 16px-gap grid; forcing an
   aspect-ratio stretch with gap:0 merges the PNGs' baked-in dark tiles into
   uneven runs (see CLAUDE.md). */
.zab-certified-badges img { width: 100%; height: auto; display: block; }

/* ============================================================
   S13 TRUSTED PROVIDER BAND — live 32afb3c: #141414 box (radius 10, 40px pad,
   1280 wide — the shared .zmit-recognized exception). Heading 30px/300/42
   #fff (720 max); copy 16px/26.4/300 #f2f7ff, 20 below; logos 70px tall,
   GAPLESS natural-width row, 20 below the copy. CTA: white pill, 20px pad,
   radius 8, 16px label, right column. DARK BAND - LIGHT COPY.
   ============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit-recognized-band { padding: 40px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; max-width: 720px; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 26.4px; color: #f2f7ff; max-width: 720px; }
.zmit-recognized-logos { gap: 0; }
.zmit-recognized-logos img { height: 70px; width: auto; }
.zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }

/* ============================================================
   S14 SUCCESS STORIES — live 6e66309: pad 30/29, heading 29px/300 + 20.
   Cards #eff0f7 (NOT charlotte's #f5f6fb), radius 5, image 250 cover, body
   pad 25, logo row 50px tall left-aligned, title 18px/700/25.2, excerpt
   14px/23.1.
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 30px 0 29px; }
.zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; margin-bottom: 20px; }
/* Shared sheet pads the card 14px; live's featured image runs flush to the
   card edge (img left == card left, measured), so the pad is zeroed and the
   body carries its own 25px. */
.zmit-story { background: var(--zab-fill); border-radius: 5px; overflow: hidden; padding: 0; }
.zmit-story-img img { height: 250px; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 232px;
    object-fit: contain; object-position: left center;
}
.zmit-story .body { padding: 25px; }
.zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 25.2px; }
.zmit-story p { font-size: 14px; line-height: 23.1px; }

/* ============================================================
   S15 ARTICLES — live 38a5200: heading 29px/300 with the more-link on the
   same row; head-to-grid 30. THIS page's cards (measured): image 270 cover,
   date 14px/500 ACCENT + ~13 below the image, title 24px/28.8px/600 BLACK.
   The "Explore All…" link is BLACK with a 1px black underline (not accent).
   NO category, NO excerpt (owner rule - .zmit-article-exc must never render).
   ============================================================ */
.zmit .zmit-articles.z-section { padding: 0 0 66px; }
.zmit-articles-head { margin-bottom: 30px; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 43.5px; 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: 10px; overflow: hidden; text-decoration: none; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article-img img { height: 270px; }
.zmit-article .body { padding: 13px 2px 0; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 500; color: var(--zab-accent); margin: 0 0 12px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 600; line-height: 28.8px; color: #141414; margin: 0; transition: color .2s ease; }

/* ============================================================
   S16 TESTIMONIALS — live 7b264ec: heading 34px/44.2/300 + 51 to the slide.
   Slide: the 102.29deg ecf1eb-aec8fd-84c3fc gradient (measured off the
   lazy-loaded slide bg — NOT charlotte's testi ramp), radius 5, 80px pad,
   ~412 tall. Name 22px/600; org line is the BIG 34px/47.6/600 ink row;
   quote 18px/29.7 ink. Nav arrows are bare black chevrons at the band edges.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 51px; }
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%);
    border-radius: 5px;
    min-height: 412px;
    padding: 80px;
}
.zmit .zmit-testi-role { font-size: 22px; font-weight: 600; line-height: 28.6px; color: var(--zab-ink); }
.zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 47.6px; color: var(--zab-ink); margin-bottom: 18px; }
.zmit-testi-quote { font-size: 18px; font-weight: 400; line-height: 29.7px; color: var(--zab-ink); }
.zmit-testi-nav { color: #000; }

/* ============================================================
   S17 FAQ — live 984d2d2: #eff0f7 section (pad 20 top / 30 bottom), heading
   34px/44.2/400 + 30, then TWO 655px accordion columns 30 apart. Items are
   the SHARED sheet's dark #262338 cards; live deltas: radius 5, 7px apart,
   questions 18px/400 #fcfcfc padded 25px ALL ROUND (the two-value-shorthand
   trap does not bite here because all four sides are restated), answers
   16px/26.4, links #85bcff (7:1 on #262338; underline kept for a11y).
   21 items split 10 / 11 on live -> the column break stays after item 10.
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 20px 0 30px; }
.zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-faq-list { column-gap: 30px; }
.zmit-faq-item { background: var(--zab-dark); border-radius: 5px; margin-bottom: 7px; }
.zmit-faq-q { padding: 25px; font-size: 18px; font-weight: 400; line-height: 27px; color: #fcfcfc; }
.zmit-faq-a-inner { padding: 0 25px 25px; font-size: 16px; line-height: 26.4px; }
.zmit-faq-item.open .zmit-faq-a { max-height: 900px; }
.zmit .zmit-faq-a-inner a { color: #85bcff; }
/* Live ships two explicit accordion widgets split 10 / 11; a balanced CSS
   column box would split 11 / 10, so the break is forced after item 10.
   Gated above the phone breakpoint: at column-count 1 a forced break would
   create a second column and overflow the viewport. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(10) { break-after: column; }
}

/* ============================================================
   S18 REQUEST A CONSULTATION — same jet component (8978) as charlotte's S20:
   photo background, centred light heading 33.89px/300/43, white form card.
   Card width 620 is the owner's decision (2026-08-26, "narrower card, no
   dead space") — live renders 956, deliberately not carried.
   ============================================================ */
.zmit-contact {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
    background-color: #1f4fd6;
}
.zmit .zmit-contact.z-section { padding: 50px 0; }
.zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; }
.zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; }
.zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 620px; }
.zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; }

/* ============================================================
   S19 PRE-FOOTER BAND — live a8ff3b4: #000 band; logo 198x44 + 28px/28px
   white title behind a 2px white left bar; copy 20px/28 white; two 280x58
   buttons (white solid / white outline). Same composition as charlotte's,
   without live's ChatGPT-paste dead space (owner deviation, kept).
   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: 500; line-height: 24px; min-width: 0; justify-content: center;
}
.zmit-insights-btns a:last-child { background: transparent; color: #fff; }
.zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; }

@media (min-width: 1081px) {
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-copy { grid-template-columns: 194px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; }
    .zmit .zmit-insights-logo { height: 43px; width: 194px; }
    .zmit-insights-copy p.zmit-insights-title {
        font-size: 28px; line-height: 28px;
        padding-left: 20px; margin-left: 0; max-width: none;
    }
    .zmit-insights-copy p:not(.zmit-insights-title) {
        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) — desktop compositions unwound; type steps reduced.
   ============================================================ */
@media (max-width: 1080px) {
    .zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
    .zmit .zab-problems-head,
    .zmit .zab-steps h2 { font-size: 27px; line-height: 1.25; }
    .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zab-problems-answer { font-size: 19px; line-height: 1.6; margin-bottom: 30px; }
    .zab-tick-text { font-size: 16px; line-height: 26px; }
    .zab-problems-cols { grid-template-columns: 1fr; gap: 0; margin-bottom: 30px; }
    .zmit .zab-problems-head { margin-bottom: 30px; }
    .zmit .zab-trust-eyebrow { font-size: 24px; line-height: 1.3; margin-bottom: 28px; }
    .zab-trust-panel { grid-template-columns: 1fr; gap: 0; }
    .zab-trust-cell { border-right: 0; border-bottom: 1px solid #fff; }
    .zab-trust-cell:last-child { border-bottom: 0; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
    .zab-steps-grid { grid-template-columns: 1fr; margin-top: 0; }
    .zmit .zmit-article h3 { font-size: 20px; line-height: 30px; }
    .zmit-testi-card { padding: 48px; min-height: 0; }
    .zmit-testi-lead { font-size: 24px; line-height: 34px; }
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 24px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 17px; line-height: 26px; }
    /* Hero is single-column below 1081; the deep left pad just opens a gap. */
    .zmit-hero-left { padding-bottom: 0; }
}

/* Tablet-only (shared sheet stacks to one column at 680) */
@media (max-width: 1080px) and (min-width: 681px) {
    .zmit-services-grid { grid-template-columns: repeat(2, 1fr); }
    .zmit-articles-grid { grid-template-columns: repeat(2, 1fr); }
    /* live keeps the process 3-up at 768 with a -100 lift onto the waves */
    .zmit .zab-steps.z-section { margin: 30px 0; padding: 30px 0; }
    .zmit .zab-steps h2 { font-size: 33.05px; line-height: 42.965px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 16px; line-height: 26.4px; margin-bottom: 20px; }
    .zab-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -100px; padding-bottom: 10px; }
    .zab-step { padding: 20px 10px; }
    /* problems stay two-up at 768 on the sibling live pages */
    .zab-problems-cols { grid-template-columns: 1fr 1fr; gap: 0 40px; padding-bottom: 20px; }
    .zmit .zab-problems-head { font-size: 31px; line-height: 40.3px; }
    .zmit .zab-problems-answer { font-size: 22px; line-height: 37.4px; }
    .zab-acc-q { padding: 26px 22px; }
    .zmit .zab-cmp-acc.z-section { padding: 0 0 40px; }
    .zab-trust-cell { padding: 43px 25px; }
    .zmit-recognized-band { grid-template-columns: 1fr; gap: 24px; padding: 60px 26px; }
    .zmit .zmit-recognized-copy h2 { font-size: 24px; line-height: 32px; }
    .zmit .zmit-articles.z-section { padding: 25px 0; }
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
    .zmit .zmit-insights.z-section { padding: 80px 0; }
    .zmit-insights-grid { grid-template-columns: 400px 218px; justify-content: space-between; gap: 0; align-items: start; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 218px; padding: 16px 30px; }
    /* HubSpot's meetings widget sets a taller inline height once the narrow
       layout stacks the slot picker - follow the iframe instead of clipping. */
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 714px; }
    .zmit .zmit-bookcal.z-section { padding: 30px 0 27px; }
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-hero-grid { padding-bottom: 114px; }
}

/* ============================================================
   PHONE (<=680) — measured rhythm for a 375 viewport; the shared sheet's
   structural stacking does the rest.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section  { padding: 0 0 20px; }
    .zmit #why.zmit-services        { padding-top: 20px; }
    .zmit .zab-svc-last.zmit-services { padding-bottom: 24px; }
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-services-grid .zmit-svc-card { padding: 26px; }
    .zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems.z-section   { padding: 30px 0; }
    .zmit .zab-problems-head,
    .zmit .zab-steps h2,
    .zmit .zab-certified h2,
    .zmit .zab-cmp-head h2 { font-size: 24px; line-height: 32px; }
    .zmit .zab-problems-answer { font-size: 16px; line-height: 25px; }
    .zab-tick-text { font-size: 15px; line-height: 24px; }
    .zmit .zab-cmp-head.z-section { padding: 24px 0 12px; }
    .zmit .zab-cmp-acc.z-section    { padding: 0 0 40px; }
    .zab-acc-q { padding: 14px 16px; font-size: 16px; }
    .zab-acc-a { padding: 0 16px 16px; }
    .zmit .zab-certified.z-section  { padding: 48px 0; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .zmit .zab-steps.z-section      { margin: 20px 0; padding: 20px 0 30px; }
    .zmit .zab-steps h2 { font-size: 26px; line-height: 33.8px; margin-bottom: 20px; }
    .zmit .zab-steps-lead { font-size: 14px; line-height: 23.1px; margin-bottom: 40px; }
    .zab-steps-grid { margin-top: -70px; gap: 40px; padding-bottom: 30px; }
    .zab-step { padding: 14px 0; }
    .zab-step-ico { width: 88px; height: 88px; margin-bottom: 18px; }
    .zab-step-ico svg { width: 42px; height: 42px; }
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
    .zmit-recognized-band { padding: 46px 26px; }
    .zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
    /* Shared .z-btn is nowrap; this page's long CTA label overflows the dark
       box at 375 (spec rule) - wrap it instead. */
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; }
    .zmit-recognized-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 14px; }
    .zmit-recognized-logos img { max-width: 96px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
    .zmit .zab-trust.z-section      { padding: 24px 0 40px; }
    .zmit .zab-trust-ico, .zmit .zab-trust-ico svg { width: 64px; height: 64px; }
    .zmit .zab-trust-cell { padding: 20px 16px; }
    .zmit .zab-trust-cell h3 {
        font-size: 14px; line-height: 24px;
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .zmit .zmit-stories.z-section   { padding: 8px 0; }
    .zmit-story-img img { height: 240px; }
    .zmit-stories .zmit-story .body p { display: none; }
    .zmit .zmit-articles.z-section  { padding: 30px 0 40px; }
    .zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Owner mobile reduction: keep title/meta/link, drop the artwork; items
       read as a list, so give them a hairline. */
    .zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
    .zmit .zmit-articles-grid .zmit-article { border-bottom: 1px solid rgba(6, 0, 28, .1); padding-bottom: 18px; }
    .zmit .zmit-articles-grid .zmit-article:last-child { border-bottom: 0; padding-bottom: 0; }
    .zmit .zmit-testi.z-section     { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
    .zmit-testi-card { padding: 28px; min-height: 0; }
    .zmit-testi-lead { font-size: 18px; line-height: 26px; }
    .zmit-testi-quote { font-size: 14px; line-height: 22px; }
    .zmit .zmit-faq.z-section       { padding: 30px 0 40px; }
    .zmit-faq-q { padding: 16px; font-size: 15px; line-height: 22px; }
    .zmit-faq-a-inner { padding: 0 16px 24px; font-size: 14px; line-height: 23px; }
    .zmit .zmit-contact.z-section   { padding: 40px 0; }
    .zmit .zmit-insights.z-section  { padding: 40px 0; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-insights-btns { gap: 20px; }
    .zmit-insights-btns a { width: 100%; padding: 14px 28px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 21px; padding-left: 14px; margin-left: 14px; }
    /* Hero type: tighter on phones */
    .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; }
    .zmit-hero .zmit-hero-sub { font-size: 14px; line-height: 1.55; }
    .zmit-form-card h3 { font-size: 16px; line-height: 1.4; }
    .zmit-hero-grid { padding-bottom: 14px; }
    /* Marquee chips scale down with the viewport */
    .zmit .zmit-trust-band { padding: 12px 0 24px; }
    .zmit .zmit-trust-chip { width: 140px; height: 56px; }
    .zmit .zmit-trust-chip img { max-height: 46px; max-width: 128px; }
    /* Owner mobile reduction: title + first 3 bullets carry the point */
    .zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 524px; }
    .zmit .zmit-bookcal.z-section { padding: 20px 0 0; }
}

/* OWNER FIX 2026-09-01: hero form card matches the family — stretched to the
   hero row, floored at the approved reference height (612 at 1440), content
   centred so slack splits top and bottom instead of pooling under the privacy
   note. Values from the live accounting page via the family review pass. */
@media (min-width: 1081px) {
    .zmit-form-card { height: 100%; align-self: stretch; min-height: 612px; display: flex; flex-direction: column; justify-content: center; }
}