/* WordPress campaign landing pages: loaded after styles.css and lp.css on wordpress-*.html, replace-wordpress.html, business-critical-website.html only */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  z-index: 200;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-sm); }

/* Buttons: inherit the site font (form buttons do not by default) */
button.btn { font-family: inherit; line-height: inherit; }

@media (max-width: 30rem) {
  .lp-hide-sm { display: none; }
}

/* Anchor target clears the sticky header */
#site-assessment, #process { scroll-margin-top: 5rem; }
#site-assessment:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

.lp .hero .lp-subhead {
  margin: 0 0 var(--space-lg);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
  max-width: 38rem;
}
.lp .hero .hero-sub { margin-bottom: var(--space-md); }
.lp .hero .hero-ctas { margin-top: var(--space-xl); }
.lp-support {
  margin: var(--space-md) 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  max-width: 38rem;
}

/* Process strip (CSS chevrons, no arrow characters) */
.lp-strip-wrap { margin-top: var(--space-2xl); }
.lp-strip {
  list-style: none;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  counter-reset: step;
}
.lp-strip li {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  counter-increment: step;
}
.lp-strip li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.lp-strip li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  margin: 0 1rem 0 0.85rem;
  border-top: 2px solid var(--color-text-muted);
  border-right: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
}
@media (max-width: 40rem) {
  .lp-strip { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-md); }
  .lp-strip li { padding: 0.35rem 0; }
  .lp-strip li:not(:last-child)::after { display: none; }
  .lp-strip li:not(:last-child) { border-bottom: 1px solid var(--color-border); width: 100%; }
}

/* Process phases */
.phase-num { color: var(--color-text-muted); margin-right: 0.15rem; }
.phase p + p { margin-top: var(--space-sm); }

/* Callouts reuse live .callout but section p color override */
.section p.callout { color: var(--color-text); }

/* FAQs */
.faq-list { border-top: 1px solid var(--color-border); }
.faq { border-bottom: 1px solid var(--color-border); }
.faq summary {
  position: relative;
  padding: var(--space-md) 2rem var(--space-md) 0;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem; top: 50%;
  width: 0.5rem; height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.faq-answer { padding: 0 0 var(--space-md); }
.faq-answer p { margin: 0; }

/* Assessment form */
.lp-assessment { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.lp-form-card {
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
@media (max-width: 30rem) { .lp-form-card { padding: var(--space-lg); } }
.section .lp-form-note { font-size: 0.875rem; margin-bottom: var(--space-lg); }
.lp-field { margin-bottom: var(--space-lg); }
.lp-field label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
}
.lp-field .req { color: #b91c1c; }
.lp-field .opt { font-weight: 400; color: var(--color-text-muted); }
.section .lp-hint { margin: -0.125rem 0 0.375rem; font-size: 0.875rem; }
.lp-field input,
.lp-field select,
.lp-field textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid #767676;
  border-radius: var(--radius);
}
.lp-field textarea { resize: vertical; min-height: 6rem; }
.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.lp-field [aria-invalid="true"] { border-color: #b91c1c; border-width: 2px; }
.section .lp-field-error {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b91c1c;
}
.section .lp-guidance { font-size: 0.9375rem; margin-bottom: var(--space-lg); }
.lp-form-error {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border: 2px solid #b91c1c;
  border-radius: var(--radius);
  background: #fef2f2;
}
.section .lp-form-error p { margin: 0; color: #7f1d1d; font-size: 0.9375rem; }
.lp-form-error a { color: #7f1d1d; text-decoration: underline; }
.lp-form-error:focus { outline: 2px solid #7f1d1d; outline-offset: 2px; }
.lp-submit { width: 100%; }
.lp-submit[disabled] { opacity: 0.7; cursor: progress; }
@media (min-width: 40rem) { .lp-submit { width: auto; } }
.section .lp-privacy { margin-top: var(--space-lg); font-size: 0.875rem; }
.lp-privacy a, .lp-hint a { text-decoration: underline; }
.lp-success {
  padding: var(--space-lg);
  border: 2px solid #166534;
  border-radius: var(--radius);
  background: #f0fdf4;
}
.section .lp-success p { margin: 0; color: #14532d; font-weight: 600; }
.lp-success:focus { outline: 2px solid #14532d; outline-offset: 2px; }
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer links: keep underline visible for clarity */
.lp .site-footer a { text-decoration: underline; }

/* Mobile: the shared .hero padding stacks (outer + inner) and squeezes the long hero copy at 390px */
@media (max-width: 40rem) {
  .lp .hero { padding: 0; }
  .lp .hero .section-inner { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .lp .hero .btn-large { width: 100%; padding: var(--space-md) var(--space-lg); text-align: center; }
  .lp .section-cta .btn-large { padding: var(--space-md) var(--space-lg); }
}