/*
 * Shared opt-in surface for rectangular content actions.
 * Only JS-decorated buttons (or the existing resource component) opt in.
 * The second :is() branch also gives enough specificity to override page-local
 * !important hover colors without changing header, hero, footer or FAQ controls.
 */
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) {
  --framed-action-bg: #000 !important;
  --framed-action-ink: var(--jvds-pixel-action-ink) !important;
  --jvds-pixel-action-base: #000;
  --jvds-pixel-action-ink: #fff;
  --jvds-pixel-button-color: #e0f94c;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  background: var(--jvds-pixel-action-base) !important;
  color: var(--jvds-pixel-action-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
}

/* g-contact actions already position themselves, sometimes absolutely. */
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):not(.g-contact-btn) { position: relative; }

/* Leave every button's dimensions, display, alignment, gap and padding intact. */
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > .jvds-pixel-button-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--jvds-pixel-cols, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--jvds-pixel-rows, 1), minmax(0, 1fr));
  align-content: stretch;
  justify-content: stretch;
  gap: 0;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) .jvds-pixel-button-cell {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--jvds-pixel-button-color);
  box-shadow: 0 0 0 1px var(--jvds-pixel-button-color);
  opacity: 0;
  transform: scale(.6);
  transform-origin: center;
  transition: opacity .36s ease-in-out var(--jvds-pixel-delay, 0s), transform .36s ease-in-out var(--jvds-pixel-delay, 0s);
}

body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) {
  z-index: 2;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jvds-pixel-action-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  transition: color .12s linear;
}

/* Position labels, not the existing absolute g-contact arrow. */
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > :is(.g-contact-btn-text, .service-hero-action-text, .service-hero-action-arrow, .jvds-pixel-action-label, svg),
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(.jvds-article-service-phone, .jvds-article-service-cta) > span:not(.jvds-pixel-button-bg) {
  position: relative;
}

/* Suppress the previous expanding circle and inset hover outline. */
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).g-contact-btn > .g-contact-btn-fill { display: none !important; }
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).g-contact-btn::before,
body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).g-contact-btn::after { content: none !important; }

body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 3px;
}

/* Preserve the resource component's single, centered text surface. */
.jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.jvds-growth.jvds-growth-links .jvds-growth-resource-actions .jvds-resource-pixel > .service-hero-action-text {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 24px;
  text-align: center;
  line-height: 1.4;
}

@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(.is-pixel-active, :focus-visible) { --jvds-pixel-action-ink: #000; }

  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(.is-pixel-active, :focus-visible) .jvds-pixel-button-cell {
    opacity: 1;
    transform: scale(1);
  }

  /* Let the central cells fill before labels become solid black. */
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(.is-pixel-active, :focus-visible) > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) {
    transition-delay: .2s;
  }

  /* The existing initializer intentionally uses a cell-free Safari surface. */
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).is-jvds-webkit-lite > .jvds-pixel-button-bg {
    display: block;
    background: var(--jvds-pixel-button-color);
    opacity: 0;
    transition: opacity .28s ease;
  }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).is-jvds-webkit-lite:is(.is-pixel-active, :hover, :focus-visible) { --jvds-pixel-action-ink: #000; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).is-jvds-webkit-lite:is(.is-pixel-active, :hover, :focus-visible) > .jvds-pixel-button-bg { opacity: 1; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
).is-jvds-webkit-lite:is(.is-pixel-active, :hover, :focus-visible) > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) {
    transition-delay: .12s;
  }
}

/* No generated cells on small screens or coarse pointers: direct feedback. */
@media (max-width: 800px), (hover: none), (pointer: coarse) {
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(:hover, :focus-visible, :active) {
    --jvds-pixel-action-base: #e0f94c;
    --jvds-pixel-action-ink: #000;
  }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) { transition: none !important; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > .jvds-pixel-button-bg { display: none; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) { transition: none; }
}

@media (max-width: 800px) {
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .jvds-resource-pixel > .service-hero-action-text {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
):is(.is-pixel-active, :hover, :focus-visible, :active) {
    --jvds-pixel-action-base: #e0f94c;
    --jvds-pixel-action-ink: #000;
  }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) { transition: none !important; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > .jvds-pixel-button-bg { display: none; }
  body :is(
  .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready,
  .jvds-growth.jvds-growth-links .jvds-growth-resource-actions .service-hero-action.jvds-resource-pixel
) > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) { transition: none; }
}

/* A feature-card action is a non-interactive child; its parent owns hover/focus. */
@media (min-width: 801px) and (hover: hover) and (pointer: fine) {
  body .jvds-growth-feature-card:is(:hover, :focus-within) .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready.jvds-growth-feature-action.is-jvds-webkit-lite {
    --jvds-pixel-action-ink: #000;
  }
  body .jvds-growth-feature-card:is(:hover, :focus-within) .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready.jvds-growth-feature-action.is-jvds-webkit-lite > .jvds-pixel-button-bg {
    opacity: 1;
  }
  body .jvds-growth-feature-card:is(:hover, :focus-within) .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready.jvds-growth-feature-action.is-jvds-webkit-lite > :not(.jvds-pixel-button-bg, .g-contact-btn-fill) {
    transition-delay: .12s;
  }
}
@media (max-width: 800px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body .jvds-growth-feature-card:is(:hover, :focus-within) .jvds-framed-pixel-action.jvds-pixel-button.is-jvds-framed-pixel-ready.jvds-growth-feature-action {
    --jvds-pixel-action-base: #e0f94c;
    --jvds-pixel-action-ink: #000;
  }
}