/* ============================================================
   MONEY PAGES — apex comparison + category landing pages.
   Layers on top of information.css + information-redesign.css, which already
   supply the nav, footer, .article-* chrome and .compare-table. Only the few
   components those files do not have live here. Tokens only, no raw hex.
   ============================================================ */

/* The lifted answer. Quiet: a hairline card, no color fill. */
.money-answer {
    border: 1px solid var(--hairline, var(--color-border));
    border-radius: var(--radius-lg, 1.25rem);
    background: var(--color-bg-secondary);
    padding: 1.35rem 1.5rem;
    margin: 0 0 2.2rem;
}
.money-answer p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--color-text-primary);
}

/* Tables must scroll inside their own box, never the page. */
.money-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.8rem;
    border: 1px solid var(--hairline, var(--color-border));
    border-radius: var(--radius-md, 0.875rem);
}
.money-table-wrap .compare-table {
    min-width: 620px;
}
.money-table-wrap .compare-table tbody tr:last-child td {
    border-bottom: none;
}

/* Bolded-entity list: the shape answer engines lift verbatim. */
.money-entities {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
}
.money-entities li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline, var(--color-border));
    line-height: 1.6;
}
.money-entities li:last-child {
    border-bottom: none;
}
.money-entities strong {
    color: var(--color-text-primary);
}

/* Numbered procedure. */
.money-steps {
    counter-reset: money-step;
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
}
.money-steps > li {
    counter-increment: money-step;
    position: relative;
    padding: 0 0 1.1rem 2.6rem;
    line-height: 1.65;
}
.money-steps > li::before {
    content: counter(money-step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--hairline, var(--color-border));
    background: var(--color-bg-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.money-steps > li strong {
    color: var(--color-text-primary);
}

/* FAQ: plain headings and answers, so the visible text matches the schema. */
.money-faq h3 {
    font-size: 1.1rem;
    margin: 1.6rem 0 0.5rem;
    color: var(--color-text-primary);
}

/* Closing CTA band. The one gradient moment on the page. */
.money-cta {
    margin: 2.6rem 0 0;
    padding: 2rem 1.75rem;
    border-radius: var(--radius-lg, 1.25rem);
    border: 1px solid var(--hairline, var(--color-border));
    background: var(--color-bg-secondary);
    text-align: center;
}
.money-cta h2 {
    margin: 0 0 0.6rem;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}
.money-cta p {
    margin: 0 0 1.3rem;
    color: var(--color-text-secondary);
}
.money-cta .btn {
    text-decoration: none;
}

/* "Keep reading" rail at the foot of the article. */
.money-related {
    margin: 2.4rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--hairline, var(--color-border));
}
.money-related h2 {
    font-size: 1.05rem;
    margin: 0 0 0.7rem;
}
.money-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

@media (max-width: 540px) {
    .money-answer {
        padding: 1.1rem 1.15rem;
    }
    .money-cta {
        padding: 1.5rem 1.15rem;
    }
}

/* The shared .article-body p justify (information-redesign.css, P6) outranked the
   centring .money-cta inherits — pin it back (ux_audit_v2 GAP2-15). */
.article-body .money-cta p { text-align: center; hyphens: manual; }