/* Bonus page follows site 16's navy palette and informational typography. */
.bonus-banner { margin:24px auto; width:100%; max-width:850px; }
.bonus-banner-hero { max-width:100%; }
.bonus-banner img { display:block; width:100%; height:auto; border-radius:14px; }
.bonus-toc { margin:32px 0; padding:24px; border:1px solid #d6e3f5; border-left:4px solid #276fbf; border-radius:0 18px 18px 18px; background:#edf4ff; }
.bonus-toc ol { columns:2; column-gap:36px; margin-bottom:0; }
.bonus-toc li { break-inside:avoid; }
.bonus-content section,.bonus-content h3 { scroll-margin-top:100px; }
@media(max-width:600px) { .bonus-toc { padding:20px; } .bonus-toc ol { columns:1; } }

.bonus-comparison { border-collapse:collapse; text-align:left; }
.bonus-comparison caption { padding:14px 18px; font-weight:700; background:#edf4ff; color:#163e70; }
.bonus-comparison thead { background:#173e70; color:#fff; }
.bonus-comparison tbody th { font-weight:700; }
.bonus-comparison tbody tr + tr { border-top:1px solid #d9e2ef; }
.bonus-comparison tbody tr:nth-child(even) { background:#f5f8fd; }
@media(max-width:600px) {
 .bonus-content .bonus-comparison th,.bonus-content .bonus-comparison td { padding:10px 8px; font-size:13px; line-height:1.5; }
}