@import url("/landing/assets/umami-design-tokens.css?v=20261004-2");

:root {
  --umami-button-primary-hover-background: #fff;
  --umami-button-primary-hover-color: #090908;
  --umami-button-white-hover-base: #ffb900;
  --umami-button-white-hover: linear-gradient(90deg, var(--umami-button-white-hover-base), #fb923c);
  --umami-button-white-hover-text: #fff;
  --umami-button-hover-shadow: 0 10px 28px rgba(255, 185, 0, 0.24);
  --umami-button-hover-scale: scale(1.02);
  --umami-button-transition: background-color 200ms ease, background-image 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease, transform 150ms ease;
}

.umami-open-app-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  padding: 10px 20px;
  color: #090908;
  box-shadow: 0 12px 30px #fff2;
  font-family: "Umami Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--umami-button-transition);
}

.umami-open-app-button__content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.umami-open-app-button svg { display: block; width: 16px; height: 16px; flex: 0 0 auto; }
.umami-open-app-button:hover:not(:disabled) {
  transform: var(--umami-button-hover-scale);
  border-color: transparent;
  background: var(--umami-button-white-hover);
  color: var(--umami-button-white-hover-text);
  box-shadow: var(--umami-button-hover-shadow);
}
.umami-open-app-button:hover:not(:disabled) svg { color: currentColor; stroke: currentColor; }
.umami-open-app-button:focus-visible { outline: 2px solid var(--umami-gold, #ffb900); outline-offset: 4px; }
header .umami-open-app-button { flex-shrink: 0; padding-inline: 24px; letter-spacing: 0; }
header .umami-open-app-button__content { gap: 6px; }

.ck-final .ck-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  width: 100%;
  max-width: 520px;
  align-items: stretch;
}
.ck-final .ck-actions > .ck-button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 16px 18px;
  font-size: 11px;
  line-height: 1.2;
}

@media (max-width: 639px) {
  .umami-open-app-button { min-height: 38px; padding: 9px 15px; }
  header .umami-open-app-button { min-height: 36px; padding: 6px 22px; font-size: 12px; font-weight: 700; text-transform: none; overflow: visible; }
  header .umami-open-app-button__prefix { display: none; }
  /* Keep a 44px touch target around the compact visual capsule. */
  header .umami-open-app-button::after { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
}

body.ck-landing :is(.umami-primary-action:not(:disabled), .umami-white-action:not(:disabled), .button-primary, .ck-button, .ck-button-gold, #header-open-app-btn, #mobile-menu-open-app-btn, .guide-cta a),
body.dev-content-design-system main :is(.umami-primary-action:not(:disabled), .umami-white-action:not(:disabled), .button-primary, .ck-button, .ck-button-gold, .guide-cta a) {
  transition: var(--umami-button-transition);
}

body.ck-landing :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled), #header-open-app-btn:hover, #mobile-menu-open-app-btn:hover),
body.dev-content-design-system main :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled)) {
  transform: var(--umami-button-hover-scale);
  border-color: transparent !important;
  background: var(--umami-button-primary-hover-background) !important;
  color: var(--umami-button-primary-hover-color) !important;
  box-shadow: var(--umami-button-hover-shadow);
  filter: none !important;
}

body.ck-landing :is(.umami-primary-action:active:not(:disabled), .button-primary:active:not(:disabled), .ck-button-gold:active:not(:disabled)),
body.dev-content-design-system main :is(.umami-primary-action:active:not(:disabled), .button-primary:active:not(:disabled), .ck-button-gold:active:not(:disabled)) {
  transform: scale(0.98);
}

body.ck-landing .button-primary:hover::before,
body.dev-content-design-system main .button-primary:hover::before {
  opacity: 0 !important;
}

body.ck-landing :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled), #header-open-app-btn:hover, #mobile-menu-open-app-btn:hover) *,
body.dev-content-design-system main :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled)) * {
  color: var(--umami-button-primary-hover-color) !important;
}

body.ck-landing :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled), #header-open-app-btn:hover, #mobile-menu-open-app-btn:hover) svg,
body.dev-content-design-system main :is(.umami-primary-action:hover:not(:disabled), .button-primary:hover:not(:disabled), .ck-button-gold:hover:not(:disabled)) svg {
  stroke: currentColor !important;
}

body.ck-landing :is(.umami-white-action:hover:not(:disabled), .ck-button:not(.ck-button-gold):hover:not(:disabled)),
body.dev-content-design-system main :is(.umami-white-action:hover:not(:disabled), .ck-button:not(.ck-button-gold):hover:not(:disabled), .guide-cta a:hover) {
  transform: var(--umami-button-hover-scale);
  border-color: transparent !important;
  background-color: var(--umami-button-white-hover-base) !important;
  background-image: var(--umami-button-white-hover) !important;
  color: var(--umami-button-white-hover-text) !important;
  box-shadow: var(--umami-button-hover-shadow);
}

body.ck-landing :is(.umami-white-action:hover:not(:disabled), .ck-button:not(.ck-button-gold):hover:not(:disabled)) *,
body.dev-content-design-system main :is(.umami-white-action:hover:not(:disabled), .ck-button:not(.ck-button-gold):hover:not(:disabled), .guide-cta a:hover) * {
  color: var(--umami-button-white-hover-text) !important;
}

body.ck-landing .ck-button-content,
body.dev-content-design-system main .ck-button-content {
  transition: color 200ms ease;
}