/* Elinom landing module cards — photographic posters.
 *
 * Every landing card surface (featured row, module gateway, Financial
 * Services, Zuto band, and the phone carousel) renders the same poster:
 * a real photograph, one cinematic scrim, and identical chrome. Desktop and
 * phone share these rules because the carousel reparents the same nodes.
 *
 * Per-module art is declared once as --card-photo / --card-tint and composed
 * by a single rule, so a module can never fall back to a flat colour wash.
 * --card-tint only shows through while the photograph decodes.
 */

/* ── Hero KPI tiles share one size ────────────────────────────────────── */

@media (width > 900px) {
html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual {
  display: grid !important;
  visibility: visible !important;
  align-items: stretch !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 168px !important;
  gap: 0.75rem !important;
}
}

html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  border-width: 1px !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__bars,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card__avatars {
  flex: 0 0 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--outstanding .kpi-card__value,
html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card--compliance .kpi-card__value {
  margin-bottom: auto !important;
}

@media (width <= 1280px) and (width > 900px) {
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 156px !important;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
  }
}

@media (max-width: 900px) {
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual.erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .kpi-card,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .kpi-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* ── One poster shell for every card surface ──────────────────────────── */
html body.erp-body #landing .unit-card,
html[data-active-module="landing"] body.erp-body #landing .unit-card,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card,
#erpLandingCarousels .unit-card,
html body.erp-body #landing .erp-fcard,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard,
#erpLandingCarousels .erp-fcard {
  --card-scrim: linear-gradient(
    180deg,
    rgb(2 6 23 / 12%) 0%,
    rgb(2 6 23 / 32%) 44%,
    rgb(2 6 23 / 78%) 76%,
    rgb(2 6 23 / 94%) 100%
  );
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgb(255 255 255 / 12%) !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background-color: var(--card-tint, #0f172a) !important;
  background-image:
    var(--card-scrim),
    linear-gradient(
      155deg,
      var(--card-tint, #0f172a) 0%,
      rgb(15 23 42 / 0.15) 52%,
      transparent 78%
    ),
    var(--card-photo, none) !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  box-shadow: 0 12px 30px rgb(2 6 23 / 34%) !important;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.38s ease,
    border-color 0.38s ease !important;
}

/* Hover / focus lift. The scrim lightens so more of the photograph shows. */
html body.erp-body #landing .unit-card:hover,
html[data-active-module="landing"] body.erp-body #landing .unit-card:hover,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card:hover,
#erpLandingCarousels .unit-card:hover,
html body.erp-body #landing .unit-card:focus-visible,
html[data-active-module="landing"] body.erp-body #landing .unit-card:focus-visible,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card:focus-visible,
#erpLandingCarousels .unit-card:focus-visible,
html body.erp-body #landing .erp-fcard:hover,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard:hover,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard:hover,
#erpLandingCarousels .erp-fcard:hover,
html body.erp-body #landing .erp-fcard:focus-visible,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard:focus-visible,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard:focus-visible,
#erpLandingCarousels .erp-fcard:focus-visible {
  --card-scrim: linear-gradient(
    180deg,
    rgb(2 6 23 / 4%) 0%,
    rgb(2 6 23 / 22%) 46%,
    rgb(2 6 23 / 70%) 78%,
    rgb(2 6 23 / 90%) 100%
  );
  transform: translateY(-10px) !important;
  border-color: rgb(255 255 255 / 30%) !important;
  box-shadow:
    0 26px 52px rgb(2 6 23 / 52%),
    0 0 0 1px rgb(99 102 241 / 34%) !important;
}

/* Content wrappers fill the poster so an inner icon (Zuto Jobs lockup)
   lines up with unit-card logos. The card owns padding; the wrapper must
   not shrink-and-sink under justify-content:flex-end. Same on desktop
   and the phone carousel. */
html body.erp-body #landing .unit-card .unit-card-body,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-card-body,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-card-body,
#erpLandingCarousels .unit-card .unit-card-body,
html body.erp-body #landing .erp-fcard .erp-fcard-content,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-content,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-content,
#erpLandingCarousels .erp-fcard .erp-fcard-content {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 6px !important;
  color: #fff !important;
}

/* Coloured module glyphs on a dark plate, top-left like Zuto lockups.
   Zuto plates keep their own 112×116 lockup rule below. */
html body.erp-body #landing .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate),
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate),
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate),
#erpLandingCarousels .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate),
html body.erp-body #landing .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate),
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate),
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate),
#erpLandingCarousels .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate) {
  --icon-ink: var(--module-accent, var(--fcard-accent, #38bdf8));
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--icon-ink) 46%, transparent) !important;
  background-color: #05070f !important;
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--icon-ink) 28%, #05070f) 0%,
    #05070f 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--icon-ink) !important;
  font-size: 1.15rem !important;
  box-shadow:
    0 8px 20px rgb(2 6 23 / 42%),
    inset 0 1px 0 color-mix(in srgb, var(--icon-ink) 22%, transparent) !important;
  flex: 0 0 auto !important;
}

html body.erp-body #landing .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate) i,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate) i,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate) i,
#erpLandingCarousels .unit-card .unit-icon-wrapper:not(.zuto-lockup-plate) i,
html body.erp-body #landing .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate) i,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate) i,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate) i,
#erpLandingCarousels .erp-fcard .erp-fcard-icon:not(.zuto-lockup-plate) i {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

html body.erp-body #landing .unit-card .unit-icon-wrapper img,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-icon-wrapper img,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-icon-wrapper img,
#erpLandingCarousels .unit-card .unit-icon-wrapper img,
html body.erp-body #landing .erp-fcard .erp-fcard-icon img,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-icon img,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-icon img,
#erpLandingCarousels .erp-fcard .erp-fcard-icon img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

/* Editorial type: title, supporting line, footer meta */
html body.erp-body #landing .unit-card h3,
html[data-active-module="landing"] body.erp-body #landing .unit-card h3,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card h3,
#erpLandingCarousels .unit-card h3,
html body.erp-body #landing .erp-fcard .erp-fcard-title,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-title,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-title,
#erpLandingCarousels .erp-fcard .erp-fcard-title {
  margin: 0 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 1.16rem !important;
  font-weight: 750 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.015em !important;
  text-shadow: 0 2px 12px rgb(2 6 23 / 62%) !important;
}

html body.erp-body #landing .unit-card p,
html[data-active-module="landing"] body.erp-body #landing .unit-card p,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card p,
#erpLandingCarousels .unit-card p,
html body.erp-body #landing .erp-fcard .erp-fcard-desc,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-desc,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-desc,
#erpLandingCarousels .erp-fcard .erp-fcard-desc {
  margin: 0 !important;
  color: rgb(241 245 249 / 92%) !important;
  -webkit-text-fill-color: rgb(241 245 249 / 92%) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 1px 10px rgb(2 6 23 / 58%) !important;
}

html body.erp-body #landing .unit-card .unit-footer,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-footer,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-footer,
#erpLandingCarousels .unit-card .unit-footer,
html body.erp-body #landing .erp-fcard .erp-fcard-footer,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-footer,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-footer,
#erpLandingCarousels .erp-fcard .erp-fcard-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  padding: 11px 0 0 !important;
  border-top: 1px solid rgb(255 255 255 / 20%) !important;
  color: rgb(226 232 240 / 92%) !important;
  -webkit-text-fill-color: rgb(226 232 240 / 92%) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

html body.erp-body #landing .unit-card .unit-footer i,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-footer i,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-footer i,
#erpLandingCarousels .unit-card .unit-footer i,
html body.erp-body #landing .erp-fcard .erp-fcard-footer i,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-footer i,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-footer i,
#erpLandingCarousels .erp-fcard .erp-fcard-footer i {
  flex: 0 0 auto !important;
  color: #fff !important;
  transition: transform 0.32s ease !important;
}

html body.erp-body #landing .unit-card:hover .unit-footer i,
html[data-active-module="landing"] body.erp-body #landing .unit-card:hover .unit-footer i,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card:hover .unit-footer i,
#erpLandingCarousels .unit-card:hover .unit-footer i,
html body.erp-body #landing .erp-fcard:hover .erp-fcard-footer i,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard:hover .erp-fcard-footer i,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard:hover .erp-fcard-footer i,
#erpLandingCarousels .erp-fcard:hover .erp-fcard-footer i {
  transform: translateX(5px) !important;
}

/* Category badge stays a bright pill over the photograph */
html body.erp-body #landing .unit-card .unit-badge,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-badge,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-badge,
#erpLandingCarousels .unit-card .unit-badge,
html body.erp-body #landing .erp-fcard .erp-fcard-badge,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-badge,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-badge,
#erpLandingCarousels .erp-fcard .erp-fcard-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgb(255 255 255 / 26%) !important;
  background: rgb(2 6 23 / 62%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Per-module photography ───────────────────────────────────────────── */
.fcard-command {
  --module-accent: var(--fcard-accent, #0ea5e9);
  --card-photo: url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=640&q=70");
  --card-tint: #0b2a4a;
}
.fcard-analytics {
  --module-accent: var(--fcard-accent, #6366f1);
  --card-photo: url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=640&q=70");
  --card-tint: #12314f;
}
.fcard-acc {
  --module-accent: var(--fcard-accent, #d97706);
  --card-photo: url("https://images.unsplash.com/photo-1633158829585-23ba8f7c8caf?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a34;
}
.fcard-acquisition {
  --module-accent: var(--fcard-accent, #db2777);
  --card-photo: url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a1f4d;
}
.fcard-website {
  --module-accent: var(--fcard-accent, #0891b2);
  --card-photo: url("https://images.unsplash.com/photo-1547658719-da2b51169166?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1d2a5a;
}
.fcard-agropro {
  --module-accent: var(--fcard-accent, #16a34a);
  --card-photo: url("https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1c3a1e;
}
.fcard-jobs {
  --module-accent: var(--fcard-accent, #16a34a);
  --card-photo: url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=640&q=70");
  --card-tint: #12385a;
}
.fcard-migration {
  --module-accent: var(--fcard-accent, #8b5cf6);
  --card-photo: url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=640&q=70");
  --card-tint: #101f4a;
}
.fcard-insurance {
  --module-accent: var(--fcard-accent, #1d4ed8);
  --card-photo: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=640&q=70");
  --card-tint: #16304f;
}
.unit-verify {
  --module-accent: #14b8a6;
  --card-photo: url("https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=640&q=70");
  --card-tint: #122f4d;
}
.unit-crm {
  --module-accent: #2563eb;
  --card-photo: url("https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1b2f5c;
}
.unit-sch {
  --module-accent: #db2777;
  --card-photo: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a2a12;
}
.unit-hr {
  --module-accent: #059669;
  --card-photo: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=640&q=70");
  --card-tint: #2a2350;
}
.unit-inv {
  --module-accent: #7c3aed;
  --card-photo: url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a2a15;
}
.unit-marketing-hub {
  --module-accent: #be185d;
  --card-photo: url("https://images.unsplash.com/photo-1557838923-2985c318be48?auto=format&fit=crop&w=640&q=70");
  --card-tint: #45203a;
}
.unit-payroll {
  --module-accent: #4f46e5;
  --card-photo: url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a2e;
}
.unit-pos {
  --module-accent: #0284c7;
  --card-photo: url("https://images.unsplash.com/photo-1556741533-6e6a62bd8b49?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a3a;
}
.unit-propertypro {
  --module-accent: #4f46e5;
  --card-photo: url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1d3350;
}
.unit-ch {
  --module-accent: #7c3aed;
  --card-photo: url("https://images.unsplash.com/photo-1438032005730-c779502df39b?auto=format&fit=crop&w=640&q=70");
  --card-tint: #2c2150;
}
.unit-timetracker {
  --module-accent: #0891b2;
  --card-photo: url("https://images.unsplash.com/photo-1501139083538-0139583c060f?auto=format&fit=crop&w=640&q=70");
  --card-tint: #0f3348;
}
.unit-proc {
  --module-accent: #0d9488;
  --card-photo: url("https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a2c12;
}
.unit-foodpro {
  --module-accent: #15803d;
  --card-photo: url("https://images.unsplash.com/photo-1556910103-1c02745aae4d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #45230f;
}
.unit-hc {
  --module-accent: #dc2626;
  --card-photo: url("https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #0f3444;
}
.unit-hotel {
  --module-accent: #ea580c;
  --card-photo: url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=640&q=70");
  --card-tint: #2b1f4d;
}
.unit-mkt {
  --module-accent: #16a34a;
  --card-photo: url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3f1f3f;
}
.unit-roster {
  --module-accent: #4f46e5;
  --card-photo: url("https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1a3050;
}
.unit-logistics {
  --module-accent: #0e7490;
  --card-photo: url("https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123650;
}
.unit-carepro {
  --module-accent: #0f766e;
  --card-photo: url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123c3c;
}
.unit-homesafe {
  --module-accent: #c2410c;
  --card-photo: url("https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=640&q=70");
  --card-tint: #2a2a4f;
}
.unit-fleettrack {
  --module-accent: #4338ca;
  --card-photo: url("https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #14304a;
}
.unit-wallet {
  --module-accent: #0a7a6a;
  --card-photo: url("https://images.unsplash.com/photo-1563013544-824ae1b704d3?auto=format&fit=crop&w=640&q=70");
  --card-tint: #0f3a30;
}
.unit-storefront {
  --module-accent: #0ea5e9;
  --card-photo: url("https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a1f45;
}
.unit-insurance {
  --module-accent: #1d4ed8;
  --card-photo: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=640&q=70");
  --card-tint: #16304f;
}
.unit-capital {
  --module-accent: #d97706;
  --card-photo: url("https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?auto=format&fit=crop&w=640&q=70");
  --card-tint: #43310f;
}
.unit-acc {
  --module-accent: #d97706;
  --card-photo: url("https://images.unsplash.com/photo-1633158829585-23ba8f7c8caf?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a34;
}
.unit-agropro {
  --module-accent: #16a34a;
  --card-photo: url("https://images.unsplash.com/photo-1500937386664-56d1dfef3854?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1c3a1e;
}
.unit-mms {
  --module-accent: #0e7490;
  --card-photo: url("https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=640&q=70");
  --card-tint: #14304a;
}
.unit-ppm {
  --module-accent: #4f46e5;
  --card-photo: url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1f2c52;
}
.unit-prints,
.unit-synth-prints {
  --module-accent: #0ea5e9;
  --card-photo: url("https://images.unsplash.com/photo-1773525912431-ee1eff5e1ab9?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3d1f30;
}
.unit-design-studio {
  --module-accent: #c026d3;
  --card-photo: url("https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&w=640&q=70");
  --card-tint: #33204d;
}
.unit-workhub {
  --module-accent: #2563eb;
  --card-photo: url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1c2f52;
}
.unit-bitcoin {
  --module-accent: #d97706;
  --card-photo: url("https://images.unsplash.com/photo-1621761191319-c6fb62004040?auto=format&fit=crop&w=640&q=70");
  --card-tint: #44300d;
}
.unit-ops-hub {
  --module-accent: #38bdf8;
  --card-photo: url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #12314f;
}
.unit-synth-bookkeeper {
  --module-accent: #d97706;
  --card-photo: url("https://images.unsplash.com/photo-1633158829585-23ba8f7c8caf?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a34;
}
.unit-synth-treasury {
  --module-accent: #0369a1;
  --card-photo: url("https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a2c;
}
.unit-synth-loyalty-engine {
  --module-accent: #db2777;
  --card-photo: url("https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?auto=format&fit=crop&w=640&q=70");
  --card-tint: #42203a;
}
.unit-synth-payment-hub {
  --module-accent: #0284c7;
  --card-photo: url("https://images.unsplash.com/photo-1580048915913-4f8f5cb481c4?auto=format&fit=crop&w=640&q=70");
  --card-tint: #12304c;
}
.unit-zuto-property {
  --card-photo: url("https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1d3350;
}
.unit-zuto-auto {
  --card-photo: url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3d1a24;
}
.unit-zuto-market {
  --card-photo: url("https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?auto=format&fit=crop&w=640&q=70");
  --card-tint: #123a30;
}
.unit-zuto-biz {
  --card-photo: url("https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=640&q=70");
  --card-tint: #1e2b52;
}
.unit-zuto-classified {
  --card-photo: url("https://images.unsplash.com/photo-1495020689067-958852a7765e?auto=format&fit=crop&w=640&q=70");
  --card-tint: #3a2417;
}
.unit-zuto-holidays {
  --card-photo: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=640&q=70");
  --card-tint: #12354a;
}
.unit-zuto-mobility {
  --card-photo: url("https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?auto=format&fit=crop&w=640&q=70");
  --card-tint: #0f3a40;
}

/* Legacy chrome: a 5px per-module accent bar and a full-bleed sheen wash still
   painted on the finance, Zuto, and gateway surfaces but not on the featured
   row, so the same module looked different in two places. The photograph and
   scrim are the whole card now, so both pseudo-elements go everywhere. */
html body.erp-body #landing .unit-card::before,
html body.erp-body #landing .unit-card::after,
html body.erp-body #landing .erp-fcard::before,
html body.erp-body #landing .erp-fcard::after,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-gateway-grid--image-cards .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-gateway-grid--image-cards .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing .erp-featured-row--image-cards .erp-fcard::before,
html[data-active-module="landing"] body.erp-body #landing .erp-featured-row--image-cards .erp-fcard::after,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .unit-card::before,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .unit-card::after,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-fcard::before,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-fcard::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* The module gateway grid zeroes card padding and rounds to 16px because its
   copy used to sit in an inner body. These selectors mirror that rule so the
   gateway, featured row, finance band, Zuto band, and carousel share one
   inset and one radius. */
html body.erp-body #landing .unit-gateway-grid--image-cards .unit-card,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid--image-cards .unit-card,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-gateway-grid--image-cards .unit-card,
html[data-active-module="landing"] body.erp-body #landing .erp-featured-row--image-cards .erp-fcard,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-featured-row--image-cards .erp-fcard,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .unit-card,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-fcard {
  padding: 20px !important;
  border-radius: 18px !important;
}

/* Financial Services and the Zuto band used to be compact 236px tiles while
   every other module was a 380px poster. These selectors mirror the inline
   landing rule they have to beat so all three surfaces match. */
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid:not(.unit-gateway-grid--image-cards) .unit-card,
html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid:not(.unit-gateway-grid--image-cards) .unit-card {
  align-self: stretch !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
}

/* Individual Zuto lockups are stacked cube + wordmark + endorsement.
   The 46px icon well would crop them; use a dark brand plate instead.
   Same plate on desktop featured/band cards and the phone carousel. */
html body.erp-body #landing .unit-card .unit-icon-wrapper.zuto-lockup-plate,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-icon-wrapper.zuto-lockup-plate,
html[data-active-module="landing"] body.erp-body #landing.module-section .unit-card .unit-icon-wrapper.zuto-lockup-plate,
#erpLandingCarousels .unit-card .unit-icon-wrapper.zuto-lockup-plate,
html body.erp-body #landing .erp-fcard .erp-fcard-icon.zuto-lockup-plate,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-icon.zuto-lockup-plate,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-fcard .erp-fcard-icon.zuto-lockup-plate,
#erpLandingCarousels .erp-fcard .erp-fcard-icon.zuto-lockup-plate,
html body.erp-body #landing .unit-card[class*="unit-zuto"] .unit-icon-wrapper,
html[data-active-module="landing"] body.erp-body #landing .unit-card[class*="unit-zuto"] .unit-icon-wrapper,
#erpLandingCarousels .unit-card[class*="unit-zuto"] .unit-icon-wrapper,
html body.erp-body #landing .erp-fcard.fcard-jobs .erp-fcard-icon,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard.fcard-jobs .erp-fcard-icon,
#erpLandingCarousels .erp-fcard.fcard-jobs .erp-fcard-icon {
  width: 112px !important;
  height: 116px !important;
  min-width: 112px !important;
  min-height: 116px !important;
  margin: 0 0 12px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  border: 1px solid rgb(255 255 255 / 14%) !important;
  background: #05070f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 20px rgb(2 6 23 / 42%) !important;
  align-self: flex-start !important;
}

html body.erp-body #landing .unit-card .unit-icon-wrapper.zuto-lockup-plate img,
html[data-active-module="landing"] body.erp-body #landing .unit-card .unit-icon-wrapper.zuto-lockup-plate img,
#erpLandingCarousels .unit-card .unit-icon-wrapper.zuto-lockup-plate img,
html body.erp-body #landing .erp-fcard .erp-fcard-icon.zuto-lockup-plate img,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard .erp-fcard-icon.zuto-lockup-plate img,
#erpLandingCarousels .erp-fcard .erp-fcard-icon.zuto-lockup-plate img,
html body.erp-body #landing .unit-card[class*="unit-zuto"] .unit-icon-wrapper img,
html[data-active-module="landing"] body.erp-body #landing .unit-card[class*="unit-zuto"] .unit-icon-wrapper img,
#erpLandingCarousels .unit-card[class*="unit-zuto"] .unit-icon-wrapper img,
html body.erp-body #landing .erp-fcard.fcard-jobs .erp-fcard-icon img,
html[data-active-module="landing"] body.erp-body #landing .erp-fcard.fcard-jobs .erp-fcard-icon img,
#erpLandingCarousels .erp-fcard.fcard-jobs .erp-fcard-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* The phone carousel keeps the shared 380px poster; only its track geometry
   (width and snapping) is phone-specific. Off-screen posters skip layout
   so a phone does not decode every Unsplash still at once. */
@media (max-width: 900px) {
  html body.erp-body #landing .unit-card,
  html body.erp-body #landing .erp-fcard,
  html[data-active-module="landing"] body.erp-body #landing .unit-card,
  html[data-active-module="landing"] body.erp-body #landing .erp-fcard,
  #erpLandingCarousels .unit-card,
  #erpLandingCarousels .erp-fcard {
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
  }
}

/* Equal poster for every module — including Marketplace as a trailing tile. */
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card,
html[data-active-module="landing"] body.erp-body #landing .erp-module-card-grid .unit-card,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card.unit-zuto-market,
html[data-active-module="landing"] body.erp-body #landing .unit-gateway-grid .unit-card.unit-mkt,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .unit-card,
html[data-active-module="landing"] body.erp-body #landing #erpLandingCarousels .erp-fcard {
  align-self: stretch !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
}