/* ==========================================================================
   Insight Metrics FAQ — Public styles
   Same design language as the contact form: Poppins + Fraunces, orange→red→purple
   gradients, transparent card, 100vw breakout so it blends with the page.
   Prefixed .jfq- to avoid theme collisions.
   ========================================================================== */

.jfq-wrap,
.jfq-wrap * { box-sizing: border-box; }

.jfq-wrap {
    position: relative;
    left: 50%; right: 50%;
    width: 100vw;
    margin-left: -50vw; margin-right: -50vw;
    max-width: 100vw;
    padding: 48px 28px 96px;
    background: transparent;
    color: #111;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: .2px;
    overflow: hidden;
}
.jfq-wrap a { text-decoration: none; }
/* HARD RESETS — themes often uppercase buttons/headings; nuke it inside our wrap. */
.jfq-wrap h1, .jfq-wrap h2, .jfq-wrap h3, .jfq-wrap h4,
.jfq-wrap .jfq-q-heading,
.jfq-wrap .jfq-q,
.jfq-wrap .jfq-q-text,
.jfq-wrap .jfq-q-text *,
.jfq-wrap button.jfq-pill,
.jfq-wrap .jfq-pill,
.jfq-wrap .jfq-cta-title {
    text-transform: none !important;
    font-style: normal !important;
    letter-spacing: normal !important;
}
.jfq-wrap button {
    font-family: inherit !important;
    -webkit-appearance: none;
    appearance: none;
}
.jfq-wrap .jfq-headline .g { font-style: italic !important; }
.jfq-wrap .jfq-cta-title em,
.jfq-wrap .jfq-a-inner em,
.jfq-wrap .jfq-empty h4 { font-style: italic !important; }
.jfq-wrap .jfq-subhead { font-style: italic !important; }
.jfq-wrap .jfq-eyebrow,
.jfq-wrap .jfq-q-tag,
.jfq-wrap .jfq-cta-kicker,
.jfq-wrap .jfq-group-heading { text-transform: uppercase !important; letter-spacing: 2px !important; }
.jfq-wrap .jfq-hero,
.jfq-wrap .jfq-toolbar,
.jfq-wrap .jfq-body,
.jfq-wrap .jfq-cta {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.jfq-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.jfq-blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.jfq-blob-1 { top: -160px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, #F97316 0%, transparent 65%); opacity: .08; }
.jfq-blob-2 { top: 40%; left: -180px; width: 360px; height: 360px; background: radial-gradient(circle, #DC2626 0%, transparent 65%); opacity: .05; }
.jfq-blob-3 { bottom: -140px; right: 18%; width: 320px; height: 320px; background: radial-gradient(circle, #7C3AED 0%, transparent 65%); opacity: .04; }

/* HERO */
.jfq-hero { position: relative; z-index: 1; text-align: center; padding: 40px 20px 48px; }
.jfq-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 2.5px; text-transform: uppercase; color: #9A3412;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: .5px solid rgba(0,0,0,.06);
    padding: 8px 16px; border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    margin-bottom: 24px;
}
.jfq-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg,#F97316,#DC2626);
    box-shadow: 0 0 10px rgba(249,115,22,.6);
}
.jfq-headline {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 84px; font-weight: 400; line-height: .94;
    letter-spacing: -3.2px; color: #111; margin: 0 0 22px;
}
.jfq-headline .g {
    background: linear-gradient(135deg,#F97316 0%,#DC2626 50%,#7C3AED 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-style: italic; font-weight: 500;
}
.jfq-divider { width: 56px; height: 1px; background: linear-gradient(90deg,transparent,#DC2626,transparent); margin: 0 auto 22px; }
.jfq-subhead {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px; font-weight: 400; color: #4B5563;
    line-height: 1.55; max-width: 620px; margin: 0 auto;
    letter-spacing: -.2px; font-style: italic;
}
.jfq-flourish { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; color: #9A3412; }
.jfq-flourish-line { width: 64px; height: .5px; background: linear-gradient(90deg,transparent,#D97706); }
.jfq-flourish-line.r { background: linear-gradient(90deg,#D97706,transparent); }
.jfq-flourish-sym { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 16px; }

/* TOOLBAR: search + pills */
.jfq-toolbar { position: relative; z-index: 1; margin-top: 8px; margin-bottom: 28px; }

.jfq-search {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: .5px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: 12px 16px 12px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: all .25s;
    margin-bottom: 18px;
}
.jfq-search:focus-within {
    border-color: rgba(249,115,22,.45);
    box-shadow: 0 0 0 4px rgba(249,115,22,.1), 0 10px 30px rgba(249,115,22,.1);
}
.jfq-search > svg { width: 18px; height: 18px; color: #9A3412; flex-shrink: 0; }
.jfq-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 15px; font-family: inherit; color: #111;
    padding: 6px 0;
    min-width: 0;
}
.jfq-search input::placeholder { color: #9CA3AF; font-style: italic; }
.jfq-search-clear {
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: #F3F4F6; color: #6B7280;
    font-size: 18px; line-height: 1; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .2s;
    -webkit-tap-highlight-color: transparent;
}
.jfq-search-clear:hover { background: #E5E7EB; color: #111; }
.jfq-search.has-value .jfq-search-clear { display: flex; }

.jfq-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.jfq-pill {
    border: .5px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.65);
    color: #4B5563;
    font-family: inherit;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .4px;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
}
.jfq-pill:hover { border-color: rgba(249,115,22,.35); color: #9A3412; }
.jfq-pill.active {
    background: linear-gradient(135deg,#111,#1a1a1a);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* LIST */
.jfq-body { position: relative; z-index: 1; }
.jfq-list-wrap { display: flex; flex-direction: column; gap: 40px; }

/* CATEGORY GROUPS — H2 headings */
.jfq-group { position: relative; }
.jfq-group.hidden { display: none; }
.jfq-group-heading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #9A3412;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: .5px solid rgba(0,0,0,.06);
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    margin: 0 0 16px;
}
.jfq-group-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg,#F97316,#DC2626,#7C3AED);
    box-shadow: 0 0 10px rgba(249,115,22,.6);
    flex-shrink: 0;
}
.jfq-group-text { line-height: 1; }
.jfq-group-items { display: flex; flex-direction: column; gap: 12px; }

/* Reset H3 wrapping the question button — semantic H3 but visually inherits.
   Aggressive resets below kill theme interference (e.g. theme uppercasing H3). */
.jfq-q-heading {
    margin: 0;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
}
.jfq-wrap .jfq-q-heading,
.jfq-wrap .jfq-q,
.jfq-wrap .jfq-q-text {
    text-transform: none !important;
}

.jfq-item {
    position: relative;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: .5px solid rgba(0,0,0,.07);
    border-radius: 18px;
    box-shadow: 0 6px 22px rgba(0,0,0,.03);
    transition: border-color .25s, box-shadow .25s, transform .25s;
    overflow: hidden;
}
.jfq-item.hidden { display: none; }
.jfq-item:hover { border-color: rgba(249,115,22,.25); }
.jfq-item.open {
    border-color: rgba(249,115,22,.35);
    box-shadow: 0 14px 36px rgba(249,115,22,.08);
}

.jfq-q {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: 64px;
}
.jfq-q-tag {
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: #9A3412;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(124,58,237,.1));
    border: .5px solid rgba(249,115,22,.2);
    white-space: nowrap;
    flex-shrink: 0;
}
.jfq-q-text {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15.5px; font-weight: 600;
    color: #111;
    line-height: 1.45;
    letter-spacing: -.1px;
}
.jfq-q-toggle {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(249,115,22,.08);
    color: #DC2626;
    transition: transform .3s cubic-bezier(.4,0,.2,1), background .25s;
    flex-shrink: 0;
}
.jfq-q-toggle svg { width: 16px; height: 16px; }
.jfq-item.open .jfq-q-toggle {
    background: linear-gradient(135deg,#F97316,#DC2626);
    color: #fff;
    transform: rotate(-180deg);
}

.jfq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1);
}
.jfq-a-inner {
    padding: 0 22px 22px;
    padding-top: 4px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #374151;
    font-family: 'Poppins', sans-serif;
}
.jfq-a-inner strong { color: #111; font-weight: 600; }
.jfq-a-inner em { font-family: 'Fraunces', Georgia, serif; color: #9A3412; font-style: italic; }
.jfq-a-inner a { color: #DC2626; font-weight: 500; border-bottom: 1px dashed rgba(220,38,38,.4); }
.jfq-a-inner a:hover { border-bottom-style: solid; }
.jfq-a-inner code {
    background: #F9FAFB;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #111;
    border: 1px solid rgba(0,0,0,.05);
}

.jfq-inline-link { color: #DC2626; font-weight: 500; border-bottom: 1px dashed rgba(220,38,38,.4); }
.jfq-inline-link:hover { border-bottom-style: solid; }

/* EMPTY STATE */
.jfq-empty {
    text-align: center;
    padding: 56px 24px;
    color: #6B7280;
}
.jfq-empty-ico {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(249,115,22,.1), rgba(124,58,237,.1));
    color: #9A3412;
    margin: 0 auto 18px;
}
.jfq-empty-ico svg { width: 28px; height: 28px; }
.jfq-empty h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 500; color: #111;
    letter-spacing: -.4px; margin: 0 0 8px;
}
.jfq-empty p { font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6; }

/* CTA */
.jfq-cta { position: relative; z-index: 1; margin-top: 48px; }
.jfq-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 26px 28px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: .5px solid rgba(0,0,0,.07);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.04);
    overflow: hidden;
}
.jfq-cta-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg,#F97316,#DC2626,#7C3AED);
}
.jfq-cta-ico {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#FFF4EA,#FED7AA);
    color: #DC2626;
    box-shadow: inset 0 0 0 .5px rgba(220,38,38,.15);
    flex-shrink: 0;
}
.jfq-cta-ico svg { width: 24px; height: 24px; }
.jfq-cta-body { min-width: 0; }
.jfq-cta-kicker {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: #9A3412; margin-bottom: 6px;
}
.jfq-cta-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px; font-weight: 400; line-height: 1.1;
    letter-spacing: -.8px; margin: 0 0 6px;
    color: #111;
}
.jfq-cta-title em {
    background: linear-gradient(135deg,#F97316,#DC2626);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-style: italic; font-weight: 500;
}
.jfq-cta-body p { font-size: 13.5px; color: #6B7280; line-height: 1.6; margin: 0; }
.jfq-cta-body p strong { color: #111; font-weight: 600; }
.jfq-cta-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 18px 14px 22px;
    background: linear-gradient(90deg,#111,#1a1a1a);
    color: #fff;
    border-radius: 14px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    box-shadow: 0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.jfq-cta-btn:hover { transform: translateY(-2px); }
.jfq-cta-arrow {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg,#F97316,#DC2626);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(249,115,22,.5);
    transition: transform .3s;
}
.jfq-cta-btn:hover .jfq-cta-arrow { transform: rotate(-45deg); }
.jfq-cta-arrow svg { width: 14px; height: 14px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .jfq-wrap { padding: 40px 22px 80px; }
    .jfq-hero { padding: 24px 8px 40px; }
    .jfq-headline { font-size: 64px; letter-spacing: -2.6px; }
    .jfq-subhead { font-size: 17px; }
}

@media (max-width: 640px) {
    .jfq-wrap { padding: 28px 16px 64px; }

    .jfq-hero { padding: 12px 0 32px; }
    .jfq-eyebrow { font-size: 9px; letter-spacing: 2px; padding: 7px 14px; margin-bottom: 18px; }
    .jfq-headline { font-size: 42px; letter-spacing: -1.6px; margin-bottom: 18px; line-height: .98; }
    .jfq-divider { width: 44px; margin-bottom: 18px; }
    .jfq-subhead { font-size: 15px; }
    .jfq-flourish { margin-top: 22px; }
    .jfq-flourish-line { width: 36px; }

    .jfq-toolbar { margin-bottom: 22px; }
    .jfq-search { padding: 10px 14px 10px 16px; border-radius: 14px; }
    .jfq-search input { font-size: 16px; /* prevent iOS zoom */ }
    .jfq-search > svg { width: 16px; height: 16px; }

    .jfq-pills {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 2px 6px;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .jfq-pills::-webkit-scrollbar { display: none; }
    .jfq-pill {
        padding: 9px 16px;
        font-size: 11.5px;
        scroll-snap-align: start;
        flex-shrink: 0;
        min-width: max-content;
    }

    .jfq-list-wrap { gap: 36px; }
    .jfq-group-heading { font-size: 10px; letter-spacing: 2px; padding: 7px 14px; margin-bottom: 14px; }
    .jfq-group-items { gap: 10px; }

    .jfq-item { border-radius: 16px; }
    .jfq-q {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        padding: 16px 18px;
        gap: 8px 12px;
        min-height: 0;
    }
    .jfq-q-tag {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        justify-self: start;
        font-size: 8.5px;
        padding: 4px 9px;
    }
    .jfq-q-text {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        font-size: 14.5px;
        line-height: 1.4;
    }
    .jfq-q-toggle {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        align-self: center;
        width: 32px; height: 32px;
    }
    .jfq-q-toggle svg { width: 14px; height: 14px; }
    .jfq-a-inner { padding: 0 18px 18px; font-size: 14px; line-height: 1.65; }

    .jfq-empty { padding: 44px 16px; }
    .jfq-empty h4 { font-size: 20px; }

    .jfq-cta { margin-top: 36px; }
    .jfq-cta-card {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 16px;
        padding: 22px 20px;
        text-align: left;
        border-radius: 18px;
    }
    .jfq-cta-ico { width: 46px; height: 46px; border-radius: 13px; }
    .jfq-cta-title { font-size: 22px; letter-spacing: -.5px; }
    .jfq-cta-body p { font-size: 13px; }
    .jfq-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 18px;
        font-size: 11px;
        letter-spacing: 1.3px;
    }
}

@media (max-width: 400px) {
    .jfq-wrap { padding: 22px 14px 56px; }
    .jfq-headline { font-size: 36px; letter-spacing: -1.2px; }
    .jfq-subhead { font-size: 14px; }
    .jfq-q-text { font-size: 14px; }
    .jfq-cta-title { font-size: 20px; }
    .jfq-list-wrap { gap: 32px; }
    .jfq-group-heading { font-size: 10px; padding: 7px 14px; margin-bottom: 12px; }
}