.comparison-page { --comparison-green:#183e32; background:var(--paper); color:var(--ink); }
.comparison-hero { background:var(--comparison-green); color:#f6f3ea; padding:60px 0 76px; }
.comparison-hero .eyebrow { color:#bfcda9; margin:28px 0 22px; }
.comparison-hero h1 { font:400 clamp(42px,5.4vw,76px)/1.06 var(--serif); letter-spacing:-.04em; max-width:1000px; margin:0 0 28px; }
.comparison-lead { max-width:850px; font-size:clamp(18px,1.7vw,23px); line-height:1.65; color:#e0e7dc; }
.comparison-back { color:#d9e4d4; font-size:14px; text-underline-offset:4px; }
.comparison-byline { font-size:13px; color:#c4d1c1; margin:26px 0; }
.comparison-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:28px; }
.comparison-actions > a:not(.app-store-badge) { color:inherit; text-underline-offset:5px; font-size:15px; }
.comparison-content { padding-top:48px; padding-bottom:70px; }
.comparison-verdict { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.comparison-verdict > div { border:1px solid var(--paper-line); border-radius:18px; padding:30px; background:#fffdf8; }
.comparison-verdict > div:first-child { border-top:4px solid var(--comparison-green); }
.comparison-verdict h2 { font:400 31px/1.15 var(--serif); margin:15px 0; }
.comparison-verdict p:last-child { line-height:1.8; color:var(--paper-muted); }
.comparison-section { padding:54px 0 0; scroll-margin-top:24px; }
.comparison-section h2,.comparison-directory > h2,.comparison-more > h2 { font:400 clamp(30px,3.1vw,44px)/1.15 var(--serif); letter-spacing:-.025em; margin:0 0 25px; }
.comparison-section > p:not(.eyebrow) { font-size:18px; line-height:1.85; color:var(--paper-muted); }
.comparison-table-scroll { overflow:auto; border:1px solid var(--paper-line); border-radius:14px; background:#fffdf8; }
.comparison-table-scroll:focus-visible { outline:3px solid #8d3d27; outline-offset:4px; }
.comparison-table-scroll table { width:100%; border-collapse:collapse; min-width:680px; font-size:15px; line-height:1.7; }
.comparison-table-scroll caption { caption-side:bottom; text-align:start; padding:16px 22px; color:var(--paper-muted); font-size:13px; }
.comparison-table-scroll th,.comparison-table-scroll td { padding:22px; text-align:start; vertical-align:top; border-bottom:1px solid var(--paper-line); }
.comparison-table-scroll thead { background:#e7ecdf; }
.comparison-table-scroll tbody th { width:20%; font-weight:600; }
.comparison-table-scroll td { width:40%; color:#50594d; }
.comparison-table-scroll tbody td:nth-child(2) { background:#f2f5ec; }
.comparison-citation { font-size:12px; color:#8d3d27; white-space:nowrap; text-underline-offset:3px; }
.comparison-article { max-width:800px; margin:auto; }
.comparison-faq details { border-block-end:1px solid var(--paper-line); padding:20px 0; }
.comparison-faq summary { cursor:pointer; font-size:18px; line-height:1.5; font-weight:550; }
.comparison-faq details p { font-size:17px; line-height:1.8; color:var(--paper-muted); }
.comparison-method { margin-top:54px; background:#eaece3; padding:28px; border-radius:14px; font-size:14px; line-height:1.8; color:#555d50; }
.comparison-method h2 { font-size:18px; color:var(--ink); }
.comparison-method a,.comparison-principle a { color:#75402c; text-underline-offset:3px; }
.comparison-method li { padding:5px 0; scroll-margin-top:25px; }
.comparison-cta { background:var(--comparison-green); color:#f6f3ea; padding:48px; border-radius:20px; margin:70px 0; }
.comparison-cta .eyebrow { color:#bfcda9; }
.comparison-cta h2 { font:400 clamp(36px,4vw,55px)/1.1 var(--serif); letter-spacing:-.03em; margin:20px 0; }
.comparison-cta > p { max-width:730px; line-height:1.8; }
.comparison-reading { font-size:14px; color:#d5e0cf; padding-top:20px; }
.comparison-reading a { color:inherit; text-underline-offset:4px; }
.comparison-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.comparison-cards > a { display:flex; flex-direction:column; gap:18px; padding:28px; border:1px solid var(--paper-line); border-radius:16px; background:#fffdf8; color:var(--ink); text-decoration:none; }
.comparison-cards h3 { font:400 30px/1.15 var(--serif); margin:0; }
.comparison-cards p { color:var(--paper-muted); font-size:16px; line-height:1.7; margin:0; }
.comparison-cards a > span:last-child { margin-top:auto; font-size:14px; color:#8d3d27; }
.comparison-cards a:hover { border-color:#687c60; }
.comparison-page a:focus-visible,.comparison-page summary:focus-visible { outline:3px solid #b77c50; outline-offset:5px; }
.comparison-directory { padding-block:60px; }
.comparison-principle { max-width:760px; margin:65px auto 0; font-size:18px; line-height:1.85; color:var(--paper-muted); }
.comparison-principle h2 { color:var(--ink); font:400 36px/1.2 var(--serif); }
@media(max-width:760px) {
 .comparison-hero { padding:35px 0 44px; }
 .comparison-verdict { grid-template-columns:1fr; gap:18px; }
 .comparison-verdict > div,.comparison-method { padding:22px; }
 .comparison-cta { padding:28px 22px; margin-block:48px; }
 .comparison-section { padding-top:38px; }
 .comparison-section > p:not(.eyebrow) { font-size:17px; }
 .comparison-cards { grid-template-columns:minmax(0,1fr); }
 .comparison-table-scroll th,.comparison-table-scroll td { padding:16px; }
 .comparison-table-scroll table { min-width:620px; }
}

.comparison-content .eyebrow,.comparison-directory .eyebrow { color:#785831; }
.comparison-content .comparison-cta .eyebrow { color:#bfcda9; }
@media(max-width:760px) {
 .comparison-table-scroll table { min-width:0; }
 .comparison-table-scroll thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
 .comparison-table-scroll tbody,.comparison-table-scroll tbody tr { display:block; }
 .comparison-table-scroll tbody tr + tr { border-top:1px solid var(--paper-line); }
 .comparison-table-scroll tbody th,.comparison-table-scroll tbody td { display:block; width:auto; border:0; }
 .comparison-table-scroll tbody th { background:#e7ecdf; padding-bottom:12px; }
 .comparison-table-scroll tbody td::before { content:attr(data-app); display:block; font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:8px; color:var(--ink); }
}

.comparison-apps { display:flex; align-items:flex-start; gap:26px; margin:36px 0 30px; }
.comparison-app { display:grid; justify-items:center; gap:12px; margin:0; }
.comparison-app img { display:block; width:112px; height:112px; object-fit:contain; border-radius:25px; box-shadow:0 8px 24px #071d2433; }
.comparison-app figcaption { font-size:15px; font-weight:600; letter-spacing:.01em; }
.comparison-versus { display:grid; place-items:center; height:112px; color:#c4d1c1; font:italic 24px var(--serif); }
@media(max-width:760px) {
 .comparison-apps { gap:22px; margin-block:28px; }
 .comparison-app img { width:84px; height:84px; border-radius:19px; }
 .comparison-versus { height:84px; font-size:21px; }
 .comparison-app figcaption { font-size:14px; }
}

.comparison-page .locale-menu { overscroll-behavior:contain; }
.comparison-page h1,.comparison-page h2,.comparison-page h3 { overflow-wrap:anywhere; }
html[dir="rtl"] .comparison-page .comparison-hero h1 { line-height:1.3; letter-spacing:normal; }
html[dir="rtl"] .comparison-page .eyebrow { letter-spacing:normal; }
html[dir="rtl"] .comparison-page .comparison-section h2,
html[dir="rtl"] .comparison-page .comparison-verdict h2 { line-height:1.4; }

.comparison-download { display:grid; justify-items:start; gap:8px; max-width:100%; }
.comparison-download > span { font-size:14px; line-height:1.5; max-width:280px; }