/* mt-page.css - page-scoped CSS for /divorce-maintenance/ (贍養費), v3.
   Built to docs/design/maintenance-v3-WORK-ORDER.md (issue #69, rejection 2). Motion numbers come
   from docs/research/2026-09-21-maintenance-v3-decode/SPEC.md; nothing here is guessed.

   THREE structural rules this file exists to keep:
   1. ONE TYPE SCALE. Section headings use the site's own `.h2` (public/site.css:56) with no
      override at all. Card/step titles use ONE class, `.mt-h3`. Labels use `.mt-label`, key points
      `.mt-kp`, numerals `.mt-num`, body `.mt-body`. Nothing inside `[data-mt-sec]` computes a font
      weight above 500 (the owner's words: "the font style must be standardized ... no bold"), and
      the serif only ever computes 400 or 500, the two weights the subset actually loads.
   2. EVERY PIN IS OPT-IN. The markup renders as a plain, fully readable stacked page. Only when
      mt-page.js decides motion is allowed (JS on, no reduced-motion preference) does it add
      `.is-pinned` to a `[data-mt-pin]` wrapper, which is what turns on every sticky rule below.
      No JS or reduced motion therefore needs no separate fallback stylesheet: it IS the default.
   3. ONE WRITER PER PROPERTY. Everything scroll-driven is written by mt-page.js's single rAF loop
      (transform/opacity only). CSS transitions here are only for click/enter state changes, never
      for a property the loop also writes. */
[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; } }

/* ================= 贍養費 page v3 ================= */
.mt {
  --green: #0B2E24; --paper: #F2F3EE; --sand: #E9ECE4; --ink: #10201B; --amber: #E9A93A;
  --on-dark: #F2F3EE; --on-dark-mute: rgba(242,243,238,.72); --on-dark-dim: rgba(242,243,238,.40);
  --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);
  --kr-ease: cubic-bezier(.22,.61,.36,1);
  --ground-light: linear-gradient(155deg,#DFE6D8 0%,#E9ECE4 52%,#D4DCC9 100%);
  display: block;
}
.mt .sec { padding: 160px 0; }
.mt .on-paper { background: var(--paper); color: var(--ink); }
.mt .on-sand { background: var(--sand); color: var(--ink); }
.mt .on-green { background: var(--green); color: var(--on-dark); }

/* ---------- ONE TYPE SCALE ---------- */
.mt .mt-h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; }
.mt .mt-label { font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: .12em; color: var(--mute); }
.mt .mt-kp { font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.65; }
.mt .mt-num { font-family: var(--serif); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mt .mt-body { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--mute); }
.mt .mt-intro { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--mute); max-width: 34em; margin-top: 18px; }
/* scoped to the v3 sections only: unscoped, this dark ink also hit the shared hero's
   .eyebrow.light over the dark video and measured 1.08:1 (probe:contrast, 2026-09-23). */
.mt [data-mt-sec] .eyebrow { font-weight: 500; font-size: 13px; letter-spacing: .12em; color: rgba(16,32,27,.52); }
/* the three deep-green grounds on this page: the shared label/intro/body classes flip to the
   light ink on all of them, not just on the one that carries the `on-green` utility class. */
.mt .on-green .mt-label, .mt .on-green .mt-intro, .mt .on-green .mt-body,
.mt .mt-stages .mt-label, .mt .mt-stages .mt-intro, .mt .mt-stages .mt-body { color: var(--on-dark-mute); }
/* the site's shared button is sans 600; inside this page's own sections it joins the one scale */
.mt [data-mt-sec] .btn { font-weight: 500; }
.mt [data-mt-sec] b, .mt [data-mt-sec] strong { font-weight: 500; }
.mt .mt-head { max-width: 640px; }
.mt .mt-head-center { margin-inline: auto; text-align: center; }
.mt .mt-head-center .mt-intro { margin-inline: auto; }

/* ---------- shared: image holders, key-point lists ---------- */
.mt .mt-shot { position: relative; overflow: hidden; background: var(--ground-light); }
.mt .mt-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt .mt-kps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.mt .mt-kps > li { padding: 7px 13px; border: 1px solid var(--hair-light); border-radius: var(--r-pill); font-size: 13px; color: var(--mute); }
.mt .on-green .mt-kps > li { border-color: var(--hair-dark); color: var(--on-dark-mute); }
.mt .mt-checks { margin-top: 14px; padding: 0; list-style: none; }
.mt .mt-checks > li { position: relative; padding-left: 24px; margin-bottom: 7px; }
.mt .mt-checks > li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--amber); }

/* ---------- the pin, once and only once ----------
   Every pinned section is the same two boxes: a wrapper whose extra height IS the runway, and an
   inner box that sticks to the top of the viewport for exactly that runway. mt-page.js sets the
   wrapper's height and adds `.is-pinned`; without it (no JS, reduced motion) both boxes are plain
   normal-flow divs and the section reads top to bottom. */
.mt .mt-pin { position: relative; }
.mt .mt-pin.is-pinned > .mt-pin-inner { position: sticky; top: 0; height: var(--screen); overflow: hidden; }

/* ---------- the reveal: the site's OWN kora-reveal recipe and CSS classes ----------
   .kr-item / .kr-in are declared in public/components/kora-reveal.css (opacity 0->1, scale
   .95->1, translateY 2px->0, 400ms cubic-bezier(.22,.61,.36,1)) and only bite once
   kora-reveal.js has put [data-kr-armed] on the root, which it never does under reduced motion.
   kora-reveal.js itself only ever collects elements inside `[data-dp-block]`; this page's v3
   sections deliberately carry no such attribute, so mt-page.js is the SINGLE writer of `.kr-in`
   on them and the two systems never touch the same node. */

/* §3 Income moved to mt-s2.css (贍養費 v4 section 2). */

/* §4 Orders moved to public/components/mt-s3.css (issue #74, v4 section 3, homepage carousel skeleton). */

/* ============================================================
   §5 Compare - the table, type scale only
   ============================================================ */
.mt .mt-compare { background: var(--sand); color: var(--ink); }
.mt .mt-cpanels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.mt .mt-cpanel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--paper); }
.mt .mt-cpanel-hi { background: var(--green); color: var(--on-dark); }
.mt .mt-cphead { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--hair-light); }
.mt .mt-cpanel-hi .mt-cphead { border-bottom-color: var(--hair-dark); }
.mt .mt-cicon { width: 44px; height: 44px; flex: none; object-fit: contain; }
.mt .mt-cpanel-hi .mt-h3 { color: var(--on-dark); }
.mt .mt-crows { margin-top: 22px; padding: 0; list-style: none; }
.mt .mt-crows li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair-light); font-size: 14px; line-height: 1.6; }
.mt .mt-cpanel-hi .mt-crows li { border-top-color: var(--hair-dark); }
.mt .mt-clabel { color: var(--mute); }
.mt .mt-cpanel-hi .mt-clabel { color: var(--on-dark-mute); }
.mt .mt-cval { text-align: right; }
.mt .mt-cfoot { margin-top: 26px; text-align: center; font-size: 15px; line-height: 1.8; color: var(--mute); }

/* ============================================================
   §6 Stages - five stages as a story (owner rows on refs 18/19)
   ============================================================ */
.mt .mt-stages { position: relative; background: var(--green); color: var(--on-dark); border-radius: var(--r-sec) var(--r-sec) 0 0; margin-top: calc(-1 * var(--r-sec)); overflow: clip; }
.mt .mt-stages .h2 { color: var(--on-dark); }
.mt .mt-stages-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); padding: 140px 0; }
.mt .is-pinned .mt-stages-grid { height: 100%; padding: calc(var(--nav-h) + 24px) 0 40px; align-items: center; }
.mt .mt-stages-side { display: flex; flex-direction: column; }
.mt .mt-ind { position: relative; margin-top: 36px; padding: 0 0 0 26px; list-style: none; }
.mt .mt-ind::before { content: ""; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: rgba(242,243,238,.20); }
/* scaleY is written by mt-page.js's loop; height would not be a compositor-only property */
.mt .mt-ind-fill { position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--amber); transform: scaleY(0); transform-origin: top; }
.mt .mt-ind li { position: relative; }
.mt .mt-ind-btn { position: relative; display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 0; border: 0; background: none; color: var(--on-dark-dim); font-family: var(--sans); font-weight: 400; font-size: 15px; text-align: left; cursor: pointer; transition: color .3s ease; }
.mt .mt-ind-btn::before { content: ""; position: absolute; left: -26px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: rgba(242,243,238,.28); transition: background .3s ease, transform .3s ease; }
.mt .mt-ind-btn .mt-num { font-size: 14px; }
.mt .mt-ind li.is-on .mt-ind-btn { color: var(--on-dark); }
.mt .mt-ind li.is-on .mt-ind-btn::before { background: var(--amber); transform: scale(1.5); }
.mt .mt-stages-main { position: relative; }
.mt .is-pinned .mt-stages-main { height: 100%; }
.mt .mt-stage { display: flex; flex-direction: column; }
.mt .mt-stage + .mt-stage { margin-top: 56px; }
.mt .is-pinned .mt-stage { position: absolute; inset: 0; margin-top: 0; opacity: 0; justify-content: center; transition: opacity .3s linear; }
.mt .is-pinned .mt-stage.is-on { opacity: 1; }
/* flex:none is load-bearing: inside the pinned column the photo is a flex item, and without it
   the ratio box is crushed to zero height (measured at 390x844: photo top == photo bottom). */
.mt .mt-stage-photo { position: relative; flex: none; aspect-ratio: 3 / 2; margin: 0; border-radius: var(--r-card); overflow: hidden; background: rgba(242,243,238,.08); }
.mt .mt-stage-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt .is-pinned .mt-stage.is-on .mt-stage-photo { animation: mtRise .45s var(--ease); }
@keyframes mtRise { from { transform: translateY(24px); } to { transform: none; } }
.mt .mt-stage-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 20px; }
.mt .mt-stage-meta .mt-num { font-size: 30px; color: var(--amber); }
.mt .mt-stage .mt-h3 { margin-top: 8px; color: var(--on-dark); }
.mt .mt-stage-body { margin-top: 12px; max-width: 42em; font-size: 15px; line-height: 1.75; color: var(--on-dark-mute); }
.mt .mt-stage .mt-kps { margin-top: 14px; }
.mt .mt-stage .mt-kps > li { border-color: var(--hair-dark); color: var(--on-dark-mute); }

/* ============================================================
   §7 Arrears - three methods, the fan (owner refs 22/23)
   ============================================================ */
.mt .mt-arrears { background: var(--paper); color: var(--ink); padding-bottom: 120px; }
.mt .mt-ar-pin { padding-top: 120px; }
.mt .mt-ar-pin.is-pinned { padding-top: 0; }
.mt .mt-ar-panel { position: relative; margin: 0 9%; border-radius: var(--r-sec); overflow: hidden; aspect-ratio: 16 / 9; transform-origin: center; }
/* the panel "growing to full bleed" is a pure scale (.82 -> 1.06): at rest its rounded corners
   read as an inset card (owner ref 22), and past 1.0 they travel off-screen, so nothing but
   `transform` ever animates here. */
.mt .is-pinned .mt-ar-panel { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
.mt .mt-ar-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s linear; }
.mt .mt-ar-bg.is-on { opacity: 1; }
.mt .mt-ar-veil { position: absolute; inset: 0; background: #06150F; opacity: .28; }
.mt .mt-ar-title { position: relative; z-index: 2; margin: -22% auto 0; max-width: 640px; text-align: center; color: var(--on-dark); }
.mt .is-pinned .mt-ar-title { position: absolute; left: 50%; top: 50%; margin: 0; width: min(640px, 82vw); transform: translate(-50%, -50%); }
.mt .mt-ar-title .h2 { color: var(--on-dark); }
.mt .mt-ar-title .mt-label, .mt .mt-ar-title .mt-intro { color: var(--on-dark-mute); }
.mt .mt-ar-title .mt-intro { margin-inline: auto; }
.mt .mt-fan { display: grid; gap: 24px; margin-top: 48px; }
.mt .is-pinned .mt-fan { display: block; position: absolute; inset: 0; z-index: 3; }
.mt .mt-arcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-card); background: var(--paper); color: var(--ink);
  box-shadow: 0 26px 70px rgba(6,21,15,.28);
}
.mt .is-pinned .mt-arcard {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: max(300px, 24vw); height: 64vh;
  transform-origin: center; will-change: transform;
}
.mt .mt-arcard.is-front { background: var(--green); color: var(--on-dark); }
.mt .mt-arcard.is-front .mt-h3, .mt .mt-arcard.is-front .mt-label { color: var(--on-dark); }
.mt .mt-arcard.is-front .mt-arcard-line, .mt .mt-arcard.is-front .mt-arcard-suit { color: var(--on-dark-mute); }
.mt .mt-arcard.is-front .mt-checks > li { color: var(--on-dark-mute); }
/* min-height:0 is load-bearing: a column flex item defaults to min-height:auto, so the drawing's
   intrinsic height pushed this band from the ruled 40% to a measured ~60% and pushed the third
   checklist row off the bottom of the card (seen at 1440x900 before this line existed). */
.mt .mt-arcard-art { position: relative; flex: 0 0 40%; min-height: 0; overflow: hidden; margin: 0; background: var(--sand); display: grid; place-items: center; padding: 18px; }
.mt .mt-arcard-art img { width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.mt .mt-arcard-copy { flex: 1 1 auto; padding: 20px 22px 24px; display: flex; flex-direction: column; min-height: 0; }
.mt .mt-arcard-copy .mt-h3 { margin-top: 8px; }
.mt .mt-arcard-line { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--mute); }
.mt .mt-arcard-suit { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.mt .mt-arcard .mt-checks { font-size: 13px; }
.mt .mt-ar-close { margin: 56px auto 0; max-width: 640px; text-align: center; font-size: 15px; line-height: 1.8; color: var(--mute); }

/* ============================ PHONE (<900) ============================ */
@media (max-width: 899px) {
  .mt .sec { padding: 80px 0; }
  .mt .mt-h3 { font-size: 20px; }

  .mt .mt-cpanels { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .mt .mt-crows li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .mt .mt-cval { text-align: left; }

  /* minmax(0,1fr), not 1fr: a plain 1fr track has a min-content floor, and the five nowrap pills
     of the indicator row pushed that floor to 402px inside a 350px wrap -- the whole column then
     overflowed the phone viewport and was silently CLIPPED by the pin's own overflow:hidden, so
     the document-level overflow gate could never see it (measured 2026-09-21 at 390 and 360). */
  .mt .mt-stages-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 80px 0; }
  .mt .mt-stages-side, .mt .mt-stages-main, .mt .mt-stage { min-width: 0; }
  .mt .is-pinned .mt-stages-grid { padding: calc(var(--nav-h) + 4px) 0 18px; align-content: start; align-items: start; }
  /* the pinned phone column drops the intro to buy vertical room; the H2 itself is NOT resized,
     because one type scale means the site's own `.h2` at its own 390px size, unmodified. */
  .mt .is-pinned .mt-stages-side .mt-intro { display: none; }
  .mt .mt-ind { display: flex; gap: 8px; margin-top: 12px; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .mt .mt-ind::-webkit-scrollbar { display: none; }
  .mt .mt-ind::before, .mt .mt-ind-fill { display: none; }
  .mt .mt-ind-btn { flex-direction: column; gap: 0; padding: 7px 12px; border: 1px solid rgba(242,243,238,.20); border-radius: var(--r-pill); font-size: 12px; white-space: nowrap; }
  .mt .mt-ind-btn::before { display: none; }
  .mt .mt-ind li.is-on .mt-ind-btn { border-color: var(--amber); }
  .mt .mt-stage-photo { aspect-ratio: 16 / 10; }
  .mt .mt-stage-meta { margin-top: 12px; gap: 10px; }
  .mt .mt-stage-meta .mt-num { font-size: 22px; }
  .mt .mt-stage-body { margin-top: 8px; font-size: 14px; line-height: 1.6; }
  .mt .mt-stage .mt-kps { margin-top: 10px; gap: 6px; }
  .mt .mt-stage .mt-kps > li { padding: 5px 10px; font-size: 11px; }
  .mt .is-pinned .mt-stage { justify-content: flex-start; }

  .mt .mt-ar-pin { padding-top: 64px; }
  .mt .mt-ar-panel { margin: 0 var(--pad); }
  .mt .mt-ar-title { margin-top: -30%; }
  .mt .is-pinned .mt-arcard { width: 78vw; height: 62vh; }
  .mt .mt-arcard-copy { padding: 14px 16px 16px; }
  .mt .mt-arcard-line, .mt .mt-arcard-suit { font-size: 13px; }
  .mt .mt-arrears { padding-bottom: 72px; }
}

/* ============================ REDUCED MOTION ============================
   mt-page.js never adds `.is-pinned` under reduced motion, so every pin above stays in normal
   flow with all of its steps stacked and visible. These rules only neutralise the entrance
   transitions CSS would otherwise still run. */
@media (prefers-reduced-motion: reduce) {
  .mt .mt-stage-photo { animation: none !important; transition: none !important; }
  .mt .mt-kps > li { opacity: 1 !important; transform: none !important; }
}