/* sa-compare.css: /separation-agreement/ (分居協議書, #124) section 6. The .mt-compare / .mt-c* rules of
   public/components/mt-page.css (贍養費 §5) ported ONE FOR ONE (mt- -> sa-c), plus the type-scale classes they
   use (.mt-h3 / .mt-label / .mt-kp / .mt-intro / .mt-head) and the .mt tokens those rules read, carried as local
   custom properties so the section paints exactly as on /divorce-maintenance/. */
.sa .sa-compare {
  --c-green: #0B2E24; --c-paper: #F2F3EE; --c-sand: #E9ECE4; --c-ink: #10201B;
  --c-on-dark: #F2F3EE; --c-on-dark-mute: rgba(242,243,238,.72);
  --c-mute: rgba(16,32,27,.68); --c-hair-light: rgba(16,32,27,.14); --c-hair-dark: rgba(242,243,238,.18);
}
/* type scale (mt-page.css lines 38-43, 54) */
.sa .sa-ch3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; }
.sa .sa-clab { font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .12em; color: var(--c-mute); }
.sa .sa-ckp { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.65; }
.sa .sa-cintro { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--c-mute); max-width: 34em; margin-top: 18px; }
.sa .sa-chead { max-width: 640px; }
/* the compare block (mt-page.css lines 91-105) */
.sa .sa-compare { background: var(--c-sand); color: var(--c-ink); }
.sa .sa-cpanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.sa .sa-cpanel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--c-paper); }
.sa .sa-cpanel-hi { background: var(--c-green); color: var(--c-on-dark); }
.sa .sa-cphead { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--c-hair-light); }
.sa .sa-cpanel-hi .sa-cphead { border-bottom-color: var(--c-hair-dark); }
.sa .sa-cicon { width: 44px; height: 44px; flex: none; object-fit: contain; }
.sa .sa-cpanel-hi .sa-ch3 { color: var(--c-on-dark); }
.sa .sa-crows { margin-top: 22px; padding: 0; list-style: none; }
.sa .sa-crows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c-hair-light); font-size: 14px; line-height: 1.6; }
.sa .sa-cpanel-hi .sa-crows li { border-top-color: var(--c-hair-dark); }
.sa .sa-clabel { color: var(--c-mute); }
.sa .sa-cpanel-hi .sa-clabel { color: var(--c-on-dark-mute); }
.sa .sa-cval { text-align: right; }
.sa .sa-cfoot { margin-top: 26px; text-align: center; font-size: 15px; line-height: 1.8; color: var(--c-mute); }
/* phone (mt-page.css lines 193-198) */
@media (max-width: 899px) {
  .sa .sa-ch3 { font-size: 20px; }
  .sa .sa-cpanels { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .sa .sa-crows li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .sa .sa-cval { text-align: left; }
}