.comparison-page { max-width: 1120px; padding-top: 22px; padding-bottom: 64px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; color: #58665c; font-size: 13px; }
.breadcrumbs a, .comparison-page a { color: #28563a; }
.comparison-intro { max-width: 800px; padding: 34px 0 24px; }
.comparison-intro h1 { max-width: 18ch; margin: 0; color: #172820; font-size: clamp(2.35rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -.035em; }
.comparison-intro > p:last-child { max-width: 70ch; color: #46564b; font-size: 1.08rem; line-height: 1.55; }
.comparison-page .eyebrow { margin: 0 0 8px; color: #315d45; font-size: .77rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.compare-picker, .comparison-rule { margin: 18px 0 32px; padding: 22px; border: 1px solid #dbe2d9; border-radius: 10px; background: #fff; }
.compare-picker h2, .comparison-rule h2 { margin: 0; color: #172820; font-size: 1.55rem; }
.comparison-note, .comparison-basis { color: #52635a; font-size: .93rem; line-height: 1.55; }
#compare-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
#compare-form label { display: grid; flex: 1 1 300px; gap: 6px; font-weight: 650; }
#compare-pair { width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid #829487; border-radius: 6px; color: #172820; background: #fff; font: inherit; }
#compare-pair:focus-visible, #compare-form button:focus-visible { outline: 3px solid #b8d3bc; outline-offset: 2px; }
#compare-form button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 6px; color: #fff; background: #28563a; font: inherit; font-weight: 700; cursor: pointer; }
#compare-form button:hover { background: #183b27; }
#compare-output { margin-top: 20px; }
.empty-state { padding: 13px 15px; border-left: 3px solid #6c886e; color: #52635a; background: #f0f4ef; }
.published-comparisons { margin: 30px 0; }
.section-heading { padding-bottom: 10px; border-bottom: 2px solid #263b2c; }
.section-heading h2 { margin: 0; color: #172820; font-size: 1.8rem; }
.published-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.published-comparison { padding: 18px; border: 1px solid #dbe2d9; border-radius: 9px; background: #fff; }
.published-comparison h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.published-comparison p { color: #52635a; line-height: 1.5; }
.published-comparison .comparison-edition { margin-bottom: 0; font-size: .84rem; }
.comparison-rule { margin-top: 36px; border-left: 4px solid #315d45; background: #eef3ed; }
.comparison-rule p { max-width: 75ch; color: #435047; line-height: 1.55; }
.compare-result h2 { margin: 0 0 8px; color: #172820; font-size: 1.5rem; }
.compare-result-lead { color: #52635a; font-size: .9rem; line-height: 1.5; }
.compare-table-wrap { overflow-x: auto; margin: 14px 0 22px; border: 1px solid #dbe2d9; border-radius: 7px; background: #fff; }
.compare-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .9rem; }
.compare-table caption { padding: 11px 13px; color: #52635a; text-align: left; font-size: .8rem; }
.compare-table th, .compare-table td { padding: 12px; border-bottom: 1px solid #dbe2d9; text-align: left; vertical-align: top; }
.compare-table thead th { color: #fff; background: #28563a; font-size: .83rem; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table tbody th { width: 25%; font-weight: 700; }
.compare-meta { display: block; margin-top: 5px; color: #58665c; font-size: .78rem; font-weight: 400; line-height: 1.45; }
.compare-value { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.fact-conditions summary { margin-top: 6px; color: #28563a; font-size: .78rem; cursor: pointer; }
.fact-conditions[open] summary { margin-bottom: 5px; }
.comparison-sources { margin-top: 20px; padding-top: 14px; border-top: 1px solid #dbe2d9; }
.comparison-sources h3 { margin: 0 0 7px; font-size: 1.15rem; }
.comparison-sources li { margin: 6px 0; font-size: .85rem; }
.comparison-back { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.comparison-page .button { display: inline-flex; min-height: 44px; align-items: center; padding: 0 15px; border-radius: 6px; font-weight: 700; }
.comparison-page .button.secondary { border: 1px solid #819487; text-decoration: none; }
@media (max-width: 700px) {
  .comparison-page { padding-top: 16px; }
  .compare-picker, .comparison-rule { padding: 17px; }
  .published-grid { grid-template-columns: 1fr; }
  #compare-form button { width: 100%; }
}