/* A live document journey, scoped to the homepage proof figure. */
.pm-demo { --pm-ink:#173151; --pm-blue:#1761d6; width:min(100%,465px); min-width:0; justify-self:center; margin:0; padding:26px; border-radius:16px; background:#f3f7fd; color:var(--pm-ink); isolation:isolate; }
.pm-demo:focus-visible { outline:3px solid #80b8ff; outline-offset:6px; }
.pm-demo svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pm-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.pm-heading strong { display:block; font-size:22px; letter-spacing:-.025em; line-height:1.3; }
.pm-heading div>span { display:block; margin-top:4px; color:#536780; font-size:12px; }
.pm-mail-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; color:var(--pm-blue); }
.pm-mail-icon svg { width:32px; height:32px; }
.pm-mail { display:flex; align-items:center; gap:12px; min-height:70px; padding:12px 14px; background:#e7effb; border-radius:12px; transition:opacity 400ms,transform 500ms cubic-bezier(.16,1,.3,1); }
.pm-mail strong { display:block; font-size:13px; line-height:1.5; }
.pm-mail div>span { color:#536780; font-size:11px; }
.pm-mail i { padding:0 3px; font-style:normal; }
.pm-file-icon { display:grid; place-items:center; flex:none; width:34px; height:42px; background:#fff; border:1px solid #c5d6ee; border-radius:5px; color:var(--pm-blue); font-size:10px; font-weight:800; }
.pm-mail-check { flex:none; width:20px; height:20px; margin-left:auto; color:#19704d; }
.pm-connector { position:relative; width:2px; height:24px; margin-inline:auto; background:#d4e1f4; overflow:hidden; }
.pm-connector span { position:absolute; inset:-14px 0 auto; height:14px; background:var(--pm-blue); transform:translateY(38px); }
.pm-document { position:relative; overflow:hidden; padding:20px 20px 0; border-radius:12px; background:#fff; box-shadow:0 12px 28px #1731510d; }
.pm-document-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.pm-document-top div>span { display:block; color:#536780; font-size:11px; }
.pm-document-top strong { display:block; margin-top:3px; font-size:29px; line-height:1.2; font-weight:750; letter-spacing:-.025em; }
.pm-document-seal { color:#7a9ecf; }
.pm-document-seal svg { width:32px; height:40px; }
.pm-field { display:grid; grid-template-columns:90px 1fr 20px; align-items:center; gap:15px; min-height:39px; border-top:1px solid #edf1f7; font-size:12px; }
.pm-data-lines { display:flex; align-items:center; gap:5px; }
.pm-data-lines i { display:block; height:5px; width:52%; background:#c5d7ec; border-radius:2px; transition:background 400ms; }
.pm-data-lines i+i { width:24%; }
.pm-field:nth-child(2) .pm-data-lines i { width:36%; }
.pm-field:nth-child(3) .pm-data-lines i { width:26%; }
.pm-field svg { width:19px; height:19px; color:#19704d; stroke-width:2; transition:opacity 250ms,transform 400ms; }
.pm-agent { display:flex; align-items:center; gap:8px; position:relative; z-index:1; min-height:44px; margin:10px -20px 0; padding:8px 14px; background:#edf4ff; color:#245596; font-size:11px; font-weight:650; }
.pm-agent-mark { width:20px; height:20px; flex:none; }
.pm-agent-mark svg { width:100%; height:100%; }
.pm-agent-dots { display:flex; gap:3px; margin-left:auto; }
.pm-agent-dots i { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.35; }
.pm-scan { position:absolute; top:94px; left:12px; right:12px; height:2px; background:#448bfa; opacity:0; }
.pm-scan::before { content:""; position:absolute; inset:-20px 0 2px; background:linear-gradient(transparent,#448bfa18); }
.pm-result { display:flex; align-items:center; gap:12px; min-height:76px; padding:12px 14px; border-radius:12px; background:#e0f2e9; transition:opacity 450ms,transform 550ms cubic-bezier(.16,1,.3,1); }
.pm-onec { color:#a12230; font-size:25px; letter-spacing:-.04em; font-weight:800; }
.pm-result strong { display:block; color:#16523a; font-size:14px; line-height:1.5; }
.pm-result div>span { color:#3b6553; font-size:11px; }
.pm-result-check { flex:none; width:26px; height:26px; margin-left:auto; color:#19704d; }
.pm-result-check path { stroke-dasharray:24; stroke-dashoffset:0; transition:stroke-dashoffset 500ms 150ms; }
.pm-demo .pm-route { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; padding:0; color:#536780; font-size:11px; font-weight:650; }
.pm-route svg { width:22px; height:12px; color:#8097b4; }
.pm-demo[data-phase="0"] .pm-field svg,.pm-demo[data-phase="1"] .pm-field svg { opacity:0; transform:scale(.6); }
.pm-demo[data-phase="0"] .pm-result,.pm-demo[data-phase="1"] .pm-result,.pm-demo[data-phase="2"] .pm-result { opacity:.28; transform:translateY(5px); }
.pm-demo:not([data-phase="3"]) .pm-result-check path { stroke-dashoffset:24; }
.pm-demo[data-phase="2"] .pm-field:nth-child(2) svg { transition-delay:250ms; }
.pm-demo[data-phase="2"] .pm-field:nth-child(3) svg { transition-delay:500ms; }
.pm-demo[data-phase="2"] .pm-data-lines i,.pm-demo[data-phase="3"] .pm-data-lines i { background:#91b7e8; }
.pm-demo[data-phase="0"] .pm-document { opacity:.55; }
.pm-document { transition:opacity 400ms; }
.pm-demo.is-proof-playing[data-phase="0"] .pm-mail { animation:pm-arrive 650ms cubic-bezier(.16,1,.3,1) both; }
.pm-demo.is-proof-playing[data-phase="1"] .pm-scan { animation:pm-scan 1800ms ease-in-out infinite; }
.pm-demo.is-proof-playing[data-phase="0"] .pm-connector:not(.pm-connector-last) span,
.pm-demo.is-proof-playing[data-phase="1"] .pm-connector:not(.pm-connector-last) span,
.pm-demo.is-proof-playing[data-phase="2"] .pm-connector-last span { animation:pm-transfer 1100ms ease-in-out infinite; }
.pm-demo.is-proof-playing:not([data-phase="3"]) .pm-agent-dots i { animation:pm-dot 900ms ease-in-out infinite alternate; }
.pm-demo .pm-agent-dots i:nth-child(2) { animation-delay:150ms; }
.pm-demo .pm-agent-dots i:nth-child(3) { animation-delay:300ms; }
.pm-demo[data-proof-paused] *, .pm-demo[data-proof-paused] *::before { animation-play-state:paused!important; }
@keyframes pm-arrive { from { opacity:.25; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pm-scan { 0%,100% { opacity:0; transform:translateY(0); } 12% { opacity:1; } 88% { opacity:1; } 95% { transform:translateY(108px); } }
@keyframes pm-transfer { from { transform:translateY(0); } to { transform:translateY(38px); } }
@keyframes pm-dot { to { opacity:1; } }
@media(max-width:480px) { .pm-demo { padding:20px 16px; } .pm-heading { margin-bottom:20px; gap:8px; } .pm-heading strong { font-size:21px; } .pm-field { grid-template-columns:80px 1fr 20px; gap:10px; } .pm-document { padding:18px 16px 0; } .pm-agent { margin-inline:-16px; padding-inline:12px; } .pm-mail { gap:9px; padding-inline:10px; } .pm-mail strong { font-size:12px; } .pm-result { gap:9px; padding-inline:10px; } .pm-result strong { font-size:13px; } .pm-result div>span { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .pm-demo *, .pm-demo *::before { animation:none!important; transition:none!important; } }