.comparison-page { background: var(--paper); }
.comparison-page .site-header { max-width: none; }
.compare-hero, .compare-section, .choice-section, .source-section { max-width: 1440px; margin: 0 auto; padding-left: 5.2vw; padding-right: 5.2vw; }
.compare-hero { padding-top: 109px; padding-bottom: 92px; background: var(--paper); }
.compare-hero h1 { margin-bottom: 28px; }.compare-hero h1 em { color: var(--cyan-deep); font-style: normal; }.compare-hero > p:not(.eyebrow) { max-width: 580px; color: var(--ink-soft); font-size: 18px; line-height: 1.65; }
.compare-legend { display: flex; align-items: center; gap: 15px; margin-top: 45px; }.product-chip { display: inline-flex; align-items: center; min-height: 43px; gap: 9px; padding: 0 15px; font-size: 13px; font-weight: 800; }.product-chip img { width: 23px; height: 23px; border-radius: 5px; }.onemouse-chip { background: var(--ink); color: var(--white); }.sharemouse-chip { border: 1px solid var(--ink); color: var(--ink); }.versus { font: 11px var(--mono); color: var(--ink-soft); }
.compare-section { padding-top: 110px; padding-bottom: 130px; background: var(--white); max-width: none; }.compare-heading { max-width: 1440px; margin: 0 auto 55px; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }.compare-heading .section-label, .choice-section > .section-label { color: var(--cyan-deep); }.comparison-note { align-self: end; max-width: 390px; margin: 0; color: var(--ink-soft); font: 11px/1.7 var(--mono); }
.comparison-table { max-width: 1440px; margin: 0 auto; border-top: 2px solid var(--ink); }.comparison-row { display: grid; grid-template-columns: .66fr 1fr 1fr; border-bottom: 1px solid var(--line); }.comparison-row > div { min-height: 116px; padding: 23px 25px; border-left: 1px solid var(--line); font-size: 13px; line-height: 1.5; }.comparison-row > div:first-child { border-left: 0; padding-left: 0; font: 500 11px var(--mono); color: var(--ink-soft); }.comparison-head > div { min-height: 56px; display: flex; align-items: center; padding-top: 15px; padding-bottom: 15px; color: var(--ink); font: 600 11px var(--mono); }.comparison-head .one-head { background: rgba(57,169,216,.13); color: var(--cyan-deep); }.comparison-head img { width: 20px; height: 20px; margin-right: 8px; border-radius: 4px; }.comparison-row strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; letter-spacing: -.02em; }.comparison-row span { color: var(--ink-soft); }
.choice-section { padding-top: 115px; padding-bottom: 128px; background: var(--ink); color: var(--white); max-width: none; }.choice-section > .section-label, .choice-section > h2, .choice-grid { max-width: 1440px; margin-left: auto; margin-right: auto; }.choice-section h2 { margin-bottom: 56px; }.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.choice-card { min-height: 385px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }.one-choice { background: var(--cyan); color: var(--ink); }.share-choice { border: 1px solid rgba(255,255,255,.44); }.choice-kicker { margin-bottom: 48px; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.choice-card h3 { max-width: 480px; margin-bottom: 18px; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.12; letter-spacing: -.05em; }.choice-card > p:not(.choice-kicker) { max-width: 475px; margin-bottom: 30px; color: inherit; opacity: .78; font-size: 14px; line-height: 1.6; }.choice-card .download-button { margin-top: auto; background: var(--ink); }.source-link { margin-top: auto; padding-bottom: 6px; border-bottom: 1px solid var(--white); color: var(--white); font: 500 12px var(--mono); text-decoration: none; }.source-link:hover { color: #b9dce8; border-color: #b9dce8; }
.source-section { max-width: none; padding-top: 30px; padding-bottom: 33px; background: #e7e3da; }.source-section p { max-width: 950px; margin: 0 auto; color: var(--ink-soft); font: 10px/1.7 var(--mono); }.source-section a { color: var(--cyan-deep); }
.comparison-page footer { max-width: none; }.comparison-page footer p { text-align: right; grid-column: 3; }
@media (max-width: 860px) { .compare-hero, .compare-section, .choice-section, .source-section { padding-left: 5.2vw; padding-right: 5.2vw; }.compare-heading, .choice-grid { grid-template-columns: 1fr; gap: 30px; }.comparison-row { grid-template-columns: 1fr 1fr; }.comparison-row > div:first-child { grid-column: 1 / -1; min-height: 0; padding: 18px 0 0; border-left: 0; }.comparison-row > div { min-height: 130px; padding: 18px; }.comparison-head { display: none; }.comparison-table { border-top-width: 1px; }.choice-card { min-height: 0; }.choice-kicker { margin-bottom: 32px; }.choice-card .download-button, .source-link { margin-top: 12px; } }
@media (max-width: 560px) { .compare-hero, .compare-section, .choice-section, .source-section { padding-left: 22px; padding-right: 22px; }.compare-hero { padding-top: 65px; padding-bottom: 65px; }.compare-hero h1 { font-size: 50px; }.compare-hero > p:not(.eyebrow) { font-size: 15px; }.compare-section, .choice-section { padding-top: 76px; padding-bottom: 76px; }.comparison-row { display: block; }.comparison-row > div { min-height: 0; border-left: 0; padding: 14px 0; }.comparison-row > div:first-child { padding-top: 20px; }.comparison-row > div:nth-child(2) { padding-top: 14px; }.comparison-row > div:nth-child(3) { padding-bottom: 24px; }.choice-card { padding: 26px; }.comparison-page footer p { grid-column: 1 / -1; grid-row: 2; text-align: left; } }