/* ==========================================================================
   LOT — buttons only
   The single design change on top of the previous layout: one clear primary
   action per area, a quiet secondary, and calmer geometry. Nothing else about
   the site is touched. Loaded last, so it wins without editing lot-ui.css.
   ========================================================================== */

/* ---------------------------------------------------------------- base shape */
.lph-btn-outlined,
.lph-btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 24px;
  min-width: 0;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.lph-btn-outlined:focus-visible,
.lph-btn-filled:focus-visible {
  outline: 2px solid var(--accent-color, #543a93);
  outline-offset: 2px;
}

/* --------------------------------------------------- on the purple surfaces
   A white solid button is the strongest possible CTA against the purple hero,
   and reads better than two identical outlines. */
.lph-header .lph-btn-outlined,
.lph-intro-btns .lph-btn-outlined:first-child {
  border-color: #ffffff;
  background: #ffffff;
  color: #543a93 !important;
  box-shadow: 0 8px 20px -10px rgba(24, 8, 48, 0.7);
}

.lph-header .lph-btn-outlined:hover,
.lph-intro-btns .lph-btn-outlined:first-child:hover {
  background: #f3e9ff;
  border-color: #f3e9ff;
  color: #3d2a6b !important;
  transform: translateY(-1px);
}

/* secondary on purple: quiet outline, no fill */
.lph-intro-btns .lph-btn-outlined:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #ffffff !important;
  box-shadow: none;
}

.lph-intro-btns .lph-btn-outlined:nth-child(2):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* --------------------------------------------------- on the white surfaces */
.lph-btn-outlined.purple {
  border-color: #9a5fb4;
  background: #9a5fb4;
  color: #ffffff !important;
  height: 46px;
  min-width: 0;
  padding: 0 24px;
  font-size: 15px;
  box-shadow: 0 8px 20px -12px rgba(84, 58, 147, 0.85);
}

.lph-btn-outlined.purple:hover {
  background: #543a93;
  border-color: #543a93;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.lph-btn-filled {
  border-color: #9a5fb4;
  background: #9a5fb4;
  color: #ffffff !important;
  height: 46px;
  min-width: 0;
  padding: 0 26px;
  font-size: 15px;
}

.lph-btn-filled:hover {
  background: #543a93;
  border-color: #543a93;
  transform: translateY(-1px);
}

/* a quiet secondary variant for white sections, when a pair is used */
.lph-btn-outlined.ghost {
  border-color: #d8c9e8;
  background: #ffffff;
  color: #543a93 !important;
  box-shadow: none;
}

.lph-btn-outlined.ghost:hover {
  border-color: #9a5fb4;
  background: #faf7fb;
}

/* ------------------------------------------------ keep mobile taps comfortable */
@media (max-width: 560px) {
  .lph-intro-btns .lph-btn-outlined,
  .lph-btn-filled {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lph-btn-outlined,
  .lph-btn-filled {
    transition: none;
  }
}