/* Montserrat — same typeface the WordPress source uses, so the rebuild reads
   the way thecxlabs.com does. Body 400/500, headings 700/800. Falls back to
   system sans-serif if the webfont fails. */
:root {
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html { font-family: var(--font-sans); }
body { font-family: var(--font-sans); line-height: 1.7; }
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-weight: 800; line-height: 1.15; }

/* Small CSS layer on top of Tailwind. Tailwind utilities handle most styling;
   anything that needs to style RICH-TEXT output (Quill HTML) lives here, since
   Tailwind utilities can't reach inside untouched HTML. */

/* Render rich-text content with sensible spacing even though we're loading
   Tailwind via the Play CDN (which doesn't include the typography plugin). */
.prose p { margin-bottom: 1em; line-height: 1.8; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: #0f172a; }
.prose em { font-style: italic; }
/* Prose links — slate-900 body with a brand-yellow underline (yellow-on-white
   would fail WCAG contrast as text, so we use it as a decoration accent only). */
.prose a { color: #0f172a; text-decoration: underline; text-decoration-color: #FAD318; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: #000; text-decoration-thickness: 3px; }
.prose ul, .prose ol { margin: 0.5em 0 1em 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.25em; }
.prose-lg p { font-size: 1.125rem; }

/* <select> with appearance-none — paint our own chevron arrow via background-image
   so the select height matches the <input> height across browsers (Safari/Chrome
   render native selects shorter than inputs even with identical padding). */
.form-select-yount {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20' stroke='%2364748b' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.1rem 1.1rem;
}

/* Testimonial carousel pills.
   Inactive dots are small grey circles. The active dot expands into a wider
   "track" pill with a sky-blue progress bar that fills over 6s and triggers
   the next slide on animationend. Hovering the carousel pauses the fill. */
.ytc-dot {
    position: relative;
    display: inline-block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(203 213 225); /* slate-300 — track / inactive color */
    overflow: hidden;
    cursor: pointer;
    border: 0;
    padding: 0;
    transition: width 0.4s ease, background-color 0.3s ease;
}
.ytc-dot:hover {
    background-color: rgb(148 163 184); /* slate-400 */
}
.ytc-dot.is-active {
    width: 2.75rem;
    cursor: default;
    background-color: rgb(203 213 225);
}
.ytc-dot-bar {
    position: absolute;
    inset: 0;
    width: 0;
    background-color: rgb(250 211 24); /* brand yellow #FAD318 */
    border-radius: 9999px;
}
.ytc-dot.is-active .ytc-dot-bar {
    animation: ytc-fill 6s linear forwards;
}
.ytc-paused .ytc-dot.is-active .ytc-dot-bar {
    animation-play-state: paused;
}
@keyframes ytc-fill {
    from { width: 0%; }
    to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ytc-dot.is-active .ytc-dot-bar { animation-duration: 12s; }
    .ytc-dot { transition: none; }
}

/* Scroll-reveal — JS adds .is-revealed when the element enters the viewport.
   Default state is hidden + nudged down; revealed state is visible + at rest. */
[data-reveal],
[data-reveal-stagger] > .is-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
[data-reveal].is-revealed,
[data-reveal-stagger] > .is-stagger-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > .is-stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}