/* Trust cluster styles. Scoped to .bvt-trust so nothing here can leak into the
   theme's own components. Colours come from the theme's :root variables in
   partials/head-assets.html, so these pages follow the site's light and dark
   modes without carrying their own palette. */

.bvt-trust {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 16px 72px;
    color: rgb(var(--text));
    font-size: 16px;
    line-height: 1.7;
}

.bvt-trust h1 {
    color: rgb(var(--txtall));
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.25;
    margin: 0 0 14px;
}

.bvt-trust .bvt-lede {
    font-size: 18px;
    line-height: 1.6;
    color: rgb(var(--txtall));
    margin: 0 0 28px;
}

.bvt-trust h2 {
    color: rgb(var(--txtall));
    font-size: 22px;
    line-height: 1.35;
    margin: 40px 0 12px;
}

.bvt-trust h3 {
    color: rgb(var(--txtall));
    font-size: 17px;
    margin: 26px 0 8px;
}

.bvt-trust p { margin: 0 0 16px; }
.bvt-trust ul, .bvt-trust ol { margin: 0 0 16px; padding-left: 22px; }
.bvt-trust li { margin-bottom: 7px; }

.bvt-trust a {
    color: rgb(var(--primary, 99 102 241));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bvt-trust a:hover { opacity: .82; }

/* Answer block. The question is the heading and the first sentence below it
   stands on its own, because that pairing is what search and answer engines
   lift out of the page. */
.bvt-answer {
    border-left: 3px solid rgba(var(--txtall), .18);
    padding-left: 18px;
    margin: 0 0 30px;
}
.bvt-answer > h2 { margin-top: 0; }
.bvt-answer > p:first-of-type { font-weight: 500; }

.bvt-facts {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 15px;
}
.bvt-facts th, .bvt-facts td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(var(--txtall), .14);
    vertical-align: top;
}
.bvt-facts th {
    color: rgb(var(--txtall));
    font-weight: 600;
    white-space: nowrap;
}
.bvt-facts td:first-child { width: 34%; }

/* Wide tables scroll inside their own box instead of pushing the page sideways
   on a phone. */
.bvt-scroll { overflow-x: auto; margin: 0 0 22px; }
.bvt-scroll .bvt-facts { margin-bottom: 0; min-width: 520px; }

.bvt-note {
    background: rgba(var(--txtall), .05);
    border: 1px solid rgba(var(--txtall), .14);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 24px;
    font-size: 15px;
}
.bvt-note p:last-child { margin-bottom: 0; }

.bvt-sources {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--txtall), .16);
    font-size: 14px;
    color: rgba(var(--text), .88);
}
.bvt-sources h2 { font-size: 17px; margin-top: 0; }
.bvt-sources li { margin-bottom: 9px; }
.bvt-verified { font-size: 13px; opacity: .75; margin-top: 14px; }

.bvt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 0 0 30px;
}
.bvt-card {
    border: 1px solid rgba(var(--txtall), .16);
    border-radius: 12px;
    padding: 18px;
}
.bvt-card h3 { margin: 0 0 6px; font-size: 16px; }
.bvt-card p { margin: 0; font-size: 15px; }