/* TrustPay site: "The money doesn't disappear while you disagree" (#disputes). Section-scoped (linked from
   _src/disputes.html; disputes.js drives it). v6 (3 Oct 2026): flat 2D. The deal agreement is a real typeset page
   (HTML, crisp at any zoom) on a mint stage; it unrolls downward with the scroll through a moving mask (compositor
   transforms only). No tilt, no roll, no shadow, no rules: rows are tone blocks. Then clause 3 is marked, both
   signatures write themselves and a FUNDS HELD stamp lands. Desktop: pinned. Phone: the page follows the scroll.
   Reduced motion / Pause motion: the finished page. */

.pp-sec { --pp-paper: #F1F5F2; --pp-row: transparent; --pp-ink: #0F201B; --pp-ink-2: #4A5C55; --pp-pen: #0E7350; --pp-stamp: #B36A00; --pp-hl: rgb(255 194 61 / .55); }
:root[data-theme="dark"] .pp-sec { --pp-paper: #F2F7F4; --pp-row: #E1E9E4; --pp-hl: rgb(255 194 61 / .6); }

.pp-stick { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; max-width: var(--max); margin: 0 auto; }
.pp-head .h2 { max-width: 13ch; }
.pp-cap { display: flex; align-items: flex-start; gap: 12px; max-width: 30rem; margin-top: 28px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.pp-cap .i { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--lock-soft); color: var(--lock-text); }
/* r9 (client): one container level: the agreement is the one card (app card tone), no mint stage behind it */
.pp-stage { display: grid; justify-items: center; padding: 0; overflow: hidden; }
/* --pp-min: the CSS size that renders at 12px after the zoom, so no doc text lands under 12px */
.pp-zoom { --pp-dw: 620; zoom: var(--pp-z, .8); --pp-min: calc(12px / var(--pp-z, .8)); }
.pp-frame { position: relative; width: 620px; height: var(--pp-h, 860px); }

/* ---------------------------------------------------------------- the page */
.pp-mask { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.pp-doc { position: relative; display: flex; flex-direction: column; width: 620px; padding: 40px 48px 30px; border-radius: 28px; overflow: hidden;
  background: var(--pp-paper); color: var(--pp-ink); font: 400 max(13.5px, var(--pp-min))/1.5 var(--sans); letter-spacing: -.003em; will-change: transform; }
.pp-doc > * { position: relative; z-index: 1; }
.pp-doc code { font: 500 max(.92em, var(--pp-min))/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; }
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pp-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--pp-ink); font-weight: 700; font-size: max(15px, var(--pp-min)); letter-spacing: -.02em; }
.pp-brand .tp-mark { width: 22px; height: 22px; --mark-cut: var(--pp-paper); }
.pp-ref { display: grid; justify-items: end; font-size: max(12px, var(--pp-min)); color: var(--pp-ink-2); line-height: 1.35; }
.pp-ref b { color: var(--pp-ink); font-weight: 650; font-size: max(13px, var(--pp-min)); }
.pp-title { margin-top: 30px; font-family: var(--display); font-size: max(38px, var(--pp-min)); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.pp-lede { margin-top: 8px; color: var(--pp-ink-2); font-size: max(14px, var(--pp-min)); }
.pp-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.pp-parties > div { padding: 0; }
.pp-parties small, .pp-terms dt { display: block; color: var(--pp-ink-2); font-size: max(12px, var(--pp-min)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pp-parties b { display: block; margin-top: 3px; font-size: max(18px, var(--pp-min)); font-weight: 650; letter-spacing: -.02em; }
.pp-parties span { display: block; color: var(--pp-ink-2); font-size: max(12.5px, var(--pp-min)); }
.pp-terms { display: grid; gap: 2px; margin-top: 18px; }
.pp-terms div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 5px 0; }
.pp-terms dt { font-size: max(12px, var(--pp-min)); }
.pp-terms dd { font-size: max(13.5px, var(--pp-min)); }
.pp-terms dd b { font-weight: 650; }
.pp-clauses { display: grid; gap: 9px; margin-top: 20px; color: var(--pp-ink-2); font-size: max(13px, var(--pp-min)); line-height: 1.5; }
.pp-clauses b { color: var(--pp-ink); font-weight: 650; }
.pp-key { position: relative; }
.pp-hl { position: absolute; z-index: -1; left: -7px; right: -7px; top: -2px; bottom: -2px; border-radius: 6px; background: var(--pp-hl);
  transform-origin: 0 50%; transform: scaleX(var(--pp-hl-p, 1)); }
.pp-key b, .pp-key { color: var(--pp-ink); }
.pp-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 26px; }
.pp-sign svg { display: block; width: 100%; max-width: 190px; height: auto; aspect-ratio: 180 / 70; margin-bottom: 2px; overflow: visible; }
.pp-sign path { fill: none; stroke: var(--pp-pen); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--pp-sig, 0); }
.pp-sign > span { display: block; padding: 4px 0; color: var(--pp-ink-2); font-size: max(12px, var(--pp-min)); }
.pp-sign > span b { color: var(--pp-ink); font-weight: 650; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; color: var(--pp-ink-2); font-size: max(12px, var(--pp-min)); }
.pp-ini { display: inline-flex; align-items: center; gap: 6px; }
.pp-ini i { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: var(--raised); color: var(--pp-pen); font: 600 italic max(12px, var(--pp-min))/1 var(--sans); opacity: var(--pp-ini, 1); }
.pp-stamp { position: absolute; z-index: 2; right: 34px; bottom: 58px; width: 148px; height: 148px; color: var(--pp-stamp); font-family: var(--sans);
  opacity: var(--pp-st-o, .88); transform: rotate(-13deg) scale(var(--pp-st-s, 1)); transform-origin: 50% 50%; }
.pp-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- after the page: the scene + four notes */
.dis-after { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: clamp(28px, 4vw, 72px); align-items: center; max-width: var(--max); margin: clamp(56px, 7vw, 104px) auto 0; }
.dis-art { position: relative; container-type: inline-size; }   /* r9c: the scene draws on a transparent ground (art 9909a13), so no panel around it: one level */
/* r10 (client: dead space above and below): the slot is as tall as the scene's composition, 244 px at 358 wide rising
   to 300 px at 720 (the scene puts its header and split 10 px from the top and bottom edges), not a fixed 440 / 300 */
.art-disputes { position: relative; height: calc(188.6px + 15.47cqw); display: grid; place-items: center; padding: 20px; }
.art-disputes.is-live { padding: 0; }
.dis-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 40px) clamp(20px, 2.4vw, 36px); }
.dis-notes li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.dis-notes b { display: block; font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.dis-notes li > span:last-child { color: var(--muted); font-size: 15px; line-height: 1.5; hyphens: manual; text-wrap: pretty; }
.dis-notes b { color: var(--ink); }
.li-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); }
.li-ic .i { width: 20px; height: 20px; }


/* short pinned screens: disputes.js drops the least needed lines so the text stays >= 12px instead of shrinking */
.pp-doc[data-cut] .pp-lede, .pp-doc[data-cut] .pp-terms > div:nth-child(3), .pp-doc[data-cut] .pp-terms > div:nth-child(4),
.pp-doc[data-cut] .pp-clauses li:nth-child(1), .pp-doc[data-cut] .pp-clauses li:nth-child(2) { display: none; }
.pp-doc[data-cut="2"] .pp-parties span, .pp-doc[data-cut="2"] .pp-terms > div:nth-child(5), .pp-doc[data-cut="2"] .pp-foot > span:first-child { display: none; }
.pp-doc[data-cut="2"] .pp-title { margin-top: 18px; }

/* ---------------------------------------------------------------- desktop: pinned while it unrolls */
@media (min-width: 1024px) and (min-height: 620px) {
  html.motion .pp-sec { padding-top: 0; margin-top: -30px; }   /* r9: no mint stage any more, the page itself starts 30 px lower in the pinned screen */
  html.motion .pp-pin { height: 240vh; }
  html.motion .pp-stick { position: sticky; top: 0; height: 100vh; padding: calc(var(--pill-b) + 4px) 0 28px; }
}
@media (max-width: 1023px) {
  .pp-stick { grid-template-columns: 1fr; }
  .pp-head { text-align: center; }
  .pp-head .h2, .pp-head .sub, .pp-cap { margin-inline: auto; }
  .pp-cap { text-align: left; }
  .dis-after { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pp-zoom { --pp-dw: 400; }
  .pp-frame, .pp-doc { width: 400px; }
  .pp-doc { padding: 28px 24px 22px; font-size: max(14px, var(--pp-min)); }
  .pp-ref { font-size: max(12.5px, var(--pp-min)); }
  .pp-parties small, .pp-terms dt { font-size: max(12px, var(--pp-min)); letter-spacing: .05em; }
  .pp-parties span { font-size: max(13px, var(--pp-min)); }
  .pp-foot { font-size: max(12px, var(--pp-min)); }
  .pp-title { margin-top: 24px; font-size: max(34px, var(--pp-min)); }
  .pp-terms div { grid-template-columns: 100px minmax(0, 1fr); }
  .pp-terms dd { font-size: max(14px, var(--pp-min)); }
  .pp-clauses { font-size: max(14px, var(--pp-min)); }
  .pp-signs { gap: 24px; }
  .pp-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pp-stamp { right: 14px; bottom: 92px; width: 120px; height: 120px; }
}
@media (max-width: 560px) { .dis-notes { grid-template-columns: 1fr; } }