/* PORTED for /separation-agreement/ (分居協議書, #124) from public/components/da-types.css - renamed only (da-/cb- -> sa-);
   the reference behaviour is the spec (WORK-ORDER.md "behaves exactly like its reference"). */
/* sa-types.css - /divorce-agreement/ section 7, 四種協議書 (src/components/agreement/Types.astro).
   Re-aligned (#116, round 2) onto the HOMEPAGE's Included grammar: site.css owns .grid-incl / .sticky-col
   (position:sticky) / .incl-list / .incl-cards / .incl-card / .mobile-incl-heading / .paint / .incl-copy -
   this file only (a) recolours those shared parts for the SAGE ground #DDE6DF and (b) styles the content
   this page adds inside a card that Included.astro doesn't have (a when/here line, a single go-link, the
   trailing "other kinds" chip row). Text colours measured >= 4.5:1 on sage / white: ink #10201B, mute #3E4A44. */
.sa .sa-types { background: var(--sa-sage, #DDE6DF); color: var(--ink, #10201B); padding: 140px 0; }
.sa .sa-types .eyebrow i { background: var(--amber); }
.sa .dty-head { max-width: 760px; margin-bottom: 48px; }
.sa .sa-types .incl-list li { color: #3E4A44; }
.sa .sa-types .incl-list li.on { color: var(--ink, #10201B); }
.sa .dty-when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: .08em; color: #3E4A44; }
.sa .dty-here { padding: 3px 12px; border-radius: 999px; background: var(--amber, #E9A93A); color: var(--ink, #10201B); letter-spacing: 0; font-size: 13px; }
.sa .dty-text { margin: 0; color: #3E4A44; font-size: 16px; line-height: 1.8; }
.sa .dty-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; color: var(--ink, #10201B); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 5px; }
.sa .dty-other { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: #3E4A44; font-size: 14px; }
.sa .dty-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(16,32,27,.22); background: rgba(255,255,255,.5); color: var(--ink, #10201B); }
@media (max-width: 899px) {
  .sa .sa-types { padding: 80px 0; }
  .sa .dty-head { margin-bottom: 28px; }
}