/* Extracted from site/compare.html on 2026-04-14 */

.wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px 80px; }
        h1 { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 8px; }
        .sub { text-align: center; color: var(--text-secondary); margin-bottom: 40px; font-size: 16px; max-width: 600px; margin-left: auto; margin-right: auto; }
        .verdict { background: var(--accent); color: white; border-radius: 12px; padding: 24px 32px; text-align: center; margin-bottom: 48px; }
        .verdict h2 { font-size: 22px; margin-bottom: 8px; color: white; }
        .verdict p { font-size: 15px; opacity: 0.9; margin: 0; }
        table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden;
            border: 1.5px solid var(--border); margin-bottom: 48px; }
        th, td { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--border); font-size: 13px; }
        th { background: #f9fafb; font-weight: 700; font-size: 11px; text-transform: uppercase; color: var(--text-muted); position: sticky; top: 0; }
        th.us { background: var(--accent); color: white; font-size: 12px; }
        th:first-child { text-align: left; padding-left: 16px; }
        td:first-child { text-align: left; font-weight: 600; color: var(--text-primary); font-size: 14px; padding-left: 16px; }
        .breakdowns-heading { text-align: center; font-size: 24px; margin-bottom: 24px; }
        .yes { color: var(--accent); font-weight: 700; }
        .no { color: #ccc; }
        .us-cell { background: #f0f4ff; font-weight: 700; color: var(--accent); }
        .bad { color: #ef4444; font-weight: 600; }
        .section-row td { background: #f9fafb; font-weight: 800; font-size: 12px; text-transform: uppercase; color: var(--accent);
            letter-spacing: 0.5px; padding: 20px 16px 8px; border-bottom: 2px solid var(--accent-light); }
        tr:last-child td { border-bottom: none; }
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
        .detail-card { padding: 24px; border: 1.5px solid var(--border); border-radius: 12px; }
        .detail-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
        .detail-card .fee { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
        .detail-card .fee.good { color: var(--accent); }
        .detail-card .fee.bad { color: #ef4444; }
        .detail-card ul { padding-left: 18px; margin: 0; }
        .detail-card li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; }
        .detail-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0; }
        .footnote { font-size: 12px; color: var(--text-muted); font-style: italic; margin: -24px 0 48px; line-height: 1.6; max-width: 800px; }
        .detail-card .tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 12px; }
        .tag-green { background: #dcfce7; color: #166534; }
        .tag-red { background: #fee2e2; color: #991b1b; }
        .tag-yellow { background: #fef9c3; color: #854d0e; }
        .cta { text-align: center; margin-top: 48px; }
        .cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
        .cta p { color: var(--text-secondary); margin-bottom: 24px; font-size: 16px; }
        .cta a { display: inline-block; padding: 16px 36px; background: var(--accent); color: white;
            border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; }
        .cta a:hover { opacity: 0.9; }
        @media (max-width: 700px) {
            .detail-grid { grid-template-columns: 1fr; }
            .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            table { min-width: 760px; }
        }