/* Qubby shared directional icon system — replaces font/Unicode arrows */
.qubby-arrow{
  --qa-size:.9em;
  --qa-stroke:2px;
  position:relative;
  display:inline-block;
  width:var(--qa-size);
  height:var(--qa-size);
  flex:0 0 var(--qa-size);
  vertical-align:-.08em;
  color:currentColor;
  transition:transform .18s ease;
}

.qubby-arrow--right::before,
.qubby-arrow--down::before,
.qubby-arrow--up::before,
.qubby-arrow--external::before{
  content:"";
  position:absolute;
  left:7%;
  top:50%;
  width:76%;
  height:var(--qa-stroke);
  background:currentColor;
  border-radius:999px;
  transform:translateY(-50%);
}

.qubby-arrow--right::after,
.qubby-arrow--down::after,
.qubby-arrow--up::after,
.qubby-arrow--external::after{
  content:"";
  position:absolute;
  right:5%;
  top:50%;
  width:42%;
  height:42%;
  border-top:var(--qa-stroke) solid currentColor;
  border-right:var(--qa-stroke) solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
}

.qubby-arrow--down{transform:rotate(90deg)}
.qubby-arrow--up{transform:rotate(-90deg)}
.qubby-arrow--external{transform:rotate(-45deg);--qa-size:.82em}

/* Small, deliberate movement instead of a loose Unicode arrow. */
a:hover .qubby-arrow--right,
a:focus-visible .qubby-arrow--right,
button:hover .qubby-arrow--right,
button:focus-visible .qubby-arrow--right{transform:translateX(3px)}

a:hover .qubby-arrow--down,
a:focus-visible .qubby-arrow--down,
button:hover .qubby-arrow--down,
button:focus-visible .qubby-arrow--down{transform:rotate(90deg) translateX(3px)}

a:hover .qubby-arrow--up,
a:focus-visible .qubby-arrow--up{transform:rotate(-90deg) translateX(3px)}

a:hover .qubby-arrow--external,
a:focus-visible .qubby-arrow--external{transform:rotate(-45deg) translateX(3px)}

/* Keep labels and icons aligned consistently in existing buttons/links. */
.qubby-header-cta,
.button,
.mobile-buy,
.cta-button,
.support-button,
.contact-action,
.unified-footer a{
  align-items:center;
}

.qubby-header-cta .qubby-arrow,
.button .qubby-arrow,
.mobile-buy .qubby-arrow,
.cta-button .qubby-arrow,
.support-button .qubby-arrow,
.contact-action .qubby-arrow{
  margin-left:.08em;
}

@media (prefers-reduced-motion:reduce){
  .qubby-arrow{transition:none!important}
}

/* Alignment for link/button patterns used across inner pages and footer. */
.channel-button,
.unified-footer__group a,
.unified-footer__bottom a{
  display:inline-flex;
  align-items:center;
  gap:.48em;
}

.channel-button{justify-content:space-between}
.unified-footer__group a,
.unified-footer__bottom a{width:max-content;max-width:100%}