/* Typography */
h1, h2, h3 { font-family: 'Merriweather', serif; }
p, input, button, label { font-family: 'Inter', sans-serif; }

/* FAQ accordion — answers visible by default for crawlers/AI scrapers; JS hides/shows them */
.faq-answer { display: block; }
.faq-item.js-faq-init:not(.active) .faq-answer { display: none; }
.faq-item.active .faq-answer { display: block; }

/* -----------------------------------------------------------------------
   Floating labels
   ----------------------------------------------------------------------- */
.floating-field {
    position: relative;
}

.floating-label {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
}

/* Float up when focused or filled (placeholder not shown = has value) */
.floating-field input:focus + .floating-label,
.floating-field input:not(:placeholder-shown) + .floating-label {
    top: 0.55rem;
    transform: translateY(0);
    font-size: 0.7rem;
    color: #6b7280;
}

/* -----------------------------------------------------------------------
   Form field errors
   ----------------------------------------------------------------------- */
.field-error {
    display: block;
    text-align: left;
    padding-left: 1rem;
}
.field-error.hidden { display: none; }

input.input-error,
textarea.input-error {
    border: 2px solid #f87171 !important;
}

/* -----------------------------------------------------------------------
   Input highlight effect (CTA scroll-to-form)
   ----------------------------------------------------------------------- */
@keyframes highlight-pulse {
    0%   { box-shadow: 0 0 0 0 oklch(0.879 0.169 91.605 / 0.7); }
    70%  { box-shadow: 0 0 0 15px oklch(0.879 0.169 91.605 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(0.879 0.169 91.605 / 0); }
}

.highlight-input {
    animation: highlight-pulse 1s infinite;
    border: 4px solid oklch(0.879 0.169 91.605) !important;
}

/* -----------------------------------------------------------------------
   Submit button spinner
   ----------------------------------------------------------------------- */
.submit-btn .spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.5em;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------
   Multi-step form — kept for backwards compatibility, no longer used
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   Scroll-triggered micro-CTA banner
   ----------------------------------------------------------------------- */
.micro-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-cta.visible {
    transform: translateY(0);
}

.micro-cta.dismissed {
    transform: translateY(100%) !important;
}

@media (max-width: 767px) {
    .micro-cta {
        bottom: 60px;
    }
}

/* -----------------------------------------------------------------------
   Details/summary FAQ on get-started page
   ----------------------------------------------------------------------- */
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ''; }

/* -----------------------------------------------------------------------
   Get-started form input/textarea transitions
   ----------------------------------------------------------------------- */
.lead-form input,
.lead-form textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}