/* Calls to action: a plain, solid button (44px, slightly rounded) and the underlined arrow link. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease-std);
}
/* The primary action (Book a demo, Send request) carries the Seal colour; the rest stay in ink. */
.cta--primary { background: var(--primary); color: var(--on-primary); }
.cta__label { display: flex; align-items: center; }
.cta__rule { display: none; }
.cta__icon { display: flex; align-items: center; transition: transform .2s var(--ease-std); }

@media (hover: hover) {
  .cta:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
  .cta--primary:hover { background: color-mix(in srgb, var(--seal) 86%, var(--carbon)); }
  .cta:hover .cta__icon { transform: translateX(2px); }
}
/* Text link with an arrow and an underline that draws in on hover. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 13px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .25s var(--ease-std);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { width: 100%; }
.link-arrow--light { color: var(--paper); }

/* Round play button used on the walkthrough poster. */
.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.play::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .5s var(--ease-spring), background-color .3s var(--ease-std);
  grid-area: 1 / 1;
}
.play::after {
  content: "";
  grid-area: 1 / 1;
  width: 14px;
  height: 16px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 1.2 13 8 1 14.8Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 1.2 13 8 1 14.8Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.play:hover::before, .play:focus-visible::before { transform: scale(1.12); background-color: var(--paper); }
.play:focus-visible { outline-offset: -6px; }