/* Privacy: the page flows over the vault film (scripts/privacy.mjs, played by /v6/flow.js). Same layout as Pawn loans' .flow; here the film layer is .vaultbg */
.vaultbg{position:fixed;inset:0;z-index:0;pointer-events:none;--dim:0;background:#050406}
.vaultbg picture,.vaultbg .still,.vaultbg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vaultbg .still{object-fit:cover;transition:opacity .8s var(--ease)}
.vaultbg canvas{opacity:0}.vaultbg.live .still{opacity:0}
/* the words stand on the left (computers) or below the vault (phones): a soft shade there, deeper while a long line is read (--dim) */
/* the film stays far behind the words (owner 2026-10-26: "too loud ... make it much more background"): the pictures are baked dark and grey, a veil covers the whole film, and the words' side is darker still */
.vaultbg .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,6,.95) 0%,rgba(5,4,6,.9) 42%,rgba(5,4,6,.62) 66%,rgba(5,4,6,.45) 100%)}
.vaultbg .scrim::after{content:"";position:absolute;inset:0;background:rgba(5,4,6,.78);opacity:var(--dim)}
.pvflow{background:#050406}
.pvflow .pv-t{max-width:min(600px,46vw)}
.pvflow .pv-t h2{font:500 clamp(14px,1.1vw,16px)/1.3 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 22px}
.pvflow .pv-t .statement.sm{font-size:clamp(30px,3.4vw,56px);margin:0 0 20px}
.pvflow .pv-t p{color:var(--on-ink-2);margin:0 0 10px}
.pvflow .pv-t .detail{font-size:clamp(17px,1.25vw,20px)}
/* short laptop screens (1280x585): the small lines wrap before they reach the vault's rim */
.pvflow .pv-t .detail{max-width:min(460px,34vw)}
/* each section's words rise in as they reach the middle (Pause and reduced motion: already in place) */
.js:not(.still) .pvflow .pv-t{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.3s cubic-bezier(.2,.7,.3,1)}
.js:not(.still) .pvflow .pv-t.on{opacity:1;transform:none}

/* No forms: the seal draws itself round the line, then the wax is pressed on where the thread ends */
.pv-forms .wrap{display:flex}
.pv-sealbox{display:grid;place-items:center;width:min(560px,46vw)}
.pv-seal{width:100%;height:auto;grid-area:1/1;overflow:visible}
.pv-seal .dots{fill:none;stroke:rgba(226,194,156,.32);stroke-width:2;stroke-dasharray:2 10}
.pv-seal .draw{stroke-width:2.5}
.pv-seal .wax circle{fill:#8E2A1F;stroke:#5E160F;stroke-width:2}
.pv-seal .wax .in{fill:#A63A2A;stroke:#C9584A;stroke-width:1.5;opacity:.85}
.pv-seal .wax .rim{fill:none;stroke:#E8B89A;stroke-width:1.5;opacity:.55}
.pv-seal .wax{transform-box:fill-box;transform-origin:50% 50%}
.js:not(.still) .pv-seal .wax{opacity:0;transform:translateY(-26px) scale(1.25)}
.js:not(.still) .pv-seal .wax.on{opacity:1;animation:pv-press .7s cubic-bezier(.3,0,.4,1) both}
@keyframes pv-press{0%{opacity:0;transform:translateY(-26px) scale(1.25)}55%{opacity:1;transform:translateY(0) scale(1.08,.9)}75%{transform:scale(.97,1.04)}100%{opacity:1;transform:none}}
.pv-sealbox .in{grid-area:1/1;text-align:center;max-width:min(380px,32vw)}
.pv-sealbox h2{font:500 clamp(14px,1.1vw,16px)/1.3 var(--text);letter-spacing:.3em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 18px}
.pv-sealbox .statement.sm{font-size:clamp(24px,2.5vw,40px);margin:0 auto}

@media(max-width:767px){
  .vaultbg .scrim{background:linear-gradient(180deg,rgba(5,4,6,.45) 0%,rgba(5,4,6,.6) 36%,rgba(5,4,6,.92) 58%,rgba(5,4,6,.96) 100%)}
  /* phones: the vault is bright at the top of the screen, so the words sit on a dark panel wherever they scroll */
  .pvflow .pv-t{max-width:none;background:rgba(5,4,6,.86);border:1px solid rgba(226,194,156,.12);border-radius:16px;padding:22px 20px 14px;margin:0 -6px}
  .pvflow .pv-t .detail{max-width:none}
  .pv-forms .wrap{justify-content:center}
  .pv-sealbox{width:min(440px,92vw)}
  .pv-sealbox .in{max-width:70vw}
}
@media(prefers-reduced-motion:reduce){.js .pvflow .pv-t,.js .pv-seal .wax{opacity:1;transform:none;animation:none}}