@charset "UTF-8";
.clipped-offset-button__stack {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.clipped-offset-button__shadow {
  position: absolute;
  inset: 0;
  background: var(--clipped-shadow, #788f71);
  z-index: 0;
  transform: translate(6px, 6px);
  clip-path: polygon(12% 0%, 100% 0%, 100% 58%, 88% 100%, 0% 100%, 0% 42%);
}
.clipped-offset-button {
  position: relative;
  z-index: 2;
  border: none;
  padding: 12px 30px;
  background: var(--clipped-bg, #ffffff);
  color: var(--clipped-text, inherit);
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  clip-path: polygon(12% 0%, 100% 0%, 100% 58%, 88% 100%, 0% 100%, 0% 42%);
  transition: transform 0.15s ease;
}
.clipped-offset-button__label {
  font: inherit;
}
.clipped-offset-button__stack:hover .clipped-offset-button {
  transform: translate(-2px, -2px);
}
.clipped-offset-button__stack:active .clipped-offset-button {
  transform: translate(6px, 6px);
}
/* =========================
   COLOR STYLES 1–4
   ========================= */
.clipped-offset-button__stack.style1 {
  --clipped-bg: #FF6D4D;
  --clipped-text: #ffffff;
  --clipped-shadow: transparent;
}
.clipped-offset-button__stack.style2 {
  --clipped-bg: #3B82F6;
  --clipped-text: #ffffff;
  --clipped-shadow: #1E40AF;
}
.clipped-offset-button__stack.style3 {
  --clipped-bg: #22C55E;
  --clipped-text: #0F172A;
  --clipped-shadow: #15803D;
}
.clipped-offset-button__stack.style4 {
  --clipped-bg: #292929;
  --clipped-text: #ffffff;
  --clipped-shadow: #15803D;
}
.clipped-offset-button__stack.style6 {
  --clipped-bg: #292929;
  --clipped-text: #ffffff;
  --clipped-shadow: transparent;
}
/* =========================
   STYLE 5 (final)
   - white button, dark text
   - shadow is #292929, NOT offset
   - shadow is bigger (acts like a border)
   - hover pushes button inward (toward center), not down/right
   ========================= */
/* thickness */
/* how much it "presses in" on hover */
.clipped-offset-button__stack.style5 {
  --clipped-bg: #ffffff;
  --clipped-text: #292929;
  --clipped-shadow: #292929;
  /* bigger shadow, centered */
  /* IMPORTANT: override the global hover/active rules */
  /* "push inward" effect = shrink slightly */
}
.clipped-offset-button__stack.style5 .clipped-offset-button__shadow {
  inset: -3px;
  transform: translate(0, 0);
}
.clipped-offset-button__stack.style5:hover .clipped-offset-button {
  transform: translate(0, 0);
}
.clipped-offset-button__stack.style5:active .clipped-offset-button {
  transform: translate(0, 0);
}
.clipped-offset-button__stack.style5:hover .clipped-offset-button {
  transform: scale(0.97);
}
.clipped-offset-button__stack.style5:active .clipped-offset-button {
  transform: scale(0.95);
}
.clipped-offset-button__stack.style5 .clipped-offset-button {
  padding: 9px 24px;
}