/* User-supplied Learn More button: white, thin grey outline, rounded rectangle,
   black label and a consistent northeast arrow. Load before legacy layers. */
@layer arrow-buttons {
  :root {
    --cta-height: 52px;
    --cta-radius: 18px;
    --cta-font-size: 16px;
    --cta-icon-size: 18px;
    --cta-gap: 10px;
  }
  body:not([data-page='portal']):not([data-page='auth']) :is(
    .benefit-learn, .business-features__copy a, .studio-process__copy a
  ) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cta-gap) !important;
    box-sizing: border-box !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--cta-height) !important;
    height: auto !important;
    padding: 13px 22px !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: var(--cta-radius) !important;
    background: #fff !important;
    color: #080808 !important;
    box-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-size: var(--cta-font-size) !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    transform: none !important;
    transition: border-color .18s ease, background-color .18s ease !important;
    &::before { content: none !important; display: none !important; }
    &::after {
      content: '' !important;
      display: block !important;
      position: static !important;
      width: var(--cta-icon-size) !important;
      height: var(--cta-icon-size) !important;
      flex: 0 0 var(--cta-icon-size) !important;
      margin: 0 !important;
      background: currentColor !important;
      mask: url('/assets/images/icons/cta-arrow-ne.svg') center / contain no-repeat !important;
      transform: none !important;
      border: 0 !important;
      opacity: 1 !important;
    }
    & > svg, & .icon-arrow, & > span[aria-hidden='true'] { display: none !important; }
    & :is(span:not([aria-hidden='true']), .label-wrap) {
      position: static !important; color: inherit !important; font: inherit !important;
      text-transform: none !important; letter-spacing: inherit !important;
      width: auto !important; height: auto !important; padding: 0 !important;
      transform: none !important;
    }
    &:hover { background: #fafafa !important; color: #080808 !important; border-color: #bdbdbd !important; }
    &:focus-visible { outline: 2px solid #080808 !important; outline-offset: 4px !important; }
  }
  /* Primary actions stay black; the outlined arrow treatment above is limited
     to the Features, Studio and Benefits sections. */
  body:not([data-page='portal']):not([data-page='auth']) :is(
    .hero-action, .button-frame, .sx-btn, .pr-plan__cta, .book-call__button,
    .ft__cta, .ft__news-submit, .career-submit, .contact-submit, .call-submit,
    .form-submit, button[type='submit']:not(.lc-chat__send)
  ) {
    min-height: var(--cta-height) !important;
    height: auto !important;
    padding: 13px 22px !important;
    font-size: var(--cta-font-size) !important;
    line-height: 24px !important;
    border-radius: 999px !important;
  }
  body:not([data-page='portal']):not([data-page='auth']) :is(
    .hero-action--primary, .button-frame, .sx-btn--primary, .sx-btn--accent2,
    .pr-plan__cta, .book-call__button, .ft__cta:not(.ft__cta--alt),
    .ft__news-submit, .career-submit, .contact-submit, .call-submit,
    .form-submit, button[type='submit']:not(.lc-chat__send),
    .menu-segment--cta .header-nav-link
  ) {
    background: #111111 !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    &::after { content: none !important; display: none !important; }
    &:hover { background: #292929 !important; color: #fff !important; }
    &:focus-visible { outline: 3px solid #479c73 !important; outline-offset: 4px !important; }
  }
  body:not([data-page='portal']):not([data-page='auth']) #app .pr-plan__cta { width: 100% !important; }
  body:not([data-page='portal']):not([data-page='auth']) .site-header .menu-segment--cta .header-nav-link {
    min-height: 44px !important; padding: 9px 16px !important;
    font-size: 16px !important; line-height: 24px !important;
  }
  @media (max-width: 575px) {
    body:not([data-page='portal']):not([data-page='auth']) :is(.benefit-learn, .business-features__copy a, .studio-process__copy a, .hero-action, .sx-btn, .pr-plan__cta, .ft__cta) { padding-inline: 18px !important; }
  }
  /* Button labels never break onto a second line. When two buttons sit side
     by side and run out of room, the row wraps and the buttons stack instead.
     This layer's !important outranks the unlayered white-space:normal rules
     in naka-layer.css, chat-corner.css and the line above. */
  body :is(
    .benefit-learn, .business-features__copy a, .studio-process__copy a,
    .hero-action, .button-frame, .sx-btn, .pr-plan__cta, .ed-btn, .wk__cta,
    .wp__cta, .wx__cta, .cs__cta, .hws__link, .hw__all, .book-call__button,
    .ft__cta, .ft__news-submit, .career-submit, .contact-submit, .call-submit,
    .form-submit, .auth-submit, .auth-method-button, .portal-button,
    .portal-primary-action, .portal-secondary-action, .footer-col__action,
    .wcta__secondary, .scan-card__cta, .wk__filter, .pr-tab, .lc-c-btn,
    a.button, a[class$='__cta'], .menu-segment--cta .header-nav-link,
    button[type='submit']:not(.lc-chat__send)
  ) {
    white-space: nowrap !important;
    & :is(span, .label-wrap) { white-space: nowrap !important; }
  }
  /* Cookie settings sits in the Legal link list. The site-controls layer
     turned it into a black pill too wide for the column; it reads as the
     links beside it, as editorial.css and simplify.css intend. */
  footer.ft .ft__link.footer-col__action {
    justify-content: flex-start !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--ft-muted, rgb(17 17 17 / 64%)) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    &:hover { background: none !important; color: var(--ft-ink, #111) !important; }
  }
}