/* ============================================================
   Managed IT Services for Small Businesses — page-specific layer for
   /it-managed-services/managed-it-services-for-small-businesses (WP 33299).

   NESTED page: the stylesheet links in the PHP stay ABSOLUTE (/css/...),
   because the page itself lives one directory below the doc root.

   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).

   REFERENCE: css/managed-it-services-in-chicago.css.
   All three nested siblings (chicago, dallas, houston) are already migrated,
   so their live HTML carries zero Elementor and an id-for-id diff off live is
   impossible; the depth-1 id maps recorded in their file headers intersect
   this page only on the five template-constant chrome ids (820bdff hero,
   65e1765 testimonials, 1ad22e1 FAQ, 7572440 contact, a8ff3b4 insights),
   which identifies nothing. The tie-break is COMPONENT COVERAGE:

     this page needs  hero+marquee, services grid, compare heading, compare
                      table (no mobile accordion twin), bookcal, certified
                      badges, success stories, recognition, testimonials,
                      articles, FAQ, contact, pre-footer
     chicago has      all of them, and its comparison table likewise has NO
                      accordion twin (it stacks) — the exact shape here
     dallas/houston   add .zab-problems, .zab-band, .zab-steps, .zab-cmp-acc
                      (+ houston's zmit-services-lead) that this page has none
                      of — eight dead bands to strip instead of chicago's five

   Chicago also shares this page's SERVICES container id (659d603) one for one.
   The five bands chicago has that this page does not — .zab-appr (approach
   accordion), .zab-trust (pricing strip), .zab-adv, .zmit-stats, .zmit-final
   — have had every rule DELETED, not commented out. A page shipped earlier
   today with dead final-CTA rules and the shared sheet's absolute figure
   escaped its grid cell onto the copy; dead rules are not free.

   THIS PAGE IS 13 SECTIONS (chicago is 18), and it is an AUDIENCE page, not a
   city page — no city copy patterns, no location band.

   PER-PAGE DELTAS, each read off THIS page's own live CSS/DOM at 1440:
     - hero banner is Managed-IT-Services-for-Small-Businesses-Banner-Image-
       scaled.webp (it MUST equal the preload link and the markup)
     - hero headline is 54px/600/64.8px (chicago 42px/1.18) and runs FOUR
       lines / 259px in a 757px column
     - hero sub is 16px/26.4px (chicago 15px/1.6)
     - comparison heading is 34px/300/44.2px and LEFT aligned, in a band
       padded 30px 0 20px (chicago 36.8px/400 on 0 0 65px)
     - comparison table band has NO vertical padding (chicago 0 0 30px)
     - comparison cells are 16px/500/28px in ALL THREE columns; chicago's
       23px line-height override on the Zazz column does not apply here
     - SIX comparison rows (chicago seven) — the odd/even stripe and the
       every-row Zazz hairline are row-count independent, so they carry
     - EIGHT service cards, 4-up, SEVEN of them linked; each card has FOUR
       bullets (chicago three), so cards measure 419/442 not 244-279
     - TWENTY FAQ items, live splits them 10 / 10 across two accordion
       widgets, so the forced column break moves to nth-child(10)
     - recognition marks are the -white.png trio at 130/203/241 x70
       (chicago links the SVG trio at 130/181/241)
     - NEW BAND .zab-fit ("Are We a Good Fit for Your Business?") — live
       b82cda1, measured two-column, see its own block below

   Split rule: a given CSS property for a given selector lives in exactly one
   of the two sheets, never both, so their load order cannot change any
   outcome.
   ============================================================ */

/* ------------------------------------------------------------
   BRAND TOKENS taken from live's Elementor globals
   ------------------------------------------------------------ */
.zmit {
    --zab-ink: #14142b;                 /* live body/heading ink */
    --zab-accent: #0161ff;              /* --e-global-color-accent */
    --zab-body: rgba(20, 20, 20, .7);   /* muted body copy */
    --zab-line: rgba(6, 0, 28, .12);    /* table hairline */
    --zab-fill: #eff0f7;                /* card / FAQ fill */
}

/* ------------------------------------------------------------
   CONTENT BOX. Live's boxed containers run the full viewport minus a 30px
   gutter (content 1365 at x=30). We deliberately keep the shared centred box
   (1400 max-width, 30px gutter, content 1340 at x=43) — owner decision
   2026-08-26: consistency across migrated pages beats matching live's width
   on one page. Never zero a .z-container gutter (CLAUDE.md 7).
   ------------------------------------------------------------ */

/* ============================================================
   S01 HERO + TRUST BAND — live 8e8eda0 / 41deb3c, measured at 1440:
     hero        top 100, 600 tall, banner img 1425x600 object-fit fill
     inner       1365 at x30, padding 40px 0 0
     left col    757 wide (55.46%), 540 tall, padding-bottom 50,
                 vertically CENTRED in the 560px content box (top 150)
     right col   508 wide (37.22%) at x887 (gap 100 = 7.33%), 656 tall,
                 white card, padding 20px 25px 20px 20px, margin-bottom
                 -95.55 so it overhangs the banner onto the logo strip
     crumb 12px/14.4  pill 16px/26.4 on rgba(255,255,255,.12) pad 4px 12px
     headline 54px/600/64.8px, FOUR lines = 259     sub 16px/26.4, 2 lines
     CTA 443x42, 16px/500/16px, #f2f7ff, padding 13px 35px
     trust band  top 700, 125 tall (15 top / 40 bottom around a 70px row)
   formH 656 > leftColH 540, so the Family A overhang rule holds here.
   ============================================================ */
.zmit-hero::before {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/09/16152631/Managed-IT-Services-for-Small-Businesses-Banner-Image-scaled.webp') center/100% 100% no-repeat;
    background-color: #05070f;
}
.zmit-hero-left { padding-bottom: 56px; }

@media (min-width: 1081px) {
    /* Live's crumb sits INSIDE the left column; our shared partial renders it
       above the grid, so the 50px from the hero's top edge to the crumb and
       the 20px from the crumb to the pill are reproduced here. */
    .zmit .zmit-hero-crumb { padding-top: 40px; margin-bottom: 20px; }

    .zmit .zmit-hero-grid {
        grid-template-columns: 55.46% 37.22%;
        gap: 7.33%; align-items: stretch; padding: 0;
    }
    /* Short-copy hero on a form-driven banner: centre the text column (live's
       left column sits 10px below the content top, i.e. centred). */
    .zmit .zmit-hero-left { padding-bottom: 50px; align-self: center; }

    .zmit-hero .zmit-hero-pill { margin-bottom: 20px; }
    .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 54px; line-height: 64.8px; font-weight: 600; }
    .zmit-hero .zmit-hero-sub { max-width: 757px; color: #fff; margin-bottom: 20px; font-size: 16px; line-height: 26.4px; }

    .zmit-hero .zmit-hero-cta { margin-bottom: 0; }
    .zmit-hero .zmit-hero-cta-btn {
        font-size: 16px; line-height: 16px; font-weight: 500;
        padding: 13px 35px; gap: 20px;
        background: #f2f7ff; border: 0; min-height: 42px;
    }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; }
    .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; }
    .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; }

    /* -95.55px = live's own overhang; the form's bottom lands on the logo
       strip's lower edge. Never 0 (traps the form, dead white gap) and never
       past it (the form covers the logos). CLAUDE.md 7. */
    .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; }
    /* Live's card is flex + space-between (measured 1440: card 656, form 458,
       47px below the note). `display:block` pooled every pixel of the
       height:100% stretch below the note - 158px on small-businesses. */
    .zmit-form-card {
        margin: 0; height: 100%; transform: none;
        display: flex; flex-direction: column; justify-content: space-between;
        padding: 20px 25px 20px 20px;
    }
    .zmit-form-card h3 { margin-bottom: 12px; font-size: 20px; line-height: 20px; font-weight: 600; }
    .zmit-hsform { min-height: 0; }
    .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; }
    .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select,
    .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; }
    .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; }
    .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; }
}

/* Scroll cue — live d2ae808 is a bare 30px chevron with no chip or border. */
.zmit-hero .zmit-hero-scroll {
    left: 50%; bottom: 18px;
    width: 30px; height: 30px; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255, 255, 255, .66);
    animation: zab-float 3s ease-in-out infinite;
}
@keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
    .zmit-hero .zmit-hero-scroll { animation: none; transform: none; }
}
.zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; }
.zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; }

/* Trust strip — live 41deb3c is 125 tall (15 top / 40 bottom around a 70px
   logo row). Owner request 2026-08-26: every marquee logo reads the SAME
   size, bounded on BOTH axes, so a wordmark cannot outweigh a square badge.
   Live's own chips are 148 wide; the family standard 180/168 is kept. */
.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 — live's own body CTA (label first, then arrow).
   Used by S07 (good-fit band). Live 8385eab measures 429x46: 16px/500/16px,
   #f2f7ff on #0161ff, padding 15px 30px, radius 8, content-wrapper
   flex-direction row-reverse with a 16px gap, i.e. arrow AFTER the label.
   ============================================================ */
.zmit .zab-btn {
    display: inline-flex; align-items: center; gap: 16px;
    font-size: 16px; font-weight: 500; line-height: 16px;
    color: #f2f7ff; background: var(--zab-accent);
    border-radius: 8px; 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; }

/* ============================================================
   S02 SERVICES — live 659d603 / b22073e, EIGHT cards in FOUR columns
   (grid-template-columns repeat(4,1fr), gap 30; measured 318.75px x4 inside
   live's 1365 box). Cards are content-driven: 419 tall on row 1 and 442 on
   row 2 at 1440, and the height does NOT change on hover.
   Live's icon-box ships BOTH a title and a description, so two lines:
   H2 eyebrow 21ad3fb = 16.31px/700/25.2px (margin-bottom 10) and the lead
   description = 34.7px/43px/400. Head block to first card = 20px.
   Band padding 30px 0.
   ============================================================ */
.zmit .zmit-services.z-section { padding: 30px 0; }
/* Owner request 2026-09-01: live renders this template's services block on
   WHITE — the shared sheet's `.zmit-services { background: #f7f7fc }` is a
   root-city rule that does not apply to the nested pages. */
.zmit .zmit-services { background: #fff; }
.zmit-services-head { margin-bottom: 20px; }
.zmit .zab-svc-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); margin: 0 0 10px; }
.zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; }
.zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
/* Live's item is transparent with a 1px #eff0f7 border and 10px radius; the
   fill comes from an inner .uc_content (#eff0f7, padding 30px). Reproduced as
   one filled box plus the same border so the rendered metrics match. A card
   with no fill is invisible against the white band. */
.zmit-services-grid .zmit-svc-card {
    background: var(--zab-fill);
    border: 1px solid #eff0f7;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: background-color .3s ease, border-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; }
/* Live's card carries a bold LEAD line between the title and the bullets:
   .ue-item-text > p > strong, 14px/23.1px at weight 700 with a 22.4px bottom
   margin (1.6em). Measured on live card 1 at 1440: title 23 + 20, lead 46,
   22.4, list 208, 14 => 393.4 natural inside the 30px padding, which is
   exactly what live renders. Omitting this line left row 2 at 382 against
   live's 442. In a flex column margins do not collapse, so the p and ul
   margins are the real gaps. */
.zmit .zmit-services-grid .zab-svc-blurb { font-size: 14px; font-weight: 400; line-height: 23.1px; color: var(--zab-ink); margin: 0 0 22.4px; }
.zmit .zmit-services-grid .zab-svc-blurb strong { font-weight: 700; }
/* Live draws the browser's NATIVE disc at padding-left 20px with a #adadec
   ::marker. The shared sheet draws its own ::before bullet at li padding-left
   18px — running both renders TWO dots per bullet, so the ::before is
   switched off here rather than the native marker (CLAUDE.md 7). */
.zmit-services-grid .zmit-svc-card ul { margin: 0 0 14px; 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-services-grid .zmit-svc-card li a { color: var(--zab-accent); }

/* Per-card interlink. Live paints the label #000 with no underline and hangs
   a 14x8 line arrow 14px to its right; the arrow inherits currentColor. */
.zmit .zmit-svc-more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 700;
    line-height: 23.1px;
    color: #000;
    text-decoration: none;
}
/* NO hover restyle on the LINK itself. Live's only rule for it is
   `.uc_more_btn:hover { background-color:#45454500; color:#000000 }` — the
   label stays #000 and nothing moves. */
.zmit .zmit-svc-more svg { flex: 0 0 auto; }

/* --- rest state: reserved, hidden, pinned to the card foot ---------------
   The CTA is hidden at rest and revealed on hover, but it KEEPS ITS BOX:
   `visibility` (never `display: none`) so the card cannot grow on hover, and
   `margin-top: auto` so the reserved box sits at the bottom. */
.zmit-services-grid .zmit-svc-card .zmit-svc-more { visibility: hidden; margin-top: auto; padding-top: 10px; }
.zmit-services-grid .zmit-svc-card:hover .zmit-svc-more,
.zmit-services-grid .zmit-svc-card:focus-within .zmit-svc-more { visibility: visible; }

/* --- NESTED-template override: the CTA is an ABSOLUTE OVERLAY -------------
   This page's live widget puts the button OUT of flow:
     #uc_service_grid_card_elementor_b22073e .ue-button
        { display:none; opacity:0; position:ABSOLUTE; bottom:12px; width:100% }
   so card height is content-driven (419 / 442 at 1440) and cannot change on
   hover. The in-flow reserve above is the ROOT-city template's behaviour and
   would add a constant ~300px card with 30-50px of dead bottom here — do not
   remove this override, and do not copy it back to the root-level city pages
   (their live template really is in-flow). */
.zmit-services-grid .zmit-svc-card .zmit-svc-more {
    position: absolute; left: 30px; right: 30px; bottom: 12px;
    margin-top: 0; padding-top: 0;
}
@media (max-width: 767px) {
    .zmit-services-grid .zmit-svc-card .zmit-svc-more { left: 22px; right: 22px; }
}

/* --- HOVER: lift + blue border on the OUTER item, fill on the INNER node ---
   NOT a design choice — live's own runtime rules, greppable verbatim in this
   page's raw HTML (Seraphinite inlines them for this widget id):

     #uc_service_grid_card_elementor_b22073e .hasLink:hover
        { transform: translate(-10px,-10px); border: 1px solid #0161ff;
          transition: all .3s ease }
     #uc_service_grid_card_elementor_b22073e .hasLink:hover .uc_content
        { background-color: #d5e0f3 }

   The transform and the border sit on the OUTER
   .uc_post_grid_style_one_item while the fill change targets the INNER
   .uc_content. That split is why an earlier reading of this template ("border
   unchanged, transform resolves to the identity matrix, measured three
   times") was wrong: it sampled the inner node. This sheet's reference
   carried a signed comment asserting there is NO lift on the nested-city
   template and that a lift had been "removed"; the two rules above are
   live's own, so the lift is restored here.

   Our markup collapses outer+inner into one .zmit-svc-card and carries NO
   `.has-link` class — a `.has-link`-keyed rule matches NOTHING here and
   silently kills the fill hover while a CSS grep still reports it present.
   Key on `:has(.z-explore)`, which is exactly "this card is linked".
   Cards live does not link get no hover change at all.
   Verify by RENDERING and reading :focus-within with transitions disabled;
   never by grepping the declaration. */
.zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
.zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within {
    background: #d5e0f3;
    border-color: var(--zab-accent);
    transform: translate(-10px, -10px);
}
@media (prefers-reduced-motion: reduce) {
    .zmit-services-grid .zmit-svc-card:has(.z-explore):hover,
    .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: none; }
}

/* ============================================================
   S03 COMPARISON HEADING — live 2907840, its own depth-1 container:
   band padding 30px 0 20px (94 tall), heading 5d61244 = 34px/300/44.2px,
   LEFT aligned with a 20px left inset. Live splits the heading and the table
   into two depth-0 siblings; both are built.
   ============================================================ */
.zmit .zab-cmp-head.z-section { background: #fff; padding: 30px 0 20px; }
.zmit .zab-cmp-head h2 {
    font-size: 34px; font-weight: 300; line-height: 44.2px;
    color: var(--zab-ink); text-align: left; margin: 0; padding-left: 20px;
}

/* ============================================================
   S04 COMPARISON TABLE — live 2698840 (tagged `e-con e-child` while sitting
   at DEPTH 1 — the exact case where a flat `e-parent` scan drops the whole
   table and the page still renders plausibly). Band padding 0, height 672.
   Row 05d9e9b: 3 columns, 15px gap, 10px radius, overflow hidden.
   Header cells (625f0c7 / c1ce8e0 / b2b024f): white, 20px 30px, 24px/600/32px.
   Body cells: 16px/500/28px #06001c, 1px rgba(6,0,28,.12), 100px tall.
   SIX rows. Columns: Features and Benefits (gradient) / Our Managed IT
   Services (#eff0f7) / Other IT Providers (#f9fcff).
   Live builds every cell from a plain HEADING widget, not a `uc_` table
   widget — a `uc_` marker grep says "absent" here and is wrong.
   NO mobile accordion twin on this page; the table itself stacks.
   ============================================================ */
.zmit .zab-cmp.z-section { background: #fff; padding: 0; }
.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); }
/* One flex item per cell: a cell mixing an inline anchor with bare text would
   otherwise wrap as two independent items and scramble the sentence. */
.zmit .zab-cmp-cell > span { display: block; width: 100%; }
/* Live rounds only the FIRST body cell of each column (radius 10px 10px 0 0)
   and it is the one that carries the top border. */
.zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
/* Live paints the first COLUMN with a 3-layer gradient (a 70% white veil over
   two blue gradients) and leaves its cells transparent. Copied verbatim from
   live's own declaration on 5c93d6f — never flattened to `transparent`. */
.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 alternates on a strict odd/even cycle, verified cell by cell:
     col-0  border-top on row 1 only, transparent over the gradient
     col-1  border-top on EVERY row, #eff0f7, even rows #f9fcff
     col-2  border-top on row 1 only, #f9fcff, even rows white
   Written row-count independent on purpose: an enumerated :nth-of-type list
   has to be recounted per page and silently drops the hairline off the extra
   rows when a sibling has more of them (CLAUDE.md 7). */
.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; }
.zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; }

@media (max-width: 1080px) {
    .zab-cmp-grid { grid-template-columns: 1fr; }
    .zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; }
}

/* ============================================================
   S05 BOOK A FREE CONSULTATION — live e3efd8e / 29825: centred heading and
   copy, then the HubSpot meetings well. Live's band is 966 tall at 1440.
   ============================================================ */
.zmit .zmit-bookcal.z-section { padding: 30px 0 0; }
.zmit .zmit-bookcal h2 { font-size: 33.05px; font-weight: 400; line-height: 43px; color: var(--zab-ink); text-align: center; margin-bottom: 12px; }
.zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--zab-ink); text-align: center; max-width: 1000px; margin: 0 auto; }
.zmit-bookcal-embed,
.zmit-bookcal-embed .meetings-iframe-container,
.zmit-bookcal-embed iframe { height: 760px; min-height: 0; }

/* ============================================================
   S06 GLOBAL STANDARDS BAND — live c62cbe4: background #000, band 451 tall
   at 1440. Heading 33d3dba = 40px/600/56px white centred (max-width 850);
   copy 25cd3da = 16px/400 #c2c2c2 centred (max-width 800); then SIX badges.
   DARK BAND, so LIGHT COPY. Never darken anything in here.
   Badges are a 16px-gap grid at NATURAL image aspect — never gap 0 with a
   forced aspect-ratio plus object-fit fill, which fuses the baked-in dark
   tiles into one smeared bar (CLAUDE.md 7).
   ============================================================ */
.zmit .zab-certified.z-section { background: #000; padding: 30px 0; }
.zmit .zab-certified h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fff; text-align: center; max-width: 850px; margin: 0 auto; }
/* Live's copy block carries a NEGATIVE bottom margin (-23px) that pulls the
   badge row back up under its own 25px top margin: measured 30 + h2 56 + 11 +
   copy 105 - 23 + 25 + badges 217 + 30 = 451, live's exact band height. */
.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 -23px; }
.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: 25px; align-items: center; }
.zab-certified-badges img { width: 100%; height: auto; display: block; }

/* ============================================================
   S07 "ARE WE A GOOD FIT FOR YOUR BUSINESS?" — NEW BAND, live b82cda1.
   No sibling has a component for it, so it is built in the zab- namespace
   and every number below was MEASURED on live at 1440, not inferred:

     band      #fcfcfc, padding 30px 0, 735 tall
     TWO COLUMNS, 50/50, 50px gap. sideBySide test passes: copy top 4088 /
       image top 4088 (same top) and image left 738 > copy left 30 + 200.
     copy col  8fbc648  x30, 658 wide, 678 tall, flex column, gap 40
                 h2   394c101  34px/400/44.2px #14142b
                 body 2e4da93  16px/26.4px #14142b, p margin 0
                   native disc list, ul padding-left 20 / margin 16px 0,
                   16px between items (live ships six one-item ULs whose
                   collapsing margins produce exactly that rhythm)
                 CTA  8385eab  429x46, see .zab-btn above
     image col ab79120  x738, 658 wide, justify-content center
                 img  bb29e72  100% x 400, object-fit cover, radius 10,
                                vertically centred (139px clear top and bottom)
   Below 1081 live wraps to a single column with a 30px gap and 50px of band
   padding.
   ============================================================ */
.zmit .zab-fit.z-section { background: #fcfcfc; padding: 30px 0; }
.zab-fit-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; }
.zab-fit-copy { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.zmit .zab-fit-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0; }
.zmit .zab-fit-body p { font-size: 16px; line-height: 26.4px; color: var(--zab-ink); margin: 0; }
.zmit .zab-fit-body ul { margin: 16px 0; padding-left: 20px; list-style: disc; }
.zmit .zab-fit-body li { font-size: 16px; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 16px; padding-left: 0; }
.zmit .zab-fit-body li:last-child { margin-bottom: 0; }
.zmit .zab-fit-body li::before { content: none; }
.zab-fit-body a { color: var(--zab-accent); }
.zab-fit-media { display: flex; align-items: center; }
.zab-fit-media img { width: 100%; height: 400px; object-fit: cover; object-position: center center; border-radius: 10px; display: block; }

@media (max-width: 1080px) {
    .zmit .zab-fit.z-section { padding: 50px 0; }
    .zab-fit-inner { grid-template-columns: 1fr; gap: 30px; }
    .zab-fit-copy { gap: 20px; }
    .zmit .zab-fit-copy h2 { font-size: 27px; line-height: 1.25; }
}
@media (max-width: 680px) {
    .zmit .zab-fit.z-section { padding: 30px 0; }
    .zmit .zab-fit-copy h2 { font-size: 24px; line-height: 32px; }
    .zmit .zab-fit-body p, .zmit .zab-fit-body li { font-size: 14px; line-height: 23.1px; }
    .zab-fit-media img { height: 260px; }
}

/* ============================================================
   S08 SUCCESS STORIES — live babf4a5, padding 30px 0, band 672 tall.
   Heading 43c7879 is weight 300. Three cards, each featured image + BRAND
   LOGO + heading + excerpt; a blank logo slot is a visible defect, never an
   acceptable fallback (CLAUDE.md 7).
   ============================================================ */
.zmit .zmit-stories.z-section { padding: 30px 0; }
/* Live 43c7879 is 30px/39px at weight 300, and the grid clears it by 30:
   30 + 39 + 30 + card 543 + 30 = 672, live's band height. */
.zmit-stories h2 { font-size: 30px; font-weight: 300; line-height: 39px; color: var(--zab-ink); margin-bottom: 30px; }
.zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; }
.zmit-story-img img { height: 250px; }
.zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; }
.zmit-story .body .zmit-story-logo {
    display: block; height: 50px; width: auto; max-width: 150px;
    object-fit: contain; object-position: left center;
}
.zmit-story .body { padding: 20px; }
.zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.zmit-story p { font-size: 14px; line-height: 1.6; }

/* ============================================================
   S09 RECOGNITION — live f7111b9 / 8814: a #141414 box (radius 10, padding
   40) inside a 1280 container, row space-between and align centre, copy
   column 60%. Heading 9bf40de = 30px/300/1.4em white; copy 158fb73 =
   16px/300 #f2f7ff; CTA 4257c87 = #fcfcfc on #141414, radius 8, padding 20.
   Live pulls this band 128/132px into its neighbours with negative margins;
   the family's approved treatment (chicago, dallas, houston — all live) uses
   band padding instead. Deliberate, carried.
   DARK BAND, so LIGHT COPY.
   ============================================================ */
.zmit .zmit-recognized.z-section { padding: 32px 0 18px; }
.zmit-recognized-band { padding: 40px; }
.zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; }
.zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #f2f7ff; max-width: 640px; }
.zmit-recognized-logos { gap: 36px; }
.zmit-recognized-logos img { height: 50px; width: auto; }
.zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; }
.zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; }

/* ============================================================
   S10 TESTIMONIALS — live 65e1765 padding 30px 0, 50px gap. Ten items.
   NOTE: live parses the ARTICLES band as a CHILD of this container (both live
   inside 65e1765), so a depth-1 scan reports twelve sections, not thirteen.
   Articles is built as its own SIBLING section below.
   ============================================================ */
.zmit .zmit-testi.z-section { padding: 30px 0; }
.zmit-testi h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 300; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 40px; }
.zmit-testi-card {
    background-color: transparent;
    background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%);
    min-height: 415px;
}
.zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; }

/* ============================================================
   S11 ARTICLES — live's Blogs widget nested inside 65e1765.
   Cards are image + DATE + TITLE only: no category term (live ships none on
   this page) and NO excerpt — owner instruction, never render one.
   ============================================================ */
.zmit .zmit-articles.z-section { padding: 45px 0; }
.zmit-articles-head h2 { font-size: 29px; font-weight: 300; line-height: 1.5em; color: var(--zab-ink); }
.zmit-articles-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; color: var(--zab-accent);
    border-bottom: 1px solid var(--zab-accent); padding-bottom: 5px;
}
.zmit-articles-more:hover { color: #141414; border-color: #141414; }
.zab-chev svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.zmit-articles-grid { gap: 30px; }
.zmit-article { border-radius: 10px; overflow: hidden; text-decoration: none; }
.zmit-article:hover h3 { color: var(--zab-accent); }
.zmit-article .body { padding: 24px 2px 32px; }
.zmit .zmit-article .date { font-size: 14px; font-weight: 400; color: #5e5e5e; margin: 0 0 12px; }
.zmit .zmit-article h3 { font-size: 24px; font-weight: 500; line-height: 36px; color: #000; margin: 0; transition: color .2s ease; }
.zmit .zmit-article-img img { height: 250px; }

/* ============================================================
   S12 FAQ — live 1ad22e1: background #eff0f7, padding 30px 0, 30px gap, and
   TWENTY items split 10 / 10 across two e-n-accordion widgets side by side.
   Live also ships a FAQPage graph node — as the ARRAY form
   `"@type":["WebPage","FAQPage"]`, which a plain-string grep for
   `"@type":"FAQPage"` misses — carrying all twenty questions. The page emits
   its own FAQPage with the same twenty.
   ============================================================ */
.zmit-faq { background: var(--zab-fill); }
.zmit .zmit-faq.z-section { padding: 36px 0; }
.zmit-faq h2 { font-size: clamp(1.5rem, 1.311rem + 1.0081vw, 2.125rem); font-weight: 400; line-height: 1.3em; color: var(--zab-ink); margin-bottom: 30px; }
/* Restate the shared 22px horizontal padding whenever the vertical rhythm is
   re-measured — a two-value shorthand silently zeroes it and every question
   sits flush against the card edge (CLAUDE.md 7). */
.zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; }
.zmit-faq-item { margin-bottom: 7px; }
.zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; }
/* The shared list is a CSS multi-column box, which BALANCES the columns. Live
   ships two explicit accordion widgets split 10 / 10, so the break is forced
   after item 10. Gated above the phone breakpoint: with column-count 1 a
   forced break creates a SECOND column and the list overflows. */
@media (min-width: 681px) {
    .zmit-faq-item:nth-child(10) { break-after: column; }
}

/* ============================================================
   S13 CONTACT — live 7572440 / 8978: photo background, heading 3946774 =
   33.89px/300/43px #fcfcfc centred; the form card d511f3d is white, 8px
   radius, 30px padding; "Contact now" 8927c4b is 25px/400 #6e7191.
   ============================================================ */
.zmit-contact {
    background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/05/18073038/0c4197f8712a54f098181b432285586af102e42d.webp') center/cover no-repeat;
    background-color: #1f4fd6;
}
.zmit .zmit-contact.z-section { padding: 50px 0; }
.zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; }
.zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; }
.zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; }
.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; }

/* ============================================================
   S14 PRE-FOOTER BAND — live a8ff3b4 / 6648aeb, 352 tall at 1440: black
   band, left column logo + title + copy, right column two buttons; title
   1702e8c is 28px/400 white with a 2px left rule, copy fa7ec24 20px/400/28px.
   DARK BAND, so 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;
    }
    /* Owner request 2026-08-26: no dead space under this band. Live pads the
       paragraph out to hold a taller box; we let the section hug its content. */
    .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)
   The desktop lead-ins and overlaps are desktop compositions; stacked layouts
   just butt up, and the desktop type steps overflow a narrow column.
   ============================================================ */
@media (max-width: 1080px) {
    .zmit .zab-svc-lead { font-size: 27px; line-height: 1.25; }
    .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; padding-left: 0; }
    .zmit .zab-certified h2 { font-size: 27px; line-height: 1.3; }
    .zmit .zmit-article h3 { font-size: 20px; line-height: 30px; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); }
    .zmit-recognized-band { padding: 32px 26px; }
    .zmit .zmit-recognized.z-section { padding: 40px 0; }
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 24px; }
    .zmit-insights-copy p:not(.zmit-insights-title) { font-size: 17px; line-height: 26px; }
    /* Hero is single-column below 1081, so the deep left-column pad just opens
       a gap between the CTA and the form card. */
    .zmit-hero-left { padding-bottom: 0; }
    /* Desktop card floor is a desktop composition; stacked it just adds dead
       space. */
    .zmit-testi-card { min-height: 0; }
}

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

/* ============================================================
   PHONE (<=680)
   Re-measured rhythm for a 375 viewport; the shared sheet's structural
   stacking does the rest.
   ============================================================ */
@media (max-width: 680px) {
    .zmit .zmit-services.z-section  { padding: 20px 0; }
    .zmit .zab-certified.z-section  { padding: 48px 0; }
    .zmit .zmit-recognized.z-section { padding: 30px 0; }
    .zmit .zmit-stories.z-section   { padding: 24px 0; }
    .zmit .zmit-articles.z-section  { padding: 48px 0; }
    .zmit .zmit-testi.z-section     { padding: 20px 0; }
    .zmit .zmit-faq.z-section       { padding: 40px 0; }
    .zmit .zmit-contact.z-section   { padding: 40px 0; }
    .zmit .zmit-insights.z-section  { padding: 40px 0; }

    .zmit .zab-svc-lead { font-size: 24px; line-height: 32px; }
    .zmit .zab-cmp-head h2,
    .zmit .zab-certified h2 { font-size: 24px; line-height: 32px; }
    .zmit-testi-lead { font-size: 18px; line-height: 26px; }
    .zmit-testi-quote { font-size: 14px; line-height: 22px; }
    .zab-certified-badges { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    /* This sheet loads after the shared one, so the desktop fixed-column
       rules above have to be undone explicitly on a phone. */
    .zmit-services-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-articles-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Full-bleed at one column, so the desktop 250px reads taller — matches
       live. */
    .zmit-story-img img { height: 240px; }
    .zmit-article-img img { height: 240px; }
    .zmit-faq-q { padding: 16px; font-size: 15px; line-height: 22px; }
    .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 16px 24px; }
    .zmit-insights-copy p.zmit-insights-title { font-size: 21px; padding-left: 14px; margin-left: 14px; }
    .zmit-insights-btns a { padding: 14px 28px; }

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

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

    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { height: auto; min-height: 600px; }
}

/* Mobile content reduction (owner approved 2026-08-26: "reduce or hide some
   content where necessary keeping the essence"). CSS-only hides — the markup,
   its links and SEO text stay in the DOM, so interlinking is unchanged. */
@media (max-width: 680px) {
    /* Service cards: title + first 3 bullets carry the point (live has four) */
    .zmit-services-grid .zmit-svc-card li:nth-child(n+4) { display: none; }
    /* Article cards: keep title/meta/link, drop the artwork */
    .zmit-articles .zmit-article-img, .zmit-articles img { display: none; }
    /* Story cards: image + logo + title; excerpt is desktop detail */
    .zmit-stories .zmit-story .body p { display: none; }
    /* Articles read as a list once artwork is hidden - give items a hairline */
    .zmit .zmit-articles-grid .zmit-article { border-bottom: 1px solid rgba(6, 0, 28, .1); padding-bottom: 18px; }
    .zmit .zmit-articles-grid .zmit-article:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ============================================================
   1440 SECTION-HEIGHT RECONCILIATION — every value below is the delta
   between our render and live's, measured section by section at 1440.
   Gated to the desktop composition: ungated, these load after the
   tablet/phone blocks above and silently win there.
   ============================================================ */
@media (min-width: 1081px) {
    /* S05 — live e3efd8e is full-bleed: heading 858b4de is 30px/39px/400 with
       a 10px drop, the copy sits on the full width (two lines, not the three
       our 1000px cap forces), 20 clears to the embed, and the embed is 784. */
    .zmit .zmit-bookcal h2 { font-size: 30px; line-height: 39px; font-weight: 400; margin-bottom: 10px; }
    .zmit .zmit-bookcal p { max-width: none; padding: 0 10px; margin: 0 0 20px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container,
    .zmit-bookcal-embed iframe { height: 784px; }

    /* S11 — live pads the articles band 30 (not 45) and drops 29 from the
       head row to the grid. */
    .zmit .zmit-articles.z-section { padding: 30px 0; }
    .zmit-articles-head { margin-bottom: 29px; }

    /* S10 — live's inner gap is 50, not 40. */
    .zmit-testi h2 { margin-bottom: 50px; }

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

@media (max-width: 1080px) and (min-width: 681px) {
    .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-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; }
    .zmit .zmit-articles.z-section { padding: 25px 0; }
    .zmit-services-grid .zmit-svc-card { padding: 26px; }
    .zmit .zmit-testi.z-section { padding: 20px 0; }
    .zmit-testi h2 { margin-bottom: 20px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 714px; }
    /* Live's recognition marks fit a 613px track with a column-gap of ZERO;
       inheriting the desktop 36px gap wraps the row and inflates the band by
       ~106px. Measured at 768. */
    .zmit .zmit-recognized-logos { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 20px; align-items: center; }
    /* S01 — live's hero headline wraps to FOUR lines at 768. */
    .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; }
    .zmit-hero-grid { padding-bottom: 114px; }
    .zmit .zmit-bookcal.z-section { padding: 30px 0 27px; }
}

@media (max-width: 680px) {
    .zmit-services-grid .zmit-svc-card { padding: 26px; }
    .zmit-recognized-band { padding: 46px 26px; }
    .zmit .zmit-recognized-copy h2 { font-size: 20px; line-height: 28px; }
    .zmit .zmit-stories.z-section { padding: 8px 0; }
    .zmit .zmit-faq.z-section { padding: 67px 0; }
    .zmit .zmit-insights.z-section { padding: 60px 0; }
    .zmit-insights-grid { grid-template-columns: 1fr; gap: 20px; }
    .zmit-insights-btns a { width: 100%; padding: 16px 30px; }
    .zmit .zmit-bookcal.z-section { padding: 0; }
    .zmit-hero-grid { padding-bottom: 14px; }
    .zmit-bookcal-embed,
    .zmit-bookcal-embed .meetings-iframe-container { min-height: 524px; }

    /* Recognition marks at 375: live keeps them FULL SIZE across THREE rows.
       An inherited `max-width:96px; max-height:26px` squashes all three into
       one 26px row — and `max-height` beats `height`, so BOTH caps have to be
       released, not just the width. Measured at 375. */
    .zmit .zmit-recognized-logos {
        display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 20px;
        align-items: center; justify-content: flex-start;
    }
    .zmit .zmit-recognized-logos img { max-width: none; max-height: none; width: auto; height: 50px; object-fit: contain; }

    /* The shared .z-btn is white-space nowrap and this page's label has a
       ~395px min-content, which blows the band's 1fr track. The page body is
       overflow-x hidden, so scrollWidth hides it — measure the ELEMENT width.
       Let the label wrap and centre below 680. */
    .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; max-width: 680px; }
}