/* cu-page.css — page-scoped tokens + the ONE type scale for /child-custody/ (撫養權).
   Copied from public/components/mt-page.css (贍養費) so the two pages read as one family, but owned by
   this page: the 贍養費 session edits mt-page.css on its own branch, and a shared stylesheet would move
   under this page. Only the token + type-scale + pin rules this page uses are here.
   The deep green stays the SITE green (site.css --green #0F3B2E): the consultant-shell section and the
   folding cards (tone 2) keep exactly the 離婚手續 colour. */
[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; } }

.cu {
  --cu-sand: #E8DCC3;          /* the six-factor ground (owner call 2026-09-24): literal, not var(--sand) */
  --on-dark: #F2F3EE; --on-dark-mute: rgba(242,243,238,.72); --on-dark-dim: rgba(242,243,238,.40);
  --cu-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;
}
.cu .sec { padding: 160px 0; }

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

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

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

/* ---------- edit round 1 (#83 row 5): the dark pricing card on THIS page gets air ----------
   It sat flush under the sand six-factor section (0px) with 8px between the plan rows and uneven inner
   padding (101 top/bottom vs 58 sides). Custody-scoped: #pricing inside .cu only. */
.cu #pricing { margin-top: 72px; padding: clamp(28px, 4.5vw, 64px); }
.cu #pricing > .wrap { width: 100%; }
.cu #pricing .dp-plan-list { gap: 12px; }
@media (max-width: 899px) { .cu #pricing { margin-top: 44px; } }