/* ============================================================
   tool-sections.css
   Shared styles for the "How It Works" timeline and FAQ
   accordion sections used on every tool page (below the tool
   card, before the footer).

   Depends on these CSS variables already defined in each tool
   page's own <style> block:
     --blue-dark, --blue-main, --heading, --subtext,
     --accent-1, --accent-2, --white

   Link this on every tool page:
     <link href="/css/tool-sections.css" rel="stylesheet" />
   ============================================================ */

/* ── Shared section wrapper ── */
.section {
    padding: 64px 0;
}

.section-badge {
    display: inline-block;
    background: #EFF6FF;
    color: var(--blue-dark);
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 10px;
}

.section-sub {
    font-size: .92rem;
    color: var(--subtext);
    line-height: 1.7;
}

/* ── How It Works (timeline) ── */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tl-item {
    display: flex;
    gap: 20px;
    padding-bottom: 28px;
    position: relative;
}

.tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: var(--accent-2);
}

.tl-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-main));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.tl-content h5 {
    font-family: 'Poppins', sans-serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 6px;
    margin-top: 8px;
}

.tl-content p {
    font-size: .86rem;
    color: var(--subtext);
    line-height: 1.65;
    margin: 0;
}

/* ── FAQ accordion ── */
.faq-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    border-color: var(--blue-main, #2563eb);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.08);
}

.faq-item.open {
    border-color: var(--blue-main, #2563eb);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: .96rem;
    font-weight: 600;
    color: var(--heading);
    transition: color 0.2s ease;
}

.faq-item.open .faq-question {
    color: var(--blue-main, #2563eb);
}

.faq-question i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.06);
    border-radius: 50%;
    color: var(--blue-main, #2563eb);
    font-size: 0.8rem;
    transition: transform .3s ease, background-color .2s ease, color .2s ease;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
    background: var(--blue-main, #2563eb);
    color: #ffffff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
    max-height: 350px;
}

.faq-answer-inner {
    padding: 0 24px 22px;
    font-size: .9rem;
    color: var(--subtext);
    line-height: 1.75;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 16px;
    margin-top: -4px;
}

@media (max-width: 767.98px) {
    .section {
        padding: 44px 0;
    }
}