/* Custom Lumberjack Plaid Pattern */
.bg-plaid {
    background-color: #b91c1c;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,0.2) 50%, transparent 50%),
        linear-gradient(rgba(0,0,0,0.2) 50%, transparent 50%);
    background-size: 40px 40px;
}

/* Subtle wood grain texture using gradients */
.bg-wood-texture {
    background-color: #f5ebd9;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(163, 106, 56, 0.05) 10px,
        rgba(163, 106, 56, 0.05) 20px
    );
}

.saw-border { border-bottom: 8px dashed #1b3b18; }

/* FAQ accordion */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chevron { transform: rotate(180deg); }

/* Long-form text on legal pages */
.prose-wood h2 { font-family: "Alfa Slab One", cursive; font-size: 1.5rem; margin: 2rem 0 .5rem; color: #1b3b18; }
.prose-wood p, .prose-wood li { margin-bottom: .75rem; line-height: 1.7; }
.prose-wood ul { list-style: disc; padding-left: 1.5rem; }
.prose-wood a { color: #b91c1c; text-decoration: underline; }

:focus-visible { outline: 3px solid #b91c1c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Lumberjack Snore Test funnel ---------- */
.funnel-stage { min-height: 22rem; }
.funnel-stage.is-entering { animation: funnel-in .28s ease-out both; }
.funnel-stage.is-leaving { opacity: 0; transform: translateX(-16px); transition: opacity .18s ease, transform .18s ease; }
@keyframes funnel-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.funnel-option {
    display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
    background: #fff; color: #422812; font-weight: 600; font-size: 1.05rem;
    padding: .9rem 1rem; border: 4px solid #5c3a1e; border-radius: .75rem;
    box-shadow: 4px 4px 0 0 #422812; transition: transform .12s, box-shadow .12s, background-color .12s;
}
.funnel-option:hover { background: #e0f2de; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #422812; }
.funnel-option:active, .funnel-option.is-picked { transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 #422812; }
.funnel-option.is-picked { background: #e0f2de; border-color: #2d5a27; }
.funnel-letter {
    flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
    font-family: "Alfa Slab One", cursive; color: #f5ebd9; background: #b91c1c; border-radius: 9999px;
}

.funnel-bar-fill { transition: width .4s ease; }

.funnel-spinner {
    width: 4rem; height: 4rem; border-radius: 9999px;
    border: 6px solid #e0f2de; border-top-color: #b91c1c;
    animation: funnel-spin .9s linear infinite;
}
@keyframes funnel-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .funnel-stage.is-entering, .funnel-spinner { animation: none !important; }
    .funnel-stage.is-leaving { transform: none; }
}