:root {
    --blue: #1769e0;
    --blue-dark: #124da5;
    --ink: #171717;
    --muted: #6b7280;
    --line: #e5e7eb;
    --page: #f7f8fa;
    --soft-blue: #edf4ff;
    --green: #138a68;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--page);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.75;
}
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
.ratings-header { height: 70px; background: #fff; border-bottom: 1px solid var(--line); }
.ratings-header .container { height: 100%; max-width: 1200px; }
.brand { color: var(--ink); font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; white-space: nowrap; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand img { width: 105px; margin-right: 9px; vertical-align: -5px; }
.brand span { display: inline-block; padding-left: 10px; border-left: 1px solid #d6d9de; color: var(--blue); }
.site-nav a { color: #4b5563; font-size: .88rem; margin-left: 28px; }
.site-nav a:hover { color: var(--blue); text-decoration: none; }
.search-button { width: 36px; height: 36px; margin-left: 23px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #4b5563; font-size: 1rem; line-height: 1; }

.article-intro { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--blue); font-size: .73rem; font-weight: 800; letter-spacing: .15em; margin-bottom: 17px; }
.article-intro h1 { max-width: 850px; margin: 0 0 22px; color: #111827; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 5vw, 4.1rem); font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.article-intro-description { max-width: 720px; margin-bottom: 24px; color: var(--muted); font-size: 1.16rem; line-height: 1.65; }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: .84rem; }
.byline strong { color: #374151; }
.byline-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-left: 4px; }
.article-rule { width: 52px; height: 3px; margin-top: 27px; background: var(--blue); }

.page-main { max-width: 1200px; padding: 52px 30px 92px; }
.page-layout { display: grid; grid-template-columns: 220px minmax(0, 790px); gap: 42px; align-items: start; max-width: 1052px; margin: 0 auto; }
.content-column { max-width: 790px; min-width: 0; }
.content-column > p, .content-column > ul, .content-column > ol { color: #374151; font-size: 1.02rem; line-height: 1.86; }
.content-column p { margin-bottom: 19px; }
.content-column h2 { margin: 58px 0 18px; color: #111827; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; scroll-margin-top: 90px; }
.content-column h3 { margin: 34px 0 12px; color: #1f2937; font-family: Georgia, "Times New Roman", serif; font-size: 1.38rem; font-weight: 700; line-height: 1.35; scroll-margin-top: 90px; }
.content-column li { margin-bottom: 7px; }
.floating-toc {
    position: sticky;
    top: 94px;
    width: 220px;
    padding-left: 15px;
    border-left: 1px solid #d8dee8;
}
.floating-toc-title {
    margin: 0 0 13px;
    color: #6b7280;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}
.floating-toc-list { padding: 0; margin: 0; list-style: none; }
.floating-toc-list li { margin: 0; }
.floating-toc-list a {
    display: block;
    padding: 5px 0;
    color: #6b7280;
    font-size: .78rem;
    line-height: 1.38;
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}
.floating-toc-list a:hover,
.floating-toc-list a.active {
    padding-left: 5px;
    color: var(--blue);
}
.lead-summary { padding: 22px 25px; margin-bottom: 30px; border: 1px solid #d8e6fb; border-left: 4px solid var(--blue); background: var(--soft-blue); }
.lead-summary p { margin: 0; color: #27466e; }
.download-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 33.333%;
    position: relative;
    padding: 17px 20px 17px 23px;
    margin: 0 0 32px;
    border: 1px solid var(--blue);
    border-radius: 5px;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(23, 105, 224, .18);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.download-cta:hover {
    border-color: var(--blue-dark);
    background: var(--blue-dark);
    box-shadow: 0 7px 16px rgba(18, 77, 165, .24);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.download-cta-copy { width: 100%; min-width: 0; padding: 0 24px; text-align: center; }
.download-cta-label {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}
.download-cta-product {
    display: block;
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
}
.download-cta-rating {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 5px 0 5px 16px;
    border-left: 1px solid rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .86);
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
}
.download-cta-stars {
    color: #ffd45c;
    font-size: .95rem;
    letter-spacing: .04em;
    line-height: 1;
}
.download-cta-arrow {
    position: absolute;
    right: 20px;
    color: rgba(255, 255, 255, .92);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}
.content-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 17px 20px;
    margin: 25px 0 34px;
    border: 1px solid #dce5f1;
    border-left: 4px solid #7b9dcc;
    background: #f5f8fc;
    color: #526174;
    font-size: .94rem;
    line-height: 1.72;
}
.content-note-label {
    color: #5075aa;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}
.content-note p { margin: 0; }
.content-note strong { color: #374f70; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 25px 0 32px; }
.pros-cons section { padding: 19px 21px; border: 1px solid var(--line); background: #fff; }
.pros-cons h3 { margin: 0 0 12px; font-size: 1.1rem; }
.pros-cons ul { list-style: none; padding: 0; margin: 0; color: #4b5563; font-size: .92rem; line-height: 1.65; }
.pros-cons li { margin: 6px 0; }
.pros li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 9px; }
.cons li::before { content: "×"; color: #c2413e; font-weight: 800; margin-right: 10px; }
.screenshot { margin: 28px 0 33px; }
.screenshot img { display: block; width: 100%; max-height: 390px; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; }
.screenshot figcaption { margin-top: 9px; color: #9ca3af; font-size: .76rem; text-align: center; }
.comparison-wrap { overflow-x: auto; margin: 26px 0 30px; border: 1px solid var(--line); background: #fff; }
.comparison-table { min-width: 760px; margin: 0; color: #4b5563; font-size: .89rem; }
.comparison-table thead th { padding: 14px 24px; color: #374151; background: #f3f4f6; border-color: var(--line); font-weight: 700; white-space: nowrap; }
.comparison-table td { padding: 15px 24px; vertical-align: top; border-color: var(--line); }
.comparison-table tbody tr:nth-child(even) { background: #fafafa; }
.comparison-table .recommended { color: var(--blue); font-weight: 700; }
.comparison-status-icon { display: inline-block; margin-right: 8px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 0; border: 0; background: transparent; color: #1f2937; text-align: left; font-size: 1rem; font-weight: 700; }
.faq-question span { color: var(--blue); font-size: 1.2rem; }
.faq-answer { padding: 0 30px 17px 0; color: #6b7280; }

.related { padding: 58px 0 69px; background: #fff; border-top: 1px solid var(--line); }
.related .container { max-width: 1200px; padding: 0 30px; }
.related-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.related h2 { margin: 0; color: #111827; font-size: 1.55rem; letter-spacing: -.025em; }
.related-heading span { color: #9ca3af; font-size: .82rem; }
.related-card { height: 100%; border: 1px solid var(--line); background: #fff; }
.related-card img { display: block; width: 100%; height: 135px; object-fit: cover; }
.related-card-body { padding: 17px 18px 19px; }
.related-card small { color: var(--blue); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.related-card h3 { margin: 7px 0 8px; font-size: 1.05rem; line-height: 1.35; }
.related-card p { min-height: 48px; margin-bottom: 11px; color: #6b7280; font-size: .82rem; line-height: 1.55; }
.related-card a { font-size: .82rem; font-weight: 700; }
.ratings-footer { padding: 37px 0 28px; background: #fff; border-top: 1px solid var(--line); }
.ratings-footer .container { max-width: 1200px; padding: 0 30px; }
.footer-brand { color: #111827; font-weight: 750; }
.footer-brand img { width: 100px; margin-right: 8px; vertical-align: -4px; }
.footer-links { text-align: right; }
.footer-links a { margin-left: 20px; color: #6b7280; font-size: .8rem; }
.footer-bottom { margin-top: 26px; padding-top: 17px; border-top: 1px solid var(--line); color: #9ca3af; font-size: .75rem; }

@media (max-width: 991.98px) {
    .site-nav a { margin-left: 15px; }
    .content-column { max-width: none; }
}
@media (max-width: 1199.98px) {
    .page-main { padding: 42px 30px 84px; }
    .page-layout { display: block; max-width: 790px; }
    .floating-toc { display: none; }
}
@media (max-width: 767.98px) {
    .ratings-header { height: 62px; }
    .ratings-header .container { padding: 0 18px; }
    .site-nav { display: none; }
    .search-button { margin-left: auto; }
    .page-main { padding: 35px 20px 62px; }
    .article-intro h1 { font-size: 2.35rem; }
    .article-intro-description { font-size: 1rem; }
    .content-column h2 { margin-top: 45px; font-size: 1.75rem; }
    .download-cta { align-items: center; flex-direction: column; gap: 9px; width: 100%; padding: 15px 16px; }
    .download-cta-copy { padding: 0; }
    .download-cta-arrow { position: static; }
    .download-cta-rating { align-self: flex-start; }
    .pros-cons { grid-template-columns: 1fr; }
    .related .container, .ratings-footer .container { padding: 0 20px; }
    .related-heading { display: block; }
    .related-heading span { display: block; margin-top: 6px; }
    .footer-links { margin-top: 21px; text-align: left; }
    .footer-links a { margin: 0 18px 0 0; }
}

/* CMS content compatibility retained from the previous article renderer. */
@font-face { font-family: "ratings-iconfont"; src: url("/assets/fonts/iconfont.woff2") format("woff2"); font-style: normal; font-weight: normal; font-display: block; }
.article-body [class^="icon-"], .article-body [class*=" icon-"] { font-family: "ratings-iconfont" !important; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.article-body img { max-width: 100%; height: auto; }
.article-body img { cursor: zoom-in; }
.article-body a img { cursor: pointer; }
.article-body .icon-warn::before { content: "\e6db"; }
.article-body .icon-note::before { content: "\e6dc"; }
.article-body .icon-down::before { content: "\e727"; }
.article-body .icon-win::before { content: "\e620"; }
.article-body .icon-mac::before { content: "\e621"; }
.article-body .icon-video::before { content: "\e64f"; }
.article-body .icon-star::before { content: "\e61b"; }
.article-body .icon-bulb1::before { content: "\e717"; }
.article-body .icon-safety::before { content: "\e658"; }
.article-body .icon-note, .article-body .icon-mac, .article-body .icon-star { display: inline-block; }
.article-body .icon-star { color: #f5b50a; }
.article-body .note, .article-body .warning { padding: 17px 20px; margin: 25px 0; border: 1px solid #dce5f1; border-left: 4px solid #7b9dcc; background: #f5f8fc; color: #526174; }
.article-body .note > * + *, .article-body .warning > * + * { margin-top: 16px; }
.article-body .btn-first { margin: 16px 0; }
.article-body .btn-first a, .article-body a.download-event-class { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 5px; background: var(--blue); color: #fff; font-weight: 700; }
.article-body table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: .95em; }
.article-body th, .article-body td { padding: 9px 16px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.article-body tr:first-child td { background: #edf4ff; }
.article-body tr:nth-child(even) td { background: #fff; }
.article-body .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 25px 0 32px; }
.article-body .pros-cons > .row { display: contents; }
.article-body .pros-cons > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding-left: 0; padding-right: 0; }
.article-body .pros-cons .pros, .article-body .pros-cons .cons { padding: 19px 28px; border: 1px solid var(--line); background: #fff; }
.article-body .pros-cons ul { list-style: none; padding: 0 8px 0 18px; margin: 0; color: #4b5563; font-size: .92rem; line-height: 1.65; }
.article-body .pros-cons li { margin: 6px 0; }
.article-body .pros li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 12px; }
.article-body .cons li::before { content: "×"; color: #c2413e; font-weight: 800; margin-right: 12px; }
@media (max-width: 767.98px) { .article-body .pros-cons { grid-template-columns: 1fr; } }

/* Existing article interactions, fitted to the new header. */
.header-search { display: flex; align-items: center; width: 220px; margin-left: auto; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.header-search input { width: 100%; min-width: 0; padding: 7px 8px; border: 0; outline: 0; color: var(--ink); font-size: .82rem; }
.search-submit, .search-clear, .icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #4b5563; cursor: pointer; }
.search-submit, .search-clear { width: 32px; height: 32px; flex: 0 0 32px; }
.search-submit svg, .search-clear svg, .icon-button svg, .icon-text-button svg { width: 16px; height: 16px; }
.desktop-nav a { color: #4b5563; font-size: .88rem; margin-left: 23px; text-decoration: none; }
.mobile-menu-button, .mobile-nav { display: none; }
.article-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
.icon-text-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #6b7280; font-size: .8rem; cursor: pointer; }
.article-languages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.article-languages a { display: inline-flex; align-items: center; gap: 5px; color: #6b7280; font-size: .8rem; text-decoration: none; }
.article-languages a[aria-current="page"] { color: var(--blue); font-weight: 700; }
.article-languages img { width: 20px; height: 14px; object-fit: cover; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; padding: 9px 13px; border-radius: 4px; background: #171717; color: #fff; font-size: .8rem; }
.image-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; background: rgba(0, 0, 0, .86); cursor: zoom-out; }
.image-lightbox img { display: block; max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; cursor: default; }
.image-lightbox-close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; line-height: 34px; cursor: pointer; }
.image-lightbox-close:hover, .image-lightbox-close:focus { background: rgba(255, 255, 255, .25); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767.98px) {
    .header-search { width: 36px; margin-left: auto; border-radius: 50%; }
    .header-search input, .header-search .search-clear { display: none; }
    .header-search.is-expanded { position: absolute; left: 18px; right: 18px; width: auto; border-radius: 5px; }
    .header-search.is-expanded input, .header-search.is-expanded .search-clear { display: block; }
    .header-search.is-expanded .search-submit { flex-basis: 32px; }
    .desktop-nav { display: none; }
    .mobile-menu-button { display: inline-flex; width: 36px; height: 36px; margin-left: 8px; }
    .mobile-nav { padding: 10px 18px; border-top: 1px solid var(--line); background: #fff; }
    .mobile-nav a { color: #4b5563; font-size: .86rem; text-decoration: none; }
}