/* PORTED for /separation-agreement/ (分居協議書, #124) from public/components/da-page.css - renamed only (da-/cb- -> sa-);
   the reference behaviour is the spec (WORK-ORDER.md "behaves exactly like its reference"). */
/* sa-page.css: page-scoped tokens + the ONE type scale for /divorce-agreement/ (離婚協議書, #105; a copy of cb-page.css,
   itself from cu-page.css, so the service pages read as one family). The deep green stays the SITE green (site.css
   --green #0F3B2E). Grounds: s2 tan #E8DCC3 (the live 撫養權 six factors), s7 sage #DDE6DF. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
h1.mask .line > span, h2.mask .line > span { text-wrap: balance; }
@media (max-width: 899px) { :root { --pad: 20px; } }

.sa {
  --sa-sage: #DDE6DF;
  --sa-sand: #E8DCC3;
  --on-dark: #F2F3EE; --on-dark-mute: rgba(242,243,238,.72); --on-dark-dim: rgba(242,243,238,.40);
  --sa-mute: rgba(16,32,27,.68); --hair-light: rgba(16,32,27,.14); --hair-dark: rgba(242,243,238,.18);
  --ease: cubic-bezier(.16,1,.3,1);
  display: block;
}
.sa .sec { padding: 160px 0; }

/* every two-phrase heading: a phrase is ONE unbreakable unit; the heading may only break BETWEEN phrases
   (lab/probe-cross-border.mjs asserts it at 320-2000) */
.sa .ln.join { display: inline-block; white-space: nowrap; }
/* the amber accent on a light ground is a marker band, never amber text (2:1 on paper/sage/sand) */
.sa .hi-mark { color: inherit; background: linear-gradient(transparent 60%, rgba(233,169,58,.55) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .06em; }

/* ---------- ONE TYPE SCALE (mt-page.css names, sa- prefix) ---------- */
.sa .sa-h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; }
.sa .sa-label { font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .12em; color: var(--sa-mute); }
.sa .sa-kp { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.65; }
.sa .sa-num { font-family: var(--serif); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sa .sa-body { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--sa-mute); }
.sa .sa-intro { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--sa-mute); max-width: 34em; margin-top: 18px; }
.sa [data-sa-sec] .btn { font-weight: 500; }
.sa [data-sa-sec] b, .sa [data-sa-sec] strong { font-weight: 500; }

/* ---------- the pin (mt-page.css): wrapper = runway, inner = the sticky 100vh stage ---------- */
.sa .sa-pin { position: relative; }
.sa .sa-pin.is-pinned > .sa-pin-inner { position: sticky; top: 0; height: var(--screen); overflow: hidden; }

/* the ask under a section: one line + the WhatsApp button */
.sa .sa-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; text-align: center; }
.sa .sa-ask-line { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--sa-mute); }

@media (max-width: 899px) {
  .sa .sec { padding: 80px 0; }
  .sa .sa-h3 { font-size: 20px; }
  .sa .sa-ask-line { font-size: 15px; }
}

/* ---------- the dark pricing card gets air (撫養權 edit round 1 row 5, same rule) ---------- */
.sa #pricing { margin-top: 72px; padding: clamp(28px, 4.5vw, 64px); }
.sa #pricing > .wrap { width: 100%; }
.sa #pricing .dp-plan-list { gap: 12px; }
@media (max-width: 899px) { .sa #pricing { margin-top: 44px; } }

/* the shared cases filter chips are 40px tall; on this page every tap target is >= 44px (page probe) */
.sa .dp-case-filters button { min-height: 44px; }
/* the shared blog + FAQ filter chips (38px in site.css): 44px on this page */
.chips button { height: 44px; border-radius: 22px; }
/* the hero's second H1 line (內地結婚，也可在香港辦妥, 12 units) wraps on a phone: it may only break at its comma,
   never inside 也可在香港辦妥 (shared HeroDP markup, page-scoped rule) */
#sa-hero h1 .line > span { word-break: keep-all; white-space: nowrap; }
/* #105: the hero H1 is ONE line (owner's word) and the sub-line sits under it, smaller than the H1, amber */
#sa-hero .hero-h1-single .line:last-child > span { font-size: inherit; }
#sa-hero .hero-subline { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.3; color: var(--amber, #E9A93A); white-space: nowrap; }
@media (max-width: 480px) { #sa-hero .hero-subline { font-size: clamp(20px, 6.4vw, 26px); } }
/* every H2 of this page's own sections sits on ONE line at 1024-2000 (v2 law): one .ln.join phrase each */
@media (min-width: 1024px) { .sa h2 .ln.join { white-space: nowrap; } }
/* the booking form's "以電郵確認預約" row is a 24px label: its whole row is the 44px target on this page */
#book label.check { min-height: 44px; align-items: center; }
/* 320-360 px phones: the ten-character one-phrase H2s (e.g. 最常見的五個寫法錯誤) fit inside the screen */
@media (max-width: 360px) { .sa h2.h2 { font-size: 24px; } }

/* FIX ROUND 1 R1-R3 (#105): EVERY H2 on this page is one line at 1024-2000 (v2 law), the shared blocks included.
   FAQ: the H2 is 「離婚協議書常見問題」 alone (Faq headingHi=""); Book: both phrases in one .line (h2OneLine), the size
   of the v2 wireframe; numbers + blog: their two .line phrases run on as one line, sized to fit the column. */
@media (min-width: 1024px) {
  #faq .faq-left h2 .line > span { white-space: nowrap; }
  #book .book-h2-one .line > span { white-space: nowrap; }
  #book .book-h2-one { font-size: clamp(19px, 1.85vw, 28px); }
  #numbers .numbers-h2 .line, #blog h2 .line { display: inline; }
  #numbers .numbers-h2 .line > span, #blog h2 .line > span { display: inline; white-space: nowrap; }
  #numbers .numbers-h2 { font-size: clamp(26px, 2.6vw, 44px); white-space: nowrap; }
  #blog h2 { font-size: clamp(28px, 3vw, 48px); white-space: nowrap; }
}
/* the shared close band's two phrases run on as ONE line at 1024-2000 (v2 law; page-scoped, Close.astro untouched) */
@media (min-width: 1024px) {
  #close h2 .line { display: inline; }
  #close h2 .line > span { display: inline; white-space: nowrap; }
  #close h2 { white-space: nowrap; }
}