/* ===========================================================================
   Herboholics Funnel — below-the-fold styles
   Loaded deferred via rel=preload onload swap. Mobile-first, single 768px breakpoint.
   Apothecary aesthetic: generous whitespace, cream-on-cream, sage accents.
   =========================================================================== */

.funnel-main > * + * { border-top: 1px solid var(--herbo-border); }
.funnel-section { padding: 7vh 6vw; max-width: 100%; }
@media (min-width: 769px) { .funnel-section { padding: 8vh 8vw; } }

.funnel-section h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    text-align: center;
    margin-bottom: 1.5rem;
}
.funnel-section .funnel-section__lede {
    text-align: center;
    color: var(--herbo-text-muted);
    max-width: 36rem;
    margin: 0 auto 4vh;
    font-size: 1.05rem;
}

/* ─── Problem grid ────────────────────────────────────────────── */
.funnel-problem { background: #fffaef; }
.funnel-problem__grid {
    display: grid; gap: 3vh;
    grid-template-columns: 1fr;
}
@media (min-width: 769px) {
    .funnel-problem__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5vw; }
}
.funnel-problem__card {
    background: var(--herbo-bg);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--herbo-border);
}
.funnel-problem__icon {
    width: 44px; height: 44px;
    margin: 0 auto 1.2rem;
    color: var(--herbo-leaf);
}
.funnel-problem__card h3 {
    font-size: 1.25rem; margin-bottom: 0.6rem;
}
.funnel-problem__card p { color: var(--herbo-text-muted); font-size: 0.95rem; }

/* ─── Herb story ──────────────────────────────────────────────── */
.funnel-herb-story { background: var(--herbo-bg); }
.funnel-herb-story__wrap {
    display: grid; gap: 4vh;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 769px) {
    .funnel-herb-story__wrap { grid-template-columns: 1fr 1.1fr; gap: 5vw; }
}
.funnel-herb-story__image {
    width: 100%; border-radius: 8px;
    aspect-ratio: 4/5; object-fit: cover;
}
.funnel-herb-story h2 { text-align: left; }
.funnel-herb-story p { color: var(--herbo-text-muted); margin-bottom: 1rem; font-size: 1.05rem; }
.funnel-herb-story p strong { color: var(--herbo-primary); font-weight: 600; }

/* ─── Product reveal ──────────────────────────────────────────── */
.funnel-product-reveal { background: #fffaef; text-align: center; }
.funnel-product-reveal__hero {
    max-width: 320px; margin: 0 auto 4vh;
    aspect-ratio: 1/1; object-fit: contain;
}
.funnel-product-reveal__cols {
    display: grid; gap: 3vh;
    grid-template-columns: 1fr;
    max-width: 56rem; margin: 0 auto;
    text-align: left;
}
@media (min-width: 769px) {
    .funnel-product-reveal__cols { grid-template-columns: 1fr 1fr; gap: 3vw; }
}
.funnel-product-reveal__col {
    background: var(--herbo-bg);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--herbo-border);
}
.funnel-product-reveal__col h3 {
    font-size: 1.15rem; margin-bottom: 1rem;
    color: var(--herbo-primary);
}
.funnel-product-reveal__col ul {
    list-style: none; padding: 0; margin: 0;
}
.funnel-product-reveal__col li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--herbo-border);
    font-size: 0.95rem; color: var(--herbo-text-muted);
}
.funnel-product-reveal__col li:last-child { border-bottom: 0; }
.funnel-product-reveal__col--inside li::before { content: "🌿 "; color: var(--herbo-leaf); }
.funnel-product-reveal__col--not li::before { content: "✕ "; color: #b06060; font-weight: bold; }

/* ─── How to use ──────────────────────────────────────────────── */
.funnel-how-to-use { background: var(--herbo-bg); }
.funnel-how-to-use__steps {
    display: grid; gap: 4vh;
    grid-template-columns: 1fr;
    max-width: 56rem; margin: 0 auto;
}
@media (min-width: 769px) {
    .funnel-how-to-use__steps { grid-template-columns: repeat(3, 1fr); gap: 3vw; }
}
.funnel-how-to-use__step { text-align: center; padding: 1rem; }
.funnel-how-to-use__num {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: 3.5rem; color: var(--herbo-accent);
    line-height: 1; display: block; margin-bottom: 0.8rem;
}
.funnel-how-to-use__step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.funnel-how-to-use__step p { color: var(--herbo-text-muted); font-size: 0.95rem; }

/* ─── Results ─────────────────────────────────────────────────── */
.funnel-results { background: #fffaef; }
.funnel-results__grid {
    display: grid; gap: 3vh;
    grid-template-columns: 1fr;
    max-width: 64rem; margin: 0 auto;
}
@media (min-width: 769px) {
    .funnel-results__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5vw; }
}
.funnel-results__card {
    background: var(--herbo-bg);
    padding: 2rem 1.6rem;
    border-radius: 8px;
    border: 1px solid var(--herbo-border);
}
.funnel-results__stars {
    color: var(--herbo-accent);
    font-size: 1.1rem; margin-bottom: 0.8rem;
    letter-spacing: 2px;
}
.funnel-results__quote {
    font-size: 1rem; color: var(--herbo-text);
    margin-bottom: 1rem; font-style: italic;
}
.funnel-results__name {
    font-size: 0.9rem; color: var(--herbo-text-muted);
}
.funnel-results__name strong { color: var(--herbo-text); font-style: normal; }

/* ─── Trust badges ────────────────────────────────────────────── */
.funnel-trust { background: var(--herbo-bg); }
.funnel-trust__row {
    display: grid; gap: 3vh;
    grid-template-columns: repeat(2, 1fr);
    max-width: 64rem; margin: 0 auto;
}
@media (min-width: 769px) {
    .funnel-trust__row { grid-template-columns: repeat(4, 1fr); gap: 2vw; }
}
.funnel-trust__item { text-align: center; }
.funnel-trust__icon {
    width: 44px; height: 44px;
    margin: 0 auto 0.8rem;
    color: var(--herbo-leaf);
}
.funnel-trust__label {
    font-size: 0.9rem; color: var(--herbo-text-muted);
    line-height: 1.3;
}

/* ─── Offer block ─────────────────────────────────────────────── */
.funnel-offer {
    background: #fffaef;
    text-align: center;
    padding: 9vh 6vw;
}
.funnel-offer__price {
    display: inline-flex; align-items: baseline;
    gap: 1rem; margin-bottom: 1rem;
}
.funnel-offer__price .sale {
    font-family: 'Iowan Old Style', Georgia, serif;
    font-size: clamp(3rem, 7vw, 4.5rem);
    color: var(--herbo-primary);
    font-weight: 700;
    line-height: 1;
}
.funnel-offer__price .original {
    font-size: 1.2rem;
    text-decoration: line-through;
    color: var(--herbo-text-muted);
}
.funnel-offer__urgency {
    display: inline-block;
    background: var(--herbo-accent);
    color: var(--herbo-cta-bg);
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.funnel-offer__shipping {
    color: var(--herbo-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* ─── FAQ ─────────────────────────────────────────────────────── */
.funnel-faq { background: var(--herbo-bg); }
.funnel-faq__list { max-width: 48rem; margin: 0 auto; }
.funnel-faq__item {
    border-bottom: 1px solid var(--herbo-border);
    padding: 0.5rem 0;
}
.faq-question {
    width: 100%; text-align: left;
    background: none; border: 0; padding: 1.2rem 0;
    font-size: 1.05rem; font-weight: 600;
    color: var(--herbo-text); cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-family: inherit;
}
.faq-question::after {
    content: "+"; color: var(--herbo-accent);
    font-size: 1.4rem; transition: transform 0.2s;
}
.faq-question[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--herbo-text-muted);
    font-size: 0.98rem;
    padding: 0 0;
}
.faq-answer.open {
    max-height: 400px;
    padding: 0 0 1.5rem;
}

/* ─── Final CTA ──────────────────────────────────────────────── */
.funnel-final-cta {
    background: var(--herbo-cta-bg);
    color: var(--herbo-accent);
    text-align: center;
    padding: 12vh 6vw;
}
.funnel-final-cta h2 {
    color: var(--herbo-accent);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1.5rem;
}
.funnel-final-cta p {
    color: rgba(212,169,106,0.8);
    max-width: 32rem; margin: 0 auto 2.5rem;
}
.funnel-final-cta .funnel-cta {
    background: var(--herbo-accent);
    color: var(--herbo-cta-bg);
    border-color: var(--herbo-accent);
    font-size: 1.2rem;
    padding: 1.3rem 3rem;
}

/* ─── Animation refinements ─────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}