/* Only the three bottom public package buttons opt into this visual test. */
#root#root .ww-public [data-pricing-metallic-cta] {
  --pricing-metal-edge: #d9ac67;
  --pricing-metal-glint: #fff0c2;
  --pricing-metal-shadow: #241008;
  --pricing-metal-surface: linear-gradient(110deg, transparent 12%, #ffdc8c18 30%, #fff2c526 38%, transparent 48%, transparent 74%, #ffe3a426 88%, transparent 100%), linear-gradient(180deg, #fff0bc 0%, #dca657 5%, #815020 13%, #542d16 43%, #32180e 52%, #60351c 91%, #b67e3b 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--pricing-metal-edge) !important;
  background: var(--pricing-metal-surface) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px #201008cc;
  box-shadow: inset 0 1px 0 #fff5d9e6, inset 0 0 0 1px #4a281b99, inset 0 -3px 1px #32170fc2, 0 3px 0 var(--pricing-metal-shadow), 0 6px 10px #3f231c30, 0 0 12px #d49a4221 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#root#root .ww-public [data-pricing-metallic-cta="emerald"] {
  --pricing-metal-edge: #8bdd9d;
  --pricing-metal-glint: #e0ffe5;
  --pricing-metal-shadow: #092b1c;
  --pricing-metal-surface: linear-gradient(110deg, transparent 12%, #baffd91c 30%, #d8ffe72b 38%, transparent 48%, transparent 74%, #c2ffd226 88%, transparent 100%), linear-gradient(180deg, #ddffdf 0%, #66c18a 5%, #1c7a50 13%, #105735 43%, #083e29 52%, #135b38 91%, #54aa72 100%);
  box-shadow: inset 0 1px 0 #edfff1e6, inset 0 0 0 1px #12432e99, inset 0 -3px 1px #103322c2, 0 3px 0 var(--pricing-metal-shadow), 0 6px 10px #173c2930, 0 0 12px #59bd7521 !important;
}

#root#root .ww-public [data-pricing-metallic-cta]::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px 2px 50%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffffff26, #ffffff04);
  border-top: 1px solid #ffffff94;
  pointer-events: none;
}

#root#root .ww-public [data-pricing-metallic-cta] > span {
  position: relative;
  z-index: 1;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#root#root .ww-public [data-pricing-metallic-cta] svg {
  color: var(--pricing-metal-glint) !important;
  filter: none;
}

#root#root .ww-public [data-pricing-metallic-cta]:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--pricing-metal-surface) !important;
  filter: brightness(1.08) saturate(1.06);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fffffff5, inset 0 0 0 1px #ffffff24, inset 0 -3px 1px #130b07a6, 0 4px 0 var(--pricing-metal-shadow), 0 9px 16px #32201738, 0 0 14px #d2b16e30 !important;
}

#root#root .ww-public [data-pricing-metallic-cta]:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--pricing-metal-surface) !important;
  filter: brightness(.98);
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px #130b0780, inset 0 -1px 0 #ffffff52, 0 1px 0 var(--pricing-metal-shadow), 0 3px 6px #32201730 !important;
}

#root#root .ww-public [data-pricing-metallic-cta]:focus-visible {
  outline: 3px solid #412419 !important;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #root#root .ww-public [data-pricing-metallic-cta],
  #root#root .ww-public [data-pricing-metallic-cta] svg {
    transition: none !important;
    animation: none !important;
  }
  #root#root .ww-public [data-pricing-metallic-cta]:hover,
  #root#root .ww-public [data-pricing-metallic-cta]:active,
  #root#root .ww-public [data-pricing-metallic-cta]:hover svg {
    transform: none !important;
  }
}

/* Approved metallic chocolate lettering for public package headings only. */
#root#root .ww-public [data-pricing-metallic-heading] [data-heading-metal] {
  color: #3d2015 !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(180deg, #25120c 0%, #4c291b 18%, #895b3b 29%, #46271a 36%, #25130d 52%, #68402a 65%, #352016 75%, #28150e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 #fff7ed) drop-shadow(0 .5px .35px #2b140d38);
}

#root#root .ww-public [data-pricing-metallic-heading] > svg {
  color: #68402a !important;
  filter: drop-shadow(0 1px 0 #fff7ed);
}

@media (forced-colors: active) {
  #root#root .ww-public [data-pricing-metallic-heading] [data-heading-metal] {
    background: none;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    filter: none;
  }
}