/* One button family. The reference corner is about one quarter of its height. */
:root {
  --button-ink: #07523a;
  /* Logo greens #00EC82 and #8BFF48, softened with 20% white. */
  --button-fill: linear-gradient(90deg, #33f09b 0%, #a2ff6d 100%);
  --button-edge: #329768;
}
:root body .button {
  isolation: isolate;
  overflow: hidden;
  border-color: var(--button-edge);
  border-radius: 12px;
  background: var(--button-fill);
  color: var(--button-ink);
  box-shadow: inset 0 1px 0 #ffffff40;
  transform: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
:root body .button { position: relative; }
:root body .button:is(:hover, :focus-visible) {
  background: var(--button-fill);
  border-color: var(--button-ink);
  color: var(--button-ink);
  box-shadow: inset 0 1px 0 #ffffff59;
  transform: none;
}
:root body .button:active {
  background: var(--button-fill);
  box-shadow: inset 0 1px 3px #07523a22;
  transform: none;
}
:root body .button:focus-visible {
  outline: 2px solid var(--button-ink);
  outline-offset: 3px;
}
:root body .button:is(:disabled, [aria-disabled=true]) {
  background: #eef0eb;
  color: #747d72;
  border-color: #e0e5dc;
  box-shadow: none;
  cursor: not-allowed;
}
:root body .button {
  min-height: 44px;
  padding: 12px 19px;
  border-width: 1px;
  border-style: solid;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}
:root body .platform-downloads .button + .button,
:root body .downloads #windows .button {
  --button-fill: linear-gradient(90deg, #effff4 0%, #e3ffc4 100%);
}

:root body.pricing-page .plan .button {
  --button-ink: #30363a;
  --button-fill: #fff;
  --button-edge: #ccd2d0;
  box-shadow: none;
}
:root body.pricing-page .plan .button:is(:hover, :focus-visible) {
  background: #f4f5f4;
  border-color: #939b97;
}
:root body.pricing-page .plan .button:active { background: #eceeec; }
.pricing-page .plan .button>.button-goo { display: none; }

/* One continuous color field. Transitions reverse from their current position. */
.button-goo {
  position: absolute;
  z-index: -1;
  inset: -1px -65%;
  pointer-events: none;
  background: linear-gradient(90deg, #00ec8200 0%, #00ec8252 32%, #8bff4866 62%, #8bff4800 100%);
  opacity: 0;
  transform: translateX(-24%);
  transition: transform .65s cubic-bezier(.2, .7, .2, 1), opacity .35s ease-out;
}
.button:is(:hover, :focus-visible, :active):not(:disabled, [aria-disabled=true])>.button-goo {
  opacity: 1;
  transform: translateX(12%);
}
.button:is(:disabled, [aria-disabled=true])>.button-goo { display: none; }
@media(max-width:600px) {
  :root body .button { min-height: 42px; padding: 12px 14px; }
}
@media(prefers-reduced-motion:reduce) {
  :root body .button { transition: none; }
  .button-goo { display: none; transition: none; }
}