/* Mortgage Rail film · v3 (2 Oct 2026, D-134). Same forms and colours as v1/v2 (the main artifact's site tokens, screens.css,
   motion.css), weights 500 / 400 only (DO-NOT #73). v3 adds the pop messages (blockers found on day one, cleared before
   exchange) and reads at a human pace (DO-NOT #119). No transitions or animations here: film3.js draws every frame from the
   time alone. Class prefix m3- so v2 can sit beside it. */
.m3{position:relative;width:1920px;height:1080px;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}
.m3 *{box-sizing:border-box}
.m3 .ic{display:block;width:100%;height:100%}
.m3-layer{position:absolute;inset:0}
.m3-cam{transform-origin:0 0}
.m3-fade{background:#F4F4F2;opacity:0}

/* narration: one line at a time; words punch in (rise, scale and focus), no mask */
.m3-nar{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap}
.m3-eb{position:relative;height:44px}
.m3-eb .lab{position:absolute;left:0;top:0;height:44px;white-space:nowrap;font:500 24px/44px "Instrument Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#55555A}
.m3-eb .lab.blu{color:#1C6FB0}
.m3-hl{position:relative;margin-top:14px;height:100px}
.m3-hl .line{position:absolute;left:0;top:0;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:var(--hl,88px);line-height:1.06;font-variation-settings:"opsz" 32;letter-spacing:-.03em;color:#111}
.m3-src{position:absolute;left:4px;top:172px;font:400 22px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6F6F74}
.m3-w{display:inline-block;vertical-align:top}
.m3-w>span{display:inline-block;transform-origin:50% 85%}
.m3-lock{position:absolute;left:0;top:0;height:44px;display:flex;align-items:center;gap:18px;overflow:hidden}
.m3-lock .in{display:flex;align-items:center;gap:18px}
.m3-lock img{height:40px;width:auto;display:block}
.m3-lock span{padding-left:18px;border-left:1.5px solid rgba(17,17,17,.22);font:500 28px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111;white-space:nowrap}

/* the case window (act 2) */
.m3-win{position:absolute;border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(10,20,40,.08),0 32px 64px -32px rgba(10,20,40,.35)}
.m3-ttl{position:absolute;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:30px;line-height:36px;font-variation-settings:"opsz" 32;letter-spacing:-.01em;white-space:nowrap}
.m3-btn{position:absolute;height:52px;border-radius:12px;color:#fff;overflow:hidden;transform-origin:center}
.m3-btn .sl{position:absolute;right:22px;top:0;height:52px;display:flex;align-items:center;gap:10px;font:500 24px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap}
.m3-btn .sl i{width:24px;height:24px;flex:none}

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

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

/* pop message (act 1) and the dark note (act 2) */
.m3-toast{position:absolute;height:80px;display:flex;align-items:center;gap:16px;padding:0 26px 0 16px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.06),0 24px 44px -18px rgba(10,30,60,.38);white-space:nowrap;transform-origin:50% 0}
.m3-toast .tic{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#FDECEA;color:#B42318;flex:none}
.m3-toast .tic i{width:26px;height:26px;display:block}
.m3-toast .tic .png{position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(180,35,24,.35)}
.m3-toast b{font:500 28px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111}
.m3-note{position:absolute;height:64px;border-radius:16px;background:#1D2330;color:#fff;box-shadow:0 18px 36px -16px rgba(10,20,40,.5)}
.m3-note .ar{position:absolute;top:-7px;width:16px;height:16px;border-radius:3px;background:#1D2330;transform:rotate(45deg)}
.m3-note .fi{position:absolute;left:18px;top:18px;width:28px;height:28px;border-radius:99px}
.m3-note .fi .spn{position:absolute;inset:0;border-radius:99px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#8CC8F2}
.m3-note .fi .dot{position:absolute;inset:0;border-radius:99px;background:#D98A2B;display:grid;place-items:center;font:500 18px/1 "Instrument Sans",system-ui,sans-serif;color:#fff}
.m3-note .tx{position:absolute;left:60px;right:22px;top:15px;height:34px;overflow:hidden;font:400 26px/34px "Instrument Sans",system-ui,sans-serif}
.m3-note .tx span{position:absolute;left:0;top:0;white-space:nowrap}

/* routing dots and the pointer */
.m3-dot{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:99px;background:#D98A2B;box-shadow:0 0 0 6px rgba(217,138,43,.22)}
.m3-ptr{position:absolute;left:0;top:0;width:34px;height:34px}
.m3-ptr svg{width:34px;height:34px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
.m3-ptr .ring{position:absolute;left:-12px;top:-14px;width:40px;height:40px;border-radius:99px;background:rgba(43,143,217,.35)}

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

/* v3: pop messages with chips, the day-one checks panel and its rows, the dashed link from day one, the travelling blocker dot */
.m3-toast.tall{height:auto;align-items:flex-start;padding:14px 26px 14px 16px}
.m3-toast .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.m3-toast small{font:400 22px/1.3 "Instrument Sans",system-ui,sans-serif;color:#6F6F74}
.m3-toast .tic.ok{background:#E4F3EA;color:#1F7A4D}
.m3-chips{display:flex;gap:10px}
.m3-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;font:500 22px/1 "Instrument Sans",system-ui,sans-serif;white-space:nowrap}
.m3-chip i{width:20px;height:20px;display:block;flex:none}
.m3-chip.red{background:#FDECEA;color:#B42318}
.m3-chip.amb{background:#FBF0E3;color:#8F4E10}
.m3-chip.grn{background:#E4F3EA;color:#1F7A4D}
.m3-panel{position:absolute;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(10,20,40,.08),0 30px 60px -30px rgba(10,20,40,.35);overflow:hidden;transform-origin:50% 0}
.m3-ph{position:absolute;left:28px;right:28px;top:0;height:76px;display:flex;align-items:center;gap:12px}
.m3-ph .tt{position:relative;flex:1;height:36px;overflow:hidden;font-family:"Inter","Inter Display",system-ui,sans-serif;font-weight:500;font-size:28px;line-height:36px;font-variation-settings:"opsz" 32;letter-spacing:-.01em}
.m3-ph .tt span{position:absolute;left:0;top:0;white-space:nowrap}
.m3-ph .pl{position:relative;height:38px;border-radius:999px;overflow:hidden;font:500 22px/38px "Instrument Sans",system-ui,sans-serif;white-space:nowrap;text-align:center}
.m3-row{position:absolute;left:28px;right:28px;height:60px;display:flex;align-items:center;gap:16px;border-top:1px solid #E6E8EC}
.m3-row .nm{flex:1;font:400 26px/1.2 "Instrument Sans",system-ui,sans-serif;color:#111;white-space:nowrap}
.m3-row .vl{position:relative;height:38px}
.m3-link{position:absolute;width:0;border-left:3px dashed rgba(43,143,217,.55);transform-origin:50% 0}
.m3-bdot{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:99px}
.m3-fchip{position:absolute;left:0;top:0;transform-origin:0 50%;box-shadow:0 14px 28px -12px rgba(10,20,40,.35)}