/* DE Button. Figma 1858:77092 (primary), 1858:77101 (secondary), 1880:243281 (card). */
[data-de26].de26-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  font-family: var(--de26-font-body);
  font-weight: 700;
  color: var(--de26-white);
  text-align: center;
  text-decoration: none;
  background: var(--de26-azure);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color var(--de26-transition-default), box-shadow var(--de26-transition-default), color var(--de26-transition-default);
}
/* Hover fill is an overlay that fades in (gradients and background swaps cannot be interpolated). The z-index -1
   keeps it under the label and caret, and isolation keeps it above the button's own background. */
[data-de26].de26-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--de26-gradient-hover);
  opacity: 0;
  transition: opacity var(--de26-transition-default);
}
/* The focus ring (a box-shadow halo) appears at once; only hover eases the shadow. */
[data-de26].de26-button:focus-visible { transition: background-color var(--de26-transition-default), color var(--de26-transition-default); }
[data-de26].de26-button--secondary::before,
[data-de26].de26-button--card::before { background: var(--de26-button-small-bg-hover); }
a[data-de26].de26-button:hover::before,
a[data-de26].de26-button:focus-visible::before { opacity: 1; }
[data-de26].de26-button:hover,
[data-de26].de26-button:focus { color: var(--de26-white); text-decoration: none; }
[data-de26] .de26-button__caret { display: block; flex: none; margin: 0; border: 0; }

[data-de26].de26-button--primary {
  gap: 10px;
  padding: 30px 60px;
  border-radius: 50px;
  font-size: 30px;
  line-height: 1.4;
  box-shadow: 0 4px 6px var(--de26-shadow-button);
}

[data-de26].de26-button--secondary {
  gap: var(--de26-gap-1x);
  padding: 15px var(--de26-gap-3x);
  border-radius: var(--de26-radius-button);
  font-size: 18px;
  line-height: 1;
  background: var(--de26-button-small-bg);
}
a[data-de26].de26-button--secondary:hover {
  box-shadow: var(--de26-shadow-card-soft);
}

[data-de26].de26-button--card {
  align-items: flex-end;
  gap: var(--de26-gap-1x);
  padding: 10px var(--de26-gap-2x);
  border-radius: 90px;
  font-size: 16px;
  line-height: 1;
  background: var(--de26-button-small-bg);
}


/* Phones: the Figma primary (30px label, 60px side padding) is about 317px wide with "Learn More" and wider with longer labels,
   which wraps inside a 327px phone column. Scale it down once here (a button root cannot container-query itself and may have no
   container ancestor). Long labels still wrap. */
@media (max-width: 600px) {
  [data-de26].de26-button--primary { gap: 8px; padding: 16px 24px; font-size: 20px; }
  [data-de26].de26-button--primary .de26-button__caret { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-de26].de26-button,
  [data-de26].de26-button:focus-visible,
  [data-de26].de26-button::before { transition: none; }
}