/* OfertPilot marketing/app overrides (no Vite rebuild required). */
:root { --op-focus: #0f766e; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.px-btn:focus-visible,
.op-button:focus-visible {
  outline: 3px solid var(--op-focus);
  outline-offset: 3px;
}

.op-pending {
  font-style: italic;
  color: #8a4b12;
  background: #fff4e5;
  padding: 0 .2em;
  border-radius: 4px;
}

.px-legal-review {
  display: inline-block;
  margin-left: .5rem;
  padding: .15em .55em;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.op-demo-steps {
  display: grid;
  gap: 18px;
}
@media (min-width: 768px) {
  .op-demo-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
}
.op-demo-step {
  position: relative;
  padding: 20px 18px 18px;
  border: 1px solid var(--px-line, #e6e8ef);
  border-radius: 16px;
  background: var(--px-surface, #fff);
}
.op-demo-step b {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: .85rem;
  margin-bottom: 12px;
}
.op-demo-kicker {
  display: inline-block;
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f766e;
}
.op-demo-note { margin: 16px 0 0; font-size: .9rem; color: var(--px-muted, #5b6178); }
.px-demo-quote-note { margin: 10px 0 0; font-size: .8rem; color: var(--px-muted, #5b6178); }
.px-demo-quote-totals { margin-top: 8px; }

/* Pricing cards: equal height, recommended badge, comparison */
.px-pricing, .u-pricing {
  display: grid;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .px-pricing, .u-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.px-pricing .px-plan, .u-pricing .u-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.px-pricing .px-plan ul, .u-pricing .u-plan ul { flex: 1; }
.px-pricing .px-plan .px-btn, .u-pricing .u-plan .px-btn { margin-top: auto; }
.px-plan-vat, .op-price-meta { margin: 8px 0 0; font-size: .9rem; color: var(--px-muted, #5b6178); }
.op-compare-wrap { overflow-x: auto; margin-top: 48px; }
.op-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.op-compare th, .op-compare td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--px-line, #e6e8ef);
  vertical-align: top;
}
.op-compare thead th { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.op-compare tbody th { font-weight: 600; }
.op-billing-faq { margin-top: 56px; }
.op-form-field small, .op-form-error { color: #b42318; display: block; margin-top: 6px; }
.op-form-field.is-invalid input,
.op-form-field.is-invalid select,
.op-form-field.is-invalid textarea {
  border-color: #b42318;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}