/* D-072 The square highlight, as zamp.com draws it. Loaded last on every route except /book-call.

   Researched 2026-10-29 on the live site (every pattern background on 11 pages, plus the site stylesheet). zamp.com does
   not draw one motif at many sizes: each surface type has its own drawn file, placed at its native size
   (background-size: auto) in fixed corners, so a square is the same size on every page and every screen. This file
   uses those same files (public/design-assets/squares/, copied from zamp.com) in the same places:

   | Surface (zamp.com class)                        | File(s), corner                                      | Here
   | Forest panel (split-feature_left, CTA panel)     | forest-panel-tr top-right + forest-panel-bl bottom-left | closing CTA panel, split feature, dark newsletter card
   | Forest media stage (products-tabs_image-wrapper) | forest-stage-tl top-left + forest-stage-br bottom-right | product tab stages, green graphic stages
   | Forest section (section_customers green)         | forest-stage-tl at top-right                          | green sections, story heroes, managed, buyout, Commitment
   | Forest quote plate (review-component, green)     | forest-quote-tl top-left + forest-quote-br bottom-right | green quote plates and media
   | Black footer                                     | black-footer-tl + black-footer-tr, top corners         | footer (with room above the logo for them)
   | Black content band (background-color-black)      | black-band-bl bottom-left                             | "The problem" bands
   | Black action band (small-cta)                    | matrix-on-black bottom-right, full height              | mid-page ask, captured small CTAs
   | Beige card, large (press_card)                   | beige-card-br bottom-right                            | press cards
   | Beige quote plate (review-component)             | matrix-corner-br-on-beige bottom-right                | compact quote plates
   Small tiles (figures, chips, KPI rows) carry nothing: the pattern is for big components. */

/* ---- Forest ---- */
html body:not(#zsq) :is(.zv-buyout, .zv-commit, .section_customers.background-color-green, .z8-managed, main > section.background-color-green, main .section_component.background-color-green) {
  background-image: url('/design-assets/squares/forest-stage-tl.svg') !important;
  background-position: 100% 0 !important; background-size: auto !important; background-repeat: no-repeat !important;
}
html body:not(#zsq) :is(.products-tabs_image-wrapper, .z-tab-art, .zg--green) {
  background-image: url('/design-assets/squares/forest-stage-tl.svg'), url('/design-assets/squares/forest-stage-br.svg') !important;
  background-position: 0 0, 100% 100% !important; background-size: auto, auto !important; background-repeat: no-repeat !important;
}
html body:not(#zsq) .zg--green::after { content: none !important; }
html body:not(#zsq) :is(.z9-cta__panel, .split-feature_left:not(.z-split-feature-media-beige), .newsletter_card.z-newsletter-card-dark, .zu-spot__panel) { /* D-086: the use-case spotlight is a forest panel */
  background-image: url('/design-assets/squares/forest-panel-tr.svg'), url('/design-assets/squares/forest-panel-bl.svg') !important;
  background-position: 100% 0, 0 100% !important; background-size: auto, auto !important; background-repeat: no-repeat !important;
}
/* Grey panels (the partner pages' split feature): the same two corners in the beige card palette, gradient boxes only. */
html body:not(#zsq) .split-feature_left.z-split-feature-media-beige {
  background-image: url('/design-assets/squares/beige-panel-tr.svg'), url('/design-assets/squares/beige-panel-bl.svg') !important;
  background-position: 100% 0, 0 100% !important; background-size: auto, auto !important; background-repeat: no-repeat !important;
}
html body:not(#zsq) :is(.zv-story--quote, .z-cq__media, .review-component[class*="2f3bec32"]) {
  background-image: url('/design-assets/squares/forest-quote-tl.svg'), url('/design-assets/squares/forest-quote-br.svg') !important;
  background-position: 0 0, 100% 100% !important; background-size: auto, auto !important; background-repeat: no-repeat !important;
}

/* ---- Black ---- */
/* Footer squares moved to footer.css (D-112). */
html body:not(#zsq) main section.background-color-black {
  background-color: #000 !important;
  background-image: url('/design-assets/squares/black-band-bl.svg') !important; background-position: 0 100% !important;
  background-size: auto !important; background-repeat: no-repeat !important;
}

/* The problem band, dialled in to zamp.com: two dark option cards with quiet icon tiles, then the answer on a cream card. */
html body:not(#zsq) section.background-color-black .insights-problem-grid { gap: 16px !important; }
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="light-opacity"] {
  padding: 32px !important; border: 0 !important; border-radius: 0 !important; background: #1b1b1b !important; box-shadow: none !important; color: #fff !important;
}
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="light-opacity"] .featured-card-icon-container {
  display: grid !important; place-items: center; width: 48px !important; height: 48px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #2b2b2b !important;
}
/* Icons in light blue (user, 2026-10-29). */
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="light-opacity"] .featured-card-icon-container img { width: 24px !important; height: 24px !important; filter: brightness(0) invert(80%) sepia(28%) saturate(700%) hue-rotate(176deg) brightness(104%); }
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="light-opacity"] .feature_card_title { color: #fff !important; }
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="beige"] {
  padding: 32px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--ds-ground-beige, #f6f5f3) !important;
}
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="beige"] :is(.feature_card_title, .feature_card_desc) { color: #000 !important; }
html body:not(#zsq) section.background-color-black .feature-card[data-wf--feature-card--variant="beige"] .feature_card_desc { display: block; margin-top: 8px; color: #323232 !important; }

/* Black action bands carry the cross matrix on the right, full height (zamp.com small-cta). */
html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe)) {
  background-color: #000 !important; color: #fff !important; outline: 0 !important;
  background-image: url('/design-assets/squares/matrix-on-black-muted.svg') !important; background-position: 100% 100% !important;
  background-size: auto 168px !important; background-repeat: no-repeat !important; /* zamp.com's band height; the grey matrix keeps it low-key */
}
/* Its own space above wherever it lands mid-page (it sits inside a host section on most pages). */
html body:not(#zsq) :not(main) > .z-cta--dark:not(:first-child) { margin-top: clamp(64px, 4rem + 3vw, 120px) !important; }
html body:not(#zsq) :is(.z-cta--dark, .small-cta_component:not(.is-subscribe)) :is(h2, h3, .small_cta_title) { color: #fff !important; }
html body:not(#zsq) .z-cta--dark .z-cta__lead { color: rgba(255, 255, 255, .78) !important; }
html body:not(#zsq) .z-cta--dark .z9-cta__input { border: 1px solid rgba(255, 255, 255, .4) !important; background: #000 !important; color: #fff !important; }
html body:not(#zsq) .z-cta--dark .z9-cta__input::placeholder { color: rgba(255, 255, 255, .6) !important; }
html body:not(#zsq) :is(.z-cta--dark .z9-cta__submit, .small-cta_component:not(.is-subscribe) .button) { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html body:not(#zsq) :is(.z-cta--dark .z9-cta__submit, .small-cta_component:not(.is-subscribe) .button):hover { background: var(--ds-mint, #afecdb) !important; }
html body:not(#zsq) .z-cta--dark .z9-cta__form { position: relative; z-index: 1; }

/* ---- Managed-service band (ManagedBand.astro, every page that has one): a ruled card and a section-size heading. ---- */
html body:not(#zsq) .z-managed-band__inner { box-shadow: inset 0 0 0 1px var(--ds-border, #e6e1da) !important; }
html body:not(#zsq) main .z-managed-band h2 { font-size: var(--t-section, 2.5rem) !important; line-height: 1.15 !important; }

/* ---- Beige and grey: large cards only ---- */
html body:not(#zsq) .press_card {
  background-image: url('/design-assets/squares/beige-card-br.svg') !important; background-position: 100% 100% !important;
  background-size: auto !important; background-repeat: no-repeat !important;
}
html body:not(#zsq) .z-cq--compact {
  background-image: url('/design-assets/squares/matrix-corner-br-on-beige.svg') !important; background-position: 100% 100% !important;
  background-size: auto !important; background-repeat: no-repeat !important;
}

/* The announcement bar rules moved to nav-mega.css, which every route loads (D-108). */

/* ---- Radar graphic fit (orbit, lib/ui-cards.mjs): the hub is a half-disc on the wheel's baseline, which is the
   graphic's bottom edge, so the circle is never clipped and no strip shows under the line. ---- */
html body:not(#zsq) .zb--orbit .zb-hub {
  bottom: 0 !important; width: 144px !important; height: 72px !important; margin: 0 0 0 -72px !important; padding: 0 0 12px !important;
  border-radius: 72px 72px 0 0 !important; align-content: end !important;
  box-shadow: 0 0 0 12px rgba(175, 236, 219, .45), 0 0 0 13px rgba(143, 214, 194, .8) !important; clip-path: inset(-14px -14px 0 -14px);
}
html body:not(#zsq) .zb--orbit .zb-hub img.zb-mark { width: 58px !important; }

/* Phones: copy runs the full width, so sections and panels keep only a lower-corner square (or none), the footer keeps
   its corners without the extra band, and the cross matrix becomes a strip under the form. */
@media (max-width: 767px) {
  html body:not(#zsq) :is(.zv-buyout, .zv-commit, .section_customers.background-color-green, .z8-managed, main > section.background-color-green, main .section_component.background-color-green) { background-image: none !important; }
  html body:not(#zsq) :is(.z9-cta__panel, .split-feature_left, .newsletter_card.z-newsletter-card-dark) { background-image: url('/design-assets/squares/forest-panel-bl.svg') !important; background-position: 0 100% !important; }
  html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe)) { background-size: auto 88px !important; padding-bottom: 112px !important; }
  html body:not(#zsq) :not(main) > .z-cta--dark:not(:first-child) { margin-top: 48px !important; }
  html body:not(#zsq) .zb--orbit .zb-hub { width: 112px !important; height: 56px !important; margin-left: -56px !important; padding-bottom: 10px !important; border-radius: 56px 56px 0 0 !important; }
  html body:not(#zsq) .zb--orbit .zb-hub img.zb-mark { width: 48px !important; }
}

/* ---- D-078 pass 3 (user, 2026-10-29) ---- */
/* Homepage hero panel: zamp.com's stage files in both top corners replace the CSS-drawn steps (the window covers the
   middle; the hero's foot crops the bottom). */
html body:not(#zsq) .zw-stage .zw-tex { display: none !important; }
html body:not(#zsq) .zw-stage {
  background-image: url('/design-assets/squares/forest-stage-tl.svg'), url('/design-assets/squares/forest-stage-tr.svg') !important;
  background-position: 0 0, 100% 0 !important; background-size: auto, auto !important; background-repeat: no-repeat !important;
}
/* "Software that does the work. A team that owns it." (homepage): top-right and bottom-left, clear of the copy. */
html body:not(#zsq) main section.z8-managed.z8-managed { /* doubled class: the forest-sections list above is more specific */
  background-image: url('/design-assets/squares/forest-stage-tr.svg'), url('/design-assets/squares/forest-panel-bl.svg') !important;
  background-position: 100% 0, 0 100% !important; background-size: auto, auto !important;
}
/* Problem bands: a second texture top-right (zamp.com's top-corner black file) with the bottom-left one. */
html body:not(#zsq) main section.background-color-black:not(:has(.z-managed-band)) {
  background-image: url('/design-assets/squares/black-footer-tr.svg'), url('/design-assets/squares/black-band-bl.svg') !important;
  background-position: 100% 0, 0 100% !important; background-size: auto, auto !important;
}
/* The managed band stands alone: no black host section behind it on any page. */
html body:not(#zsq) main section.background-color-black:has(.z-managed-band) { background: transparent !important; background-image: none !important; }
html body:not(#zsq) main section.background-color-black:has(.z-managed-band) :is(h2, h3, p, li, span) { color: inherit; }
/* Black CTA bands: the bright cross matrix, but only a strip of it on the right that fades in (not the dimmed grey). */
html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe)) { background-image: none !important; position: relative; overflow: hidden; }
html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe))::after {
  content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(38%, 460px); pointer-events: none;
  background: url('/design-assets/squares/matrix-on-black.svg') 100% 100% / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%);
}
html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe)) > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
  html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe)) { padding-bottom: 40px !important; }
  html body:not(#zsq) :is(.z-cta--dark .z-cta__inner, .small-cta_component:not(.is-subscribe))::after { top: auto; height: 72px; width: 60%; }
  html body:not(#zsq) main section.z8-managed.z8-managed { background-image: url('/design-assets/squares/forest-stage-bl.svg') !important; background-position: 0 100% !important; }
  html body:not(#zsq) main section.background-color-black:not(:has(.z-managed-band)) { background-image: url('/design-assets/squares/black-band-bl.svg') !important; background-position: 0 100% !important; }
}
/* Integrations panel ("Integrations built for where you sell." and every page that reuses it): a ruled card. */
html body:not(#zsq) .header_image-wrapper.z-hub-art { outline: 1px solid var(--ds-border, #e6e1da) !important; outline-offset: -1px; }
/* /about-us "Backed by the best": a section-size heading over a static, ruled 3 × 2 grid of investor marks. */
html body:not(#zsq) .text-component:has(+ .spacer-component + .z-logo-grid) h4,
html body:not(#zsq) .text-component:has(~ .z-logo-grid) h4 { font: 400 var(--t-section, 2.5rem)/1.2 var(--z-font-heading) !important; letter-spacing: -.01em; color: #000 !important; }
html body:not(#zsq) .z-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; background: var(--ds-border, #e6e1da); box-shadow: 0 0 0 1px var(--ds-border, #e6e1da); }
html body:not(#zsq) .z-logo-grid li { display: grid; place-items: center; height: 144px; margin: 0; padding: 24px; background: #fff; }
html body:not(#zsq) .z-logo-grid img { height: calc(var(--h, 28px) * 1.15); max-width: 70%; width: auto; object-fit: contain; filter: grayscale(1) brightness(.25); }
@media (max-width: 767px) { html body:not(#zsq) .z-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body:not(#zsq) .z-logo-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; } html body:not(#zsq) .z-logo-grid li { height: 112px; } }
/* /about-us G2 quote marquee: its two overflow-hidden wrappers ended exactly at the cards' edge and clipped their rule. */
html body:not(#zsq) .zg2-love :is(.swiper-slider, .swiper) { padding-block: 2px !important; }
/* Footer CTA centring moved to footer.css (D-112). */

/* ---- D-079 (user, 2026-10-29) ---- */
/* Homepage managed photo: the G2 proof card (Best Support badge, rating, Wall of Love link). */
.z12-proof { position: absolute; z-index: 2; right: 16px; top: 16px; margin: 0; }
.z12-proof a { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; background: #fff; color: #000; text-decoration: none; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 18px 40px -18px rgba(0,0,0,.45); }
.z12-proof__badge { width: 52px; height: auto; flex: none; }
.z12-proof__body { display: flex; flex-direction: column; gap: 3px; text-align: left; font: 400 13px/1.3 var(--z-font-body); color: #323232; }
.z12-proof__stars { display: inline-flex; align-items: center; gap: 6px; }
.z12-proof__stars b { font: 500 13px/1 var(--z-font-body); color: #000; }
.z12-proof__body > b { font: 500 15px/1.25 var(--z-font-body); color: #000; }
.z12-proof__link { color: var(--z-color-green, #183e3d); font-weight: 500; }
.z12-proof a:hover .z12-proof__link { text-decoration: underline; text-underline-offset: 3px; }
.z12-proof a:focus-visible { outline: 2px solid var(--z-color-green, #183e3d); outline-offset: 3px; }
@media (max-width: 600px) { .z12-proof { right: 8px; top: 8px; } .z12-proof__badge { width: 40px; } .z12-proof__link { display: none; } }
/* /about-us balance: the intro line under the hero figures, "Why we exist" on white, the founder card, investors on beige. */
html body:not(#zsq) .z-about-intro { max-width: 44rem; margin: 48px auto 0 !important; text-align: center; font: 400 var(--t-lead, 1.125rem)/1.6 var(--z-font-body) !important; color: #323232 !important; }
html body:not(#zsq) main section.z-about-why { background: #fff !important; }
html body:not(#zsq) main section.z-about-founder { background: #fff !important; padding-top: 0 !important; }
html body:not(#zsq) .z-cq--founder { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); max-width: 84rem; margin: 0 auto !important; padding: 0 !important; overflow: hidden; color: #fff;
  background: var(--z-color-green, #183e3d) url('/design-assets/squares/forest-panel-bl.svg') 0 100% / auto no-repeat !important; }
html body:not(#zsq) .z-cq--founder .z-cq__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 80px); }
html body:not(#zsq) .z-cq--founder .z-cq__glyph { font: 400 72px/0.6 var(--z-font-heading); color: var(--ds-mint, #afecdb); }
html body:not(#zsq) .z-cq--founder .z-cq__text { margin: 24px 0 0 !important; padding: 0 !important; border: 0 !important; font: 400 var(--t-subsection, 2rem)/1.3 var(--z-font-heading) !important; letter-spacing: -.01em; color: #fff !important; }
html body:not(#zsq) .z-cq--founder .z-cq__who { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; font: 400 15px/1.4 var(--z-font-body); color: rgba(255,255,255,.75); }
html body:not(#zsq) .z-cq--founder .z-cq__who b { font-weight: 500; color: #fff; }
html body:not(#zsq) .z-cq--founder .z-cq__portrait { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 860px) { html body:not(#zsq) .z-cq--founder { grid-template-columns: minmax(0, 1fr); } html body:not(#zsq) .z-cq--founder .z-cq__portrait { min-height: 0; aspect-ratio: 4 / 3; order: -1; } }
html body:not(#zsq) .z-cq--founder .z-cq__who { padding-left: 0 !important; border-left: 0 !important; }
/* D-080 homepage managed photo: G2 proof card at the photo's top-left (clear of the specialist), and the "Your Zamp team"
   card in place of the inset photo. */
.z8-managed__photo-wrap { position: relative; }
html body .z8-managed__media .z12-proof { right: auto; left: 16px; top: 16px; } /* inside the photo's top-left corner */
.z8-team { position: absolute; z-index: 2; left: -56px; bottom: -32px; width: 310px; background: #fff; color: #000; text-align: left; font: 400 13px/1.35 var(--z-font-body); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 24px 56px -20px rgba(0,0,0,.5); }
.z8-team * { text-align: left !important; }
.z8-team header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #efebe5; }
.z8-team header > span:nth-child(2) { flex: 1; }
.z8-team header b { display: block; font-weight: 500; font-size: 14px; }
.z8-team header small, .z8-team li small { display: block; font-size: 12px; color: #838383; }
.z8-team__live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--ds-mint, #afecdb); color: #183e3d; font: 500 12px/1.2 var(--z-font-body); }
.z8-team__live i { width: 6px; height: 6px; border-radius: 50%; background: #183e3d; }
.z8-team ul { margin: 0; padding: 4px 0; list-style: none; }
.z8-team li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 16px; }
.z8-team li > img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.z8-team li > span:nth-child(2) { flex: 1; }
.z8-team li b { display: block; font-weight: 500; font-size: 13px; }
.z8-team__pill { padding: 3px 9px; border-radius: 999px; background: #f3f1ee; color: #323232; font: 500 11px/1.2 var(--z-font-body); white-space: nowrap; }
.z8-team footer { display: flex; justify-content: space-between; padding: 11px 16px; border-top: 1px solid #efebe5; background: #faf9f7; font-size: 12px; color: #838383; }
.z8-team footer b { font-weight: 500; color: #000; }
@media (max-width: 980px) { .z8-team { left: 16px; bottom: -32px; } }
@media (max-width: 600px) { .z8-team { position: relative; left: auto; bottom: auto; width: auto; margin: -40px 12px 0; } }
html body .z-managed-band__media .z12-proof--band { top: auto; right: auto; left: 24px; bottom: 24px; }
@media (max-width: 600px) { html body .z-managed-band__media .z12-proof--band { left: 12px; bottom: 12px; } }
/* "What managed actually means." and other trio panels (.z5-trio): a section-size heading and readable card copy. */
html body:not(#zsq) .z5-trio .z5-trio__head h2 { font-size: var(--t-section, 2.5rem) !important; line-height: 1.15 !important; }
html body:not(#zsq) .z5-trio .feature_card_title { font-size: var(--t-card, 1.5rem) !important; line-height: 1.2 !important; }
html body:not(#zsq) .z5-trio .feature_card_desc { font-size: 16px !important; line-height: 1.55 !important; }
html body:not(#zsq) .z5-trio__head .zg2b { margin-top: 28px; }
/* Smaller team card (user): tighter rows, no footer. */
.z8-team header { padding: 11px 14px; gap: 10px; }
.z8-team header b { font-size: 13px; }
.z8-team li { padding: 7px 14px; gap: 10px; }
.z8-team li > img { width: 28px; height: 28px; }
.z8-team li b { font-size: 12.5px; }
.z8-team header small, .z8-team li small { font-size: 11.5px; }
@media (max-width: 980px) { .z8-managed__media { --z8-inset: 48px; } }
@media (max-width: 600px) { .z8-managed__media { --z8-inset: 32px; } }
/* Homepage stories header (user): "Read all customer stories" sits under "Teams that handed sales tax to Zamp." */
html body .z6-stories__head { display: block !important; }
html body .z6-stories__head .z6-stories__aside { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 20px 0 0 !important; }
html body .z6-stories__head .z6-stories__aside .button-group { justify-content: flex-start !important; }
html body .z6-stories__head .z6-stories__aside > *, html body .z6-stories__head .z6-stories__aside .button-group { margin-top: 0 !important; margin-bottom: 0 !important; }
html body .z6-stories__head .z6-stories__aside .button-group { align-self: center !important; align-items: center !important; height: auto !important; }
html body .z6-stories__head .z6-stories__aside .button-group a { height: auto !important; min-height: 0 !important; line-height: 1.3 !important; }
/* Homepage managed section on phones (user): the G2 card sits small in the photo's bottom-left corner, a hairline
   separates the photo from the "Your Zamp team" card, which runs the photo's full width below it. */
@media (max-width: 767px) {
  .z8-managed__media { padding: 0 !important; max-width: none !important; }
  html body .z8-managed__media .z12-proof { top: auto !important; left: 10px !important; bottom: 10px !important; }
  html body .z8-managed__media .z12-proof a { padding: 7px 10px 7px 7px; gap: 8px; }
  html body .z8-managed__media .z12-proof__badge { width: 32px; }
  html body .z8-managed__media .z12-proof__body > b { font-size: 12px; }
  html body .z8-managed__media .z12-proof__stars, html body .z8-managed__media .z12-proof__body { font-size: 11px; }
  .z8-managed__media { display: flex; flex-direction: column; }
  .z8-managed__photo-wrap { position: relative; }
  .z8-team { position: static !important; width: auto !important; margin: 24px 0 0 !important; padding-top: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 18px 40px -24px rgba(0,0,0,.5); }
  .z8-managed__sep { display: block; height: 1px; margin: 24px 0 0; background: rgba(255,255,255,.3); }
  .z8-managed__sep + .z8-team { margin-top: 24px !important; }
}
.z8-managed__sep { display: none; }