/* cb-page.css: page-scoped tokens + the ONE type scale for /cross-border-divorce/ (中港離婚).
   Copied from public/components/cu-page.css (撫養權) so the three service pages read as one family, but
   owned by this page (a shared stylesheet would move under it). The deep green stays the SITE green
   (site.css --green #0F3B2E). Grounds: s3 sage #DDE6DF (third colour after 贍養費 green / 撫養權 sand,
   owner 2026-09-25), s8 sand #E8DCC3 (撫養權 s3 sand, J ruling). */
[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; } }

.cb {
  --cb-sage: #DDE6DF;
  --cb-sand: #E8DCC3;
  --on-dark: #F2F3EE; --on-dark-mute: rgba(242,243,238,.72); --on-dark-dim: rgba(242,243,238,.40);
  --cb-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;
}
.cb .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) */
.cb .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) */
.cb .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, cb- prefix) ---------- */
.cb .cb-h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; }
.cb .cb-label { font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .12em; color: var(--cb-mute); }
.cb .cb-kp { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.65; }
.cb .cb-num { font-family: var(--serif); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cb .cb-body { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--cb-mute); }
.cb .cb-intro { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--cb-mute); max-width: 34em; margin-top: 18px; }
.cb [data-cb-sec] .btn { font-weight: 500; }
.cb [data-cb-sec] b, .cb [data-cb-sec] strong { font-weight: 500; }

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

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

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

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

/* the shared cases filter chips are 40px tall; on this page every tap target is >= 44px (page probe) */
.cb .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) */
#cb-hero h1 .line > span { word-break: keep-all; }
/* 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; }