/* ============================================================================
   Prenup interactive tools — shared styling
   Clean editorial: Poppins, navy #003366 used sparingly, thin dividers, generous
   whitespace. No boxy cards / icon-chips / accent bars.
   Used by: prenup_calculator.html, prenup_validity_checker.html, prenup_statistics.html
   ============================================================================ */
.calc-section,
.quiz-section,
.stats-section,
.poll-section,
.cite-section,
.tool-explainer {
    --tool-navy: #003366;
    --tool-navy-2: #004d80;
    --tool-ink: #1f2937;
    --tool-muted: #6b7280;
    --tool-line: #e5e7eb;
    --tool-surface: #f8fafc;
    --tool-risk: #c0392b;
    --tool-safe: #1e8449;
    --tool-amber: #b9770a;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
}

/* ── Hero band (shared across all tools; matches the free-tools hub hero) ───── */
.tool-hero-band {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw; max-width: 100vw;
    background: linear-gradient(135deg, #003366 0%, #004d80 100%);
    color: #fff;
    padding: 40px 0 52px;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
}
.tool-hero-band .container { max-width: 900px; }

/* Breadcrumb, integrated into the hero on a dark background */
.tool-hero-crumb {
    font-size: 0.82rem;
    color: #a9c3dc;
    margin: 0 0 22px;
}
.tool-hero-crumb a { color: #cfe0f0; text-decoration: none; }
.tool-hero-crumb a:hover { color: #ffffff; text-decoration: underline; }
.tool-hero-crumb span[aria-hidden] { margin: 0 7px; color: #6f92b5; }
.tool-hero-crumb .current { color: #a9c3dc; }

.tool-hero-band h1 {
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.95rem, 4.4vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 auto 18px;
    max-width: 20em;
}
.tool-hero-desc {
    font-size: 1.13rem;
    line-height: 1.65;
    color: #dbe7f2;
    max-width: 44em;
    margin: 0 auto 16px;
}
.tool-hero-desc a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.tool-hero-desc a:hover { color: #cfe0f0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tool-btn {
    display: inline-block;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tool-btn-primary { background: #003366; color: #fff; border-color: #003366; }
.tool-btn-primary:hover { background: #004d80; border-color: #004d80; color: #fff; }
.tool-btn-ghost { background: transparent; color: #003366; border-color: #cbd5e1; }
.tool-btn-ghost:hover { border-color: #003366; color: #003366; background: #f8fafc; }

/* ── Shared explainer / related ───────────────────────────────────────────── */
.tool-explainer { padding: 54px 0; border-top: 1px solid #e5e7eb; }

/* Centred header (title + intro) for the explainer sections */
.explainer-head { text-align: center; max-width: 44em; margin: 0 auto 34px; }
.explainer-head h2 {
    font-weight: 800;
    color: #003366;
    font-size: clamp(1.75rem, 3.2vw, 2.2rem);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.explainer-lead { font-size: 1.08rem; line-height: 1.7; color: #4b5563; margin: 0; }

.stats-section h2,
.cite-section h2 {
    font-weight: 800;
    color: #003366;
    font-size: 1.5rem;
    margin: 0 0 16px;
}

/* Numbered principle cards — 2×2 grid */
.explainer-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 62em;
    margin: 0 auto;
    align-items: stretch;
}
/* An odd final card (e.g. the checker's 5th) spans the full width so it never sits alone. */
.explainer-steps .explainer-step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.explainer-step {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 34px 34px 36px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.07);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.explainer-step:hover {
    box-shadow: 0 16px 40px rgba(0, 51, 102, 0.14);
    transform: translateY(-4px);
    border-color: #dbe6f2;
}
.explainer-step-text h3 {
    color: #003366;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 16px;
    line-height: 1.3;
}
.explainer-step-text p { color: #4b5768; font-size: 0.99rem; line-height: 1.75; margin: 0; }
.explainer-step-text a {
    color: #003366; font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 51, 102, 0.3); text-underline-offset: 2px;
}
.explainer-step-text a:hover { text-decoration-color: #003366; }

/* Plain bullet list (used for the statistics "Sources & notes") */
.tool-list { list-style: none; padding: 0; margin: 18px auto 0; max-width: 48em; }
.tool-list li {
    position: relative;
    padding: 0 0 14px 22px;
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
}
.tool-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #003366;
}
.tool-sources li { color: #4b5563; font-size: 0.95rem; }
.tool-note {
    font-size: 0.92rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.7;
    margin: 28px auto 0;
    max-width: 52em;
    text-align: center;
}

/* Final CTA — pulled from the homepage (.home-final-cta) so every tool matches */
.home-final-cta {
    background-color: #003366;
    padding: 60px 40px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.home-final-cta h2 { color: #ffffff; font-weight: 700; }
.home-final-cta p { color: rgba(255, 255, 255, 0.9); }
.home-final-cta-btn {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #003366 !important;
    font-weight: 600;
}
.home-final-cta-btn:hover {
    background-color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
    color: #003366 !important;
}

.tool-note a, .tool-list a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tool-note a:hover, .tool-list a:hover { color: #004d80; }

/* FAQ — accordion, matching the homepage (.seo-accordion) so styling is consistent */
.tool-faq { padding: 40px 0; border-top: 1px solid #e5e7eb; }
.tool-faq h2 {
    font-weight: 800;
    color: #003366;
    font-size: clamp(1.75rem, 3.2vw, 2.2rem);
    letter-spacing: -0.01em;
    margin: 0 0 28px;
    text-align: center;
}
.seo-accordion { display: flex; flex-direction: column; gap: 12px; }
.seo-accordion-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 51, 102, 0.06);
    border: 1px solid rgba(0, 51, 102, 0.06);
    overflow: hidden;
    transition: box-shadow 0.25s;
}
.seo-accordion-item:hover { box-shadow: 0 4px 24px rgba(0, 51, 102, 0.10); }
.seo-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;
    /* The trigger now sits INSIDE the h3.seo-accordion-title — inherit its
       typography so the question renders as the heading, not button default. */
    font: inherit;
    color: inherit;
}
.seo-accordion-trigger:hover { background: rgba(0, 51, 102, 0.02); }
.seo-accordion-trigger:focus { outline: none; }
.seo-accordion-trigger:focus-visible { outline: 2px solid #0066cc; outline-offset: -3px; border-radius: 12px; }
.seo-accordion-title { color: #003366; font-weight: 700; font-size: 1.15rem; margin: 0; line-height: 1.4; }
.seo-accordion-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f0f4f8;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease, background 0.3s;
}
.seo-accordion-icon i { color: #003366; font-size: 0.8rem; transition: transform 0.3s ease; }
.seo-accordion-trigger[aria-expanded="true"] .seo-accordion-icon { background: #003366; }
.seo-accordion-trigger[aria-expanded="true"] .seo-accordion-icon i { color: #fff; transform: rotate(180deg); }
.seo-accordion-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.35s ease; }
.seo-accordion-panel.is-open { grid-template-rows: 1fr; }
.seo-accordion-body { padding: 0 28px; overflow: hidden; min-height: 0; }
.seo-accordion-body::after { content: ""; display: block; height: 24px; }
.seo-accordion-body p { color: #3a4a5a; font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.seo-accordion-body p:last-child { margin-bottom: 0; }
.seo-accordion-body a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 51, 102, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.seo-accordion-body a:hover { text-decoration-color: #003366; }
@media (max-width: 767px) {
    .seo-accordion-trigger { padding: 16px 20px; }
    .seo-accordion-body { padding: 0 20px; }
    .seo-accordion-title { font-size: 1.05rem; }
}

/* ============================================================================
   FREE TOOLS HUB
   ============================================================================ */
.hub-hero {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw; max-width: 100vw;
    background: linear-gradient(135deg, #003366 0%, #004d80 100%);
    color: #fff;
    padding: 56px 0 60px;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
}
.hub-hero h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3rem);
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.hub-hero-lead {
    color: #dbe7f2;
    font-size: 1.12rem;
    line-height: 1.65;
    max-width: 46em;
    margin: 0 auto;
}
.hub-hero-lead a { color: #ffffff; text-decoration: underline; font-weight: 600; }
.hub-hero-lead a:hover { color: #cfe0f0; }

.hub-section { padding: 48px 0 8px; font-family: 'Poppins', Arial, sans-serif; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 18px;
    padding: 40px 34px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(2, 20, 43, 0.06);
    transition: box-shadow .18s ease, transform .18s ease;
}
.hub-card:hover {
    box-shadow: 0 16px 38px rgba(2, 20, 43, 0.12);
    transform: translateY(-4px);
    text-decoration: none;
}
.hub-card-title { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 18px; }
.hub-card-desc { font-size: 1rem; line-height: 1.65; color: #5b6b86; margin: 0 0 26px; flex: 1; }
.hub-card-desc strong { color: #2b3a52; }
.hub-card-cta {
    font-weight: 700;
    color: #003366;
    font-size: 1rem;
}
.hub-card-cta span[aria-hidden] { transition: transform .15s ease; display: inline-block; margin-left: 3px; }
.hub-card:hover .hub-card-cta span[aria-hidden] { transform: translateX(4px); }

.hub-cta-section { padding: 44px 0 8px; font-family: 'Poppins', Arial, sans-serif; }
.hub-cta-band {
    background: linear-gradient(135deg, #003366 0%, #004d80 100%);
    border-radius: 14px;
    padding: 44px 32px;
    text-align: center;
    color: #fff;
}
.hub-cta-band h2 { color: #fff; font-weight: 800; font-size: 1.7rem; margin: 0 0 12px; }
.hub-cta-band p { color: #dbe7f2; font-size: 1.02rem; line-height: 1.6; max-width: 40em; margin: 0 auto 24px; }
.hub-cta-band a { color: #fff; text-decoration: underline; }
.hub-cta-btn { background: #fff !important; color: #003366 !important; border-color: #fff !important; text-decoration: none !important; }
.hub-cta-btn:hover { background: #eef4fa !important; color: #003366 !important; }
.hub-footnote { padding: 10px 0 54px; text-align: center; font-family: 'Poppins', Arial, sans-serif; }
.hub-footnote p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #64748b;
    margin: 0 auto;
    max-width: 38em;
}
.hub-footnote a {
    color: #003366;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 2px;
}
.hub-footnote a:hover { text-decoration-color: #003366; }

/* ============================================================================
   TOOL 1 — Asset-at-risk calculator
   ============================================================================ */
.calc-section { padding: 40px 0 12px; }
.calc-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: start; }

/* Inputs — carded to match the result panel */
.calc-inputs {
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 32px 34px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}
.calc-h2 { font-weight: 800; color: #003366; font-size: 1.3rem; margin: 0 0 22px; }

.calc-field { margin-bottom: 20px; }
.calc-field > label {
    display: block;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.98rem;
    margin-bottom: 5px;
}
.calc-hint { display: block; font-size: 0.82rem; color: #6b7280; margin-bottom: 9px; line-height: 1.45; }
.calc-money {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #d8e0ea;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-money:focus-within { border-color: #003366; box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10); }
.calc-money > span {
    padding: 0 14px;
    color: #64748b;
    background: #f4f7fb;
    display: flex;
    align-items: center;
    font-weight: 700;
    border-right: 1px solid #e5e7eb;
}
.calc-money > input {
    border: 0;
    outline: 0;
    padding: 13px 15px;
    font-size: 1.08rem;
    width: 100%;
    font-family: 'Poppins', Arial, sans-serif;
    color: #1f2937;
}
.calc-money > input::placeholder { color: #b6c0cc; }

/* Result panel */
.calc-result {
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 32px 32px 34px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
    position: sticky;
    top: 96px;
}
.calc-result-kicker {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8194a7;
    margin: 0 0 9px;
}
.calc-result-figure {
    font-weight: 800;
    color: #c0392b;
    font-size: clamp(2.6rem, 6.8vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    font-variant-numeric: tabular-nums;
}
.calc-bar { display: flex; height: 13px; border-radius: 999px; overflow: hidden; background: #eef2f6; box-shadow: inset 0 1px 2px rgba(0, 51, 102, 0.06); }
.calc-bar-risk { background: linear-gradient(90deg, #b93327, #d9534f); transition: width .35s ease; }
.calc-bar-safe { background: linear-gradient(90deg, #1e8449, #27ae60); transition: width .35s ease; }
.calc-bar-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    color: #56636f;
    margin: 13px 0 22px;
    gap: 10px;
}
.calc-bar-legend span { display: inline-flex; align-items: center; }
.calc-bar-legend strong { color: #1f2937; margin-left: 5px; font-variant-numeric: tabular-nums; }
.calc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; flex: none; }
.calc-dot-risk { background: #c0392b; }
.calc-dot-safe { background: #1e8449; }
.calc-breakdown { margin: 0 0 24px; border-top: 1px solid #eef2f7; padding-top: 6px; }
.calc-breakdown > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    font-size: 0.95rem;
}
.calc-breakdown > div + div { border-top: 1px solid #f1f4f9; }
.calc-breakdown dt { color: #56636f; margin: 0; font-weight: 500; text-align: left; }
.calc-breakdown dd { color: #1f2937; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-breakdown > div:first-child dt { color: #1f2937; font-weight: 600; }
.calc-breakdown > div:first-child dd { color: #003366; }
.calc-cta { border-top: 1px solid #eef2f7; padding-top: 22px; }
.calc-cta .tool-btn { display: block; width: 100%; margin-bottom: 10px; padding: 14px 26px; }
.calc-cta .tool-btn-primary { box-shadow: 0 6px 16px rgba(0, 51, 102, 0.18); }
.calc-cta .tool-btn:last-child { margin-bottom: 0; }
.calc-benchmark {
    margin: 26px auto 0;
    padding: 18px 22px;
    background: #f1f6fb;
    border: 1px solid #e2ecf6;
    border-radius: 12px;
    font-size: 0.96rem;
    color: #374151;
    text-align: center;
    max-width: 52em;
    line-height: 1.55;
}
.calc-benchmark strong { color: #003366; }

/* ============================================================================
   TOOL 2 — Radmacher validity checker
   ============================================================================ */
.quiz-section { padding: 34px 0 14px; }

/* The quiz lives in the same card language as the calculator's input panel —
   centred, white, soft navy shadow — so the two tools read as one family. */
.quiz {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 18px;
    padding: 38px 42px 34px;
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.06);
}

.quiz-list { list-style: none; padding: 0; margin: 0; }
.quiz-q { padding: 24px 0; border-top: 1px solid #eef1f5; scroll-margin-top: 96px; }
.quiz-q:first-child { border-top: 0; padding-top: 0; }

.quiz-prompt {
    font-size: 1.08rem;
    font-weight: 700;
    color: #003366;
    margin: 0 0 14px;
    line-height: 1.5;
}
.quiz-opts { display: flex; flex-direction: column; gap: 10px; }
.quiz-opts label {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border: 1.5px solid #dbe1e8;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    color: #374151;
    background: #fff;
    transition: border-color .13s ease, background-color .13s ease, box-shadow .13s ease;
    margin: 0;
}
.quiz-opts label:hover { border-color: #8fa9c2; background: #f8fafc; }
.quiz-opts input[type="radio"] {
    /* Custom ring: the native unchecked radio is nearly invisible on white. */
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #b6c4d4;
    border-radius: 50%;
    background: #fff;
    flex: none;
    margin: 0;
    cursor: pointer;
    transition: border-color .13s ease, border-width .13s ease;
}
.quiz-opts label:hover input[type="radio"] { border-color: #8fa9c2; }
.quiz-opts input[type="radio"]:checked {
    border-color: #003366;
    border-width: 6px; /* thick ring reads as a filled dot */
}
.quiz-opts input[type="radio"]:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 3px;
    border-radius: 50%;
}
.quiz-opts label:has(input:checked) {
    border-color: #003366;
    background: #eef5fb;
    color: #0f2c52;
    font-weight: 600;
    box-shadow: 0 1px 6px rgba(0, 51, 102, 0.08);
}

.quiz-actions { margin: 30px 0 0; text-align: center; }
.quiz-actions .tool-btn {
    min-width: 240px;
    padding: 14px 34px;
    font-size: 1.05rem;
}
.quiz-error {
    color: #c0392b;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 14px 0 0;
}

/* ── Result panel ── */
.quiz-result {
    max-width: 780px;
    margin: 30px auto 0;
    scroll-margin-top: 96px; /* fixed navbar: keep the band headline visible on scrollIntoView */
    padding: 38px 42px;
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
    text-align: center;
    animation: quizResultIn .35s ease;
}
@keyframes quizResultIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-result { animation: none; }
}

.quiz-result-band { font-size: 1.55rem; font-weight: 800; margin: 0 0 18px; line-height: 1.25; }
.quiz-band-strong { color: #1e8449; }
.quiz-band-reasonable { color: #1d6fa5; }
.quiz-band-weak { color: #b9770a; }
.quiz-band-atrisk { color: #c0392b; }

.quiz-meter {
    height: 14px;
    border-radius: 7px;
    background: #e8edf2;
    overflow: hidden;
    max-width: 460px;
    margin: 0 auto;
}
.quiz-meter-fill { display: block; height: 100%; transition: width .5s ease; background: #003366; }
.quiz-fill-strong { background: #1e8449; }
.quiz-fill-reasonable { background: #1d6fa5; }
.quiz-fill-weak { background: #b9770a; }
.quiz-fill-atrisk { background: #c0392b; }

.quiz-result-score { font-size: 0.98rem; color: #4b5563; margin: 12px 0 18px; }
.quiz-result-score strong { color: #0f2c52; font-size: 1.15rem; }
.quiz-result-summary {
    font-size: 1.04rem;
    line-height: 1.65;
    color: #374151;
    max-width: 560px;
    margin: 0 auto 30px;
}

.quiz-factors-h { font-size: 1.08rem; font-weight: 700; color: #003366; margin: 0 0 14px; }
.quiz-factors {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px;
    max-width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 28px;
    text-align: left;
}
.quiz-factors li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    font-size: 0.95rem;
    color: #374151;
    border-bottom: 1px solid #eef1f5;
}
.quiz-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; flex: none; }
.quiz-factor-strong .quiz-dot { background: #1e8449; }
.quiz-factor-partial .quiz-dot { background: #d9a441; }
.quiz-factor-weak .quiz-dot { background: #c0392b; }
.quiz-factor-weak { color: #1f2937; font-weight: 600; }

.quiz-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.quiz-cta .tool-btn { margin: 0; }
.quiz-restart {
    display: inline-block;
    background: none;
    border: 0;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Poppins', Arial, sans-serif;
    padding: 4px 0;
}
.quiz-restart:hover { color: #003366; }

@media (max-width: 767px) {
    .quiz { padding: 26px 20px 24px; border-radius: 14px; }
    .quiz-q { padding: 20px 0; }
    .quiz-prompt { font-size: 1.02rem; }
    .quiz-opts label { padding: 13px 14px; font-size: 0.96rem; }
    .quiz-actions .tool-btn { width: 100%; min-width: 0; }
    .quiz-result { padding: 28px 20px; border-radius: 14px; }
    .quiz-result-band { font-size: 1.3rem; }
    .quiz-factors { grid-template-columns: 1fr; max-width: none; }
    .quiz-cta { flex-direction: column; }
    .quiz-cta .tool-btn { width: 100%; }
}

/* ============================================================================
   TOOL 3 — Statistics hub + poll
   ============================================================================ */
/* Headline stats: a KPI grid of stat tiles (value → claim → source), centred —
   replaces the old left-hugging rows that stranded half the viewport. */
.stats-section { padding: 38px 0 8px; }
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
}
.stat-tile {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid #eaf0f6;
    border-radius: 16px;
    padding: 28px 26px 24px;
    box-shadow: 0 4px 18px rgba(0, 51, 102, 0.05);
    transition: box-shadow .18s ease, transform .18s ease;
}
.stat-tile:hover {
    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.10);
    transform: translateY(-2px);
}
.stat-value {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: clamp(1.7rem, 2.4vw, 2.15rem);
    font-weight: 800;
    color: #003366;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}
.stat-claim {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
    margin: 0 0 10px;
}
.stat-src {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.6;
    margin: auto 0 0; /* pins sources to the tile base so the grid reads level */
}
.stat-src a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.stat-foot {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
    font-size: 0.9rem;
    font-weight: 600;
    color: #003366;
}
.stat-foot a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.stat-foot a:hover { color: #003366; }

/* ── Cite-this-page (closing card) ── */
.cite-section { padding: 38px 0 14px; }
.cite-card {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    padding: 34px 38px 34px;
    box-shadow: 0 12px 36px rgba(0, 51, 102, 0.08);
    text-align: center;
}
.cite-kicker {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d6fa5;
    margin: 0 0 8px;
}
.cite-card h2 {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #003366;
    margin: 0 0 8px;
}
.cite-intro {
    max-width: 480px;
    margin: 0 auto 22px;
    color: #4b5768;
    line-height: 1.65;
    font-size: 0.98rem;
}
.cite-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto;
}
.cite-line {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: left;
    background: #f4f7fb;
    border: 1px solid #e2e9f2;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 0.87rem;
    line-height: 1.5;
    color: #0f2c52;
    word-break: break-word;
}
.cite-copy-btn {
    flex: none;
    white-space: nowrap;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 0.95rem;
}
.cite-note {
    max-width: 600px;
    margin: 0 auto;
    font-size: 0.8rem;
    font-style: normal;
    color: #8492a6;
    line-height: 1.6;
}
@media (max-width: 576px) {
    .cite-card { padding: 26px 18px 24px; }
    .cite-row { flex-direction: column; }
    .cite-copy-btn { width: 100%; }
}

/* ── Themed stat groups (statistics hub expansion) ────────────────────────── */
.stats-group { padding: 34px 0 4px; }
.stats-group .explainer-head { margin-bottom: 26px; }
.stats-group .explainer-head h2 { font-size: 1.45rem; }

/* ── Stats hub architecture: jump nav, takeaways, section anchors ─────────── */
.stats-section[id], .stats-group[id] { scroll-margin-top: 96px; }

.stats-jumpnav { padding: 22px 0 0; }
.stats-jumpnav .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.stats-jumpnav a {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid #d8e0ea;
    border-radius: 999px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f2c52;
    text-decoration: none;
    transition: border-color .13s ease, background-color .13s ease;
}
.stats-jumpnav a:hover { border-color: #003366; background: #f1f6fb; color: #003366; }

.takeaways-section { padding: 26px 0 0; }
.takeaways-card {
    max-width: 860px;
    margin: 0 auto;
    background: #f6f9fd;
    border: 1px solid #dfe9f4;
    border-radius: 16px;
    padding: 26px 30px;
}
.takeaways-kicker {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1d6fa5;
    margin: 0 0 12px;
}
.takeaways-list { list-style: none; margin: 0; padding: 0; }
.takeaways-list li {
    position: relative;
    padding: 7px 0 7px 26px;
    color: #2b3a4d;
    font-size: 0.97rem;
    line-height: 1.6;
}
.takeaways-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.95em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d6fa5;
}
.takeaways-list strong { color: #0f2c52; }
.takeaways-list a { color: #0066cc; text-decoration: underline; text-underline-offset: 2px; }
.takeaways-list a:hover { color: #003366; }

.anchor-copy {
    background: none;
    border: 0;
    font-size: 0.85rem;
    margin-left: 10px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity .13s ease;
    vertical-align: middle;
}
.anchor-copy:hover { opacity: 1; }

@media (max-width: 576px) {
    .stats-jumpnav .container { gap: 8px; }
    .stats-jumpnav a { padding: 7px 13px; font-size: 0.82rem; }
    .takeaways-card { padding: 20px 18px; }
}

/* Stats page: no rule above the FAQs (the global .tool-faq border-top reads as
   a stray line after the tile grids). */
.tool-faq--flush { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .seo-accordion-panel,
    .seo-accordion-icon,
    .seo-accordion-icon i { transition: none; }
}