/* PJ / Stitchify stitched controls.
 * Seam source: app/app/pj-ui/ui/index.css (.stitched), inset 4px,
 * 1.6px dashed white at 62%. Button colors/placement remain PJ's LP design.
 * Only the label is centered; no arrow-sized empty slot or second inset seam.
 * The secondary (login) variant shares this geometry but reads as the quiet
 * companion to the primary: paper fill and an ink hairline, not a second
 * filled action competing with the CTA beside it.
 */
.button.primary-cta, .button.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  width: fit-content;
  min-width: 44px;
  max-width: 100%;
  min-height: 56px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
}
.button.primary-cta::before, .button.secondary-cta::before {
  content: none;
}
.button.primary-cta.stitched::after, .button.secondary-cta.stitched::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.6px dashed rgba(255, 255, 255, 0.62);
  border-radius: inherit;
  pointer-events: none;
}
.button.primary-cta > .button-label, .button.secondary-cta > .button-label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
}
/* Noto Sans JP ink sits above/left of its Hind-compatible line box.
 * Measured at 2x DPR: JA ink was ~2px high and ~0.8px left; Latin needs no shift.
 * Em units keep the same optical correction at header and body label sizes.
 */
:lang(ja) .button.primary-cta > .button-label,
:lang(ja) .button.secondary-cta > .button-label {
  transform: translate(.04em, .125em);
}
.button.primary-cta.header-cta, .button.secondary-cta.header-cta {
  min-height: 46px;
  padding: 11px 21px;
  font-size: 13px;
}
.option-3.audience-creator .button.primary-cta.stitched::after {
  border-color: rgba(26, 26, 46, 0.45);
}
.option-3.audience-creator .kinetic-final .button.primary-cta {
  background: var(--ink);
  color: #fff;
}
.option-3.audience-creator .kinetic-final .button.primary-cta.stitched::after {
  border-color: rgba(255, 255, 255, 0.62);
}
.button.secondary-cta.stitched {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.button.secondary-cta.stitched::after {
  border-color: rgba(26, 26, 46, 0.3);
}
.button.primary-cta.stitched:active, .button.secondary-cta.stitched:active {
  transform: translateY(1px);
}
@media (hover: hover) {
  .button.primary-cta:hover {
    background: var(--purple-hover);
    box-shadow: 0 10px 24px rgb(78 53 232 / 22%);
    transform: none;
  }
  .button.primary-cta.stitched:hover::after {
    border-color: rgba(255, 255, 255, 0.9);
  }
  /* Filling with ink keeps the pill the same size, so the row never reflows. */
  .button.secondary-cta.stitched:hover {
    background: var(--ink);
    color: #fff;
    filter: none;
    transform: none;
    box-shadow: inset 0 0 0 1px var(--ink), 0 10px 24px rgba(26, 26, 46, 0.18);
  }
  .button.secondary-cta.stitched:hover::after {
    border-color: rgba(255, 255, 255, 0.5);
  }
  /* The lime section already carries the accent, so the ink CTA stays put. */
  .option-3.audience-creator .kinetic-final .button.primary-cta:hover {
    background: #2b2b47;
    filter: none;
  }
}
@media (max-width: 639px) {
  .button.primary-cta, .button.secondary-cta {
    padding-inline: 24px;
    font-size: 15px;
  }
  .button.primary-cta.header-cta, .button.secondary-cta.header-cta {
    padding: 11px 18px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button.primary-cta, .button.secondary-cta { transition: none; }
}
@media (forced-colors: active) {
  .button.primary-cta, .button.secondary-cta { border: 2px solid ButtonText; }
  .button.primary-cta.stitched::after, .button.secondary-cta.stitched::after { border-color: ButtonText; }
}