/* Homepage V9 (D-034): the site's own design marks on the homepage. Every mark is an original asset already used
   elsewhere on zamp.com, placed with the same conventions (corner-anchored, unscaled, behind content):
   - graph corner (crosshair grid, .corner-pattern-black / .decor_wrap, 42% like the captured decor) on white;
   - green stepped squares (.products-tabs_image-wrapper, .split-feature_left) on deep-green fields;
   - warm two-square mark (.feature-card.is-full, .about_hero_stat) on warm panels.
   Marks are aria-free CSS backgrounds/pseudo-elements and never sit over copy, photos of people or controls. */

/* Hero: the graph corner tucks against the photo's top-left edge, in the white space beside the pill. */
.z3-hero__grid { position: relative; }
.z3-hero__media::before { content: ""; position: absolute; z-index: 0; top: 0; right: 100%; width: min(26vw, 340px); height: 148px;
  background: url('/migrated/330fecc2237961b83d5eb771f68cf5da80f3e83caa6cdc9136fc2ffa8682036a.svg') 100% 0 / 565px auto no-repeat;
  opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent); mask-image: linear-gradient(to left, #000 40%, transparent); }
.z3-hero__copy { z-index: 3; }

/* Commitment band (warm panel): the warm two-square mark in its bottom-right corner, as on full feature cards. */
.z8-commit__inner { position: relative; overflow: hidden;
  background-image: url('/migrated/61ca852e0d19092bd43a7cb94ae7d7243e323233ffc391aeb1c48e303a4b47c6.svg'); background-position: 100% 100%; background-repeat: no-repeat; }
.z8-commit__inner > * { position: relative; }

/* Managed service (deep green): stepped green squares top-left and bottom-right, as on the product tab panels. */
.z8-managed { position: relative; overflow: hidden;
  background-image: url('/migrated/a60a1871d4168ba74f983123d6f8d4d2a87f5d21a73421725e4cd298127d640a.svg'), url('/migrated/8b6ea4d6c59e8ac356e1049068cdfe7a3eb1b6702539167645ce405547f74948.svg');
  background-position: 0 0, 100% 100%; background-repeat: no-repeat; }
.z8-managed > * { position: relative; }

/* Platform bento (warm field) and integrations (white): the graph corner at the section's top-right, as on feature pages,
   kept inside the section's top padding so it never sits behind the lead. */
.z11-bento, .z3-integ { position: relative; }
.z11-bento::before, .z3-integ::before { content: ""; position: absolute; top: 0; right: 0; width: min(44vw, 620px); height: calc(var(--z3-sec-y) - 16px);
  background: url('/migrated/58e76a6f2b24513f2bc498d9d89f04d04a9a43b1f86a98f181ee49536e7cfb43.svg') 100% 0 / 565px auto no-repeat;
  opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent); mask-image: linear-gradient(to left, #000 45%, transparent); }
.z11-bento > .z3-sec__inner, .z3-integ > .z3-sec__inner { position: relative; z-index: 1; }

/* Switch CTA (deep-green panel): the split-feature marks — stepped squares top-right, small block bottom-left. */
.z9-cta__panel { background-image: url('/migrated/7538b72f7abb654b1c0c66c4b1e7e1f8e9fe7440df5c86572fcb57c22154f488.svg'), url('/migrated/cbe4144f02a5125f4a9a366d0423fdb1bca72892bf72aa32619d0118f7b6e2a7.svg');
  background-position: 100% 0, 0 100%; background-repeat: no-repeat; }
.z9-cta__panel::after { display: none; }
.z9-cta__panel > * { position: relative; }

@media (max-width: 980px) {
  .z3-hero__media::before { display: none; }
  .z11-bento::before, .z3-integ::before { width: 70vw; background-size: 420px auto; }
}
@media (max-width: 767px) {
  .z8-managed { background-size: 160px auto, 170px auto; }
  .z9-cta__panel { background-size: 100px auto, 40px auto; }
  .z8-commit__inner { background-size: 96px auto; }
}
