/* Manrope as the single brand typeface — body weights 400-500, headings 700-800
   with tighter tracking. Falls back to system sans-serif if the webfont fails. */
:root {
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html { font-family: var(--font-sans); }
body { font-family: var(--font-sans); }
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    font-weight: 800;
}
h1 { letter-spacing: -0.025em; }

/* 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.65; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: #0f172a; }
.prose em { font-style: italic; }
.prose a { color: #0369a1; text-decoration: underline; }
.prose a:hover { color: #075985; }
.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(3 105 161); /* sky-700 */
    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;
    }
}