/* ProposalPing site behaviour styles shared by every page. */

/* Scroll reveal: elements marked [data-appear] rise into place the first time they enter the viewport.
   Only armed once site.js has run (html.js), so the page is fully readable without JavaScript. */
.js [data-appear] {
  opacity: 0.001;
  transform: var(--at, none);
}
.js [data-appear].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--ad, 0s),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--ad, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-appear] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Buttons: on hover the label rolls up to its second copy, and dark buttons lighten slightly. */
.framer-Tz5ns {
  transition: background-color 0.25s ease;
}
.framer-Tz5ns .framer-1ee2bqc,
.framer-Tz5ns .framer-1qe2ofw {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.framer-Tz5ns:hover .framer-1ee2bqc,
.framer-Tz5ns:hover .framer-1qe2ofw,
.framer-Tz5ns:focus-visible .framer-1ee2bqc,
.framer-Tz5ns:focus-visible .framer-1qe2ofw {
  transform: translateY(-100%);
}
.framer-Tz5ns[data-dark]:hover {
  background-color: rgb(51, 54, 55) !important;
}
@media (prefers-reduced-motion: reduce) {
  .framer-Tz5ns .framer-1ee2bqc,
  .framer-Tz5ns .framer-1qe2ofw {
    transition: none;
  }
}

/* Prices: plain text in the place of Framer's animated number component. */
.pp-number {
  display: inline-block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Widgets: clickable tabs, questions and toggles. */
[data-widget][data-kind="tabs"] [data-highlight],
[data-widget][data-kind="toggle"] {
  cursor: pointer;
}

/* Tablet header menu panel. */
.pp-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  padding: 10px;
  border: 1px solid #ededed;
  border-radius: 14px;
  background: rgba(250, 250, 250, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
  font: 500 15px/1.3 "Inter Display", "Inter", system-ui, sans-serif;
}
.pp-menu-panel[hidden] {
  display: none;
}
.pp-menu-panel a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #333637;
}
.pp-menu-panel a:hover {
  background: #f0f0f0;
}
.pp-menu-panel .pp-menu-cta {
  margin-top: 6px;
  background: #111;
  color: #fff;
  text-align: center;
}
.pp-menu-panel .pp-menu-cta:hover {
  background: #333637;
}

/* Form status message shown under a submitted form. */
[data-form-status] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid;
  font-size: 0.95rem;
}
[data-form-status="info"] {
  background: rgba(59, 130, 246, 0.08);
  color: rgb(29, 78, 216);
  border-color: rgba(59, 130, 246, 0.25);
}
[data-form-status="success"] {
  background: rgba(16, 185, 129, 0.1);
  color: rgb(4, 120, 87);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-form-status="error"] {
  background: rgba(220, 38, 38, 0.08);
  color: rgb(185, 28, 28);
  border-color: rgba(220, 38, 38, 0.3);
}
button[data-loading] {
  background-color: #fa6400 !important;
  color: #fff !important;
  opacity: 0.85 !important;
  cursor: wait !important;
  pointer-events: none !important;
}
button[data-loading] * {
  color: #fff !important;
}
.pp-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pp-spin 0.7s linear infinite;
}
@keyframes pp-spin {
  to {
    transform: rotate(360deg);
  }
}