/* Mortgage Rail film · v3 phone cut (2 Oct 2026, D-136). v3's forms and colours (the main artifact's site tokens), redrawn
   for a 1080 × 1350 frame: no text under 34 px, weights 500 / 400 only (DO-NOT #73). No transitions or animations here:
   film3m.js draws every frame from the time alone. Class prefix p3- so it can sit beside v3 (m3-) on one page. */
.p3{position:relative;width:1080px;height:1350px;overflow:hidden;background:#F4F4F2;color:#111;
  font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  transform-origin:0 0;contain:layout paint}
.p3 *{box-sizing:border-box}
.p3 .ic{display:block;width:100%;height:100%}
.p3-layer{position:absolute;inset:0}
.p3-cam{transform-origin:0 0}
.p3-fade{background:#F4F4F2;opacity:0}

/* narration: one line at a time, up to two rows; words punch in (rise, scale and focus) */
.p3-nar{position:absolute;left:0;top:0;transform-origin:0 0;width:960px}
.p3-eb{position:relative;height:48px}
.p3-eb .lab{position:absolute;left:0;top:0;height:48px;white-space:nowrap;font:500 34px/48px "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#55555A}
.p3-eb .lab.blu{color:#1C6FB0}
.p3-hl{position:relative;margin-top:14px;height:170px}
.p3-hl .line{position:absolute;left:0;top:0;width:max-content;max-width:960px;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:80px;line-height:1.06;font-variation-settings:"opsz" 32;letter-spacing:-.03em;color:#111;text-wrap:balance}
.p3-keep{white-space:nowrap}
.p3-src{position:absolute;left:4px;top:240px;font:400 34px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6F6F74;white-space:nowrap}
.p3-w{display:inline-block;vertical-align:top}
.p3-w>span{display:inline-block;transform-origin:50% 85%}
.p3-lock{position:absolute;left:0;top:0;height:48px;display:flex;align-items:center;overflow:hidden}
.p3-lock .in{display:flex;align-items:center;gap:20px}
.p3-lock img{height:46px;width:auto;display:block}
.p3-lock span{padding-left:20px;border-left:2px solid rgba(17,17,17,.22);font:500 36px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111;white-space:nowrap}

/* the case window (act 2): the title, then the share button on its own row */
.p3-win{position:absolute;border-radius:32px;background:#fff;box-shadow:0 1px 2px rgba(10,20,40,.08),0 36px 72px -36px rgba(10,20,40,.35)}
.p3-ttl{position:absolute;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:40px;line-height:48px;font-variation-settings:"opsz" 32;letter-spacing:-.01em;white-space:nowrap}
.p3-btn{position:absolute;height:64px;border-radius:16px;color:#fff;overflow:hidden;transform-origin:0 50%}
.p3-btn .sl{position:absolute;left:24px;top:0;height:64px;display:flex;align-items:center;gap:12px;font:500 34px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap}
.p3-btn .sl i{width:32px;height:32px;flex:none}

/* party cards: one list */
.p3-card{position:absolute;left:0;top:0;height:88px;border-radius:22px;background:#fff;display:flex;align-items:center;gap:22px;padding:0 28px;transform-origin:center}
.p3-card .sh{position:absolute;inset:0;border-radius:inherit;box-shadow:0 1px 2px rgba(0,63,90,.06),0 26px 48px -28px rgba(0,63,90,.42);pointer-events:none}
.p3-card .bd{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #E6E8EC;pointer-events:none}
.p3-t3{position:relative;width:48px;height:48px;border-radius:99px;flex:none}
.p3-t3.sm{width:46px;height:46px}
.p3-t3 .br,.p3-t3 .ring,.p3-t3 .arc{position:absolute;inset:0;border-radius:99px}
.p3-t3 .ring{box-shadow:inset 0 0 0 3px rgba(17,17,17,.22)}
.p3-t3 .arc{border:3px solid transparent;border-top-color:#2B8FD9;border-right-color:#2B8FD9}
.p3-t3 .ok,.p3-t3 .wn{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
.p3-t3 .ok svg{stroke-width:2.6}
.p3-t3 .wn{width:28px;height:28px;margin:-14px 0 0 -14px}
.p3-t3 .wn svg{stroke-width:2}
.p3-tx{position:relative;flex:1;display:flex;align-items:center;gap:20px;min-width:0}
.p3-name{flex:none;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:44px;line-height:52px;font-variation-settings:"opsz" 32;letter-spacing:-.01em;white-space:nowrap}
.p3-ans{position:relative;flex:1;height:50px;overflow:hidden;font:400 38px/50px "Instrument Sans",system-ui,sans-serif;color:#55555A}
.p3-ans span{position:absolute;right:0;top:0;white-space:nowrap}

/* the road to completion */
.p3-base,.p3-fill{position:absolute;height:5px;border-radius:3px;transform-origin:0 50%}
.p3-head{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:99px}
.p3-base{background:rgba(17,17,17,.12)}
.p3-st{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:99px;display:grid;place-items:center}
.p3-st>i{width:30px;height:30px;display:block}
.p3-st>i svg{stroke-width:1.7}
.p3-bdg{position:absolute;right:-5px;top:-5px;width:26px;height:26px;border-radius:99px;background:#fff;display:grid;place-items:center}
.p3-bdg b{width:12px;height:12px;border-radius:9px;background:currentColor}
.p3-lab{position:absolute;font:400 34px/1.25 "Instrument Sans",system-ui,sans-serif;color:#4B5260;white-space:nowrap}
.p3-pill{position:absolute;height:50px;border-radius:999px;overflow:hidden;font:500 34px/50px "Instrument Sans",system-ui,sans-serif;text-align:center;white-space:nowrap}
.p3-pill .reel{position:absolute;left:0;right:0;top:0}
.p3-pill .reel div{height:50px}

/* pop messages */
.p3-toast{position:absolute;display:flex;gap:20px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 28px 50px -20px rgba(10,30,60,.38);white-space:nowrap;transform-origin:50% 0}
.p3-toast.tall{align-items:flex-start;padding:20px 32px 22px 20px}
.p3-toast .tic{position:relative;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:#FDECEA;color:#B42318;flex:none}
.p3-toast .tic i{width:32px;height:32px;display:block}
.p3-toast .tic .png{position:absolute;inset:0;border-radius:inherit}
.p3-toast .tic.ok{background:#E4F3EA;color:#1F7A4D}
.p3-toast .col{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:6px}
.p3-toast b{font:500 40px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111}
.p3-toast small{font:400 34px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6F6F74}
.p3-chips{display:flex;flex-wrap:wrap;gap:12px;max-width:560px;white-space:normal}

/* chips: in the pop messages, the checks and in flight */
.p3-chip{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-radius:999px;font:500 34px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap}
.p3-chip i{width:28px;height:28px;display:block;flex:none}
.p3-chip.red{background:#FDECEA;color:#B42318}
.p3-chip.amb{background:#FBF0E3;color:#8F4E10}
.p3-chip.grn{background:#E4F3EA;color:#1F7A4D}

/* the day-one checks panel */
.p3-panel{position:absolute;border-radius:26px;background:#fff;box-shadow:0 1px 2px rgba(10,20,40,.08),0 34px 66px -32px rgba(10,20,40,.35);overflow:hidden;transform-origin:50% 0}
.p3-ph{position:absolute;left:32px;right:32px;top:0;height:108px;display:flex;align-items:center;gap:16px}
.p3-ph .tt{position:relative;flex:1;height:50px;overflow:hidden;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:42px;line-height:50px;font-variation-settings:"opsz" 32;letter-spacing:-.01em}
.p3-ph .tt span{position:absolute;left:0;top:0;white-space:nowrap}
.p3-ph .pl{position:relative;height:54px;border-radius:999px;overflow:hidden;font:500 34px/54px "Instrument Sans",system-ui,sans-serif;white-space:nowrap;text-align:center}
.p3-row{position:absolute;left:32px;right:32px;height:96px;display:flex;align-items:center;gap:20px;border-top:1.5px solid #E6E8EC}
.p3-row .nm{flex:1;font:400 40px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111;white-space:nowrap}
.p3-row .vl{position:relative;height:54px}
.p3-link{position:absolute;width:0;border-left:3px dashed rgba(43,143,217,.55);transform-origin:50% 0}

/* the blocker dot, flying chips and the pointer */
.p3-bdot{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:99px}
.p3-fchip{position:absolute;left:0;top:0;transform-origin:100% 50%;box-shadow:0 16px 30px -12px rgba(10,20,40,.35);border-radius:999px}
.p3-ptr{position:absolute;left:0;top:0;width:42px;height:42px}
.p3-ptr svg{width:42px;height:42px;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
.p3-ptr .ring{position:absolute;left:-14px;top:-16px;width:48px;height:48px;border-radius:99px;background:rgba(43,143,217,.35)}

/* measuring (hidden) */
.p3-meas{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:nowrap}
