.custom-film{position:relative;margin:0 auto;width:100%;max-width:920px;border:1px solid #dce3e5;border-radius:12px;overflow:hidden;background:white;box-shadow:0 14px 35px #203a4210}.cf-window{position:relative;overflow:hidden;background:#e5eaf0}.cf-app{position:relative;width:1000px;height:590px;transform-origin:top left;background:#e5eaf0;color:#26343e;font:14px/1.5 Inter,Arial,sans-serif;transition:opacity .5s}.cf-app *{box-sizing:border-box}.cf-app h3,.cf-app h4,.cf-app p{margin:0}.cf-app small{font-size:9px;color:#7d8d9b;letter-spacing:.4px}.cf-off{display:none!important}.cf-top{height:61px;display:flex;align-items:center;gap:13px;background:white;border-bottom:1px solid #dbe3e7;padding:0 24px}.cf-top img{width:35px;height:30px}.cf-top>b{font-size:23px;letter-spacing:-.5px}.cf-top>span{font-size:12px;color:#84929e;border-left:1px solid #dce3e5;padding-left:17px;margin-left:7px}.cf-stage{display:grid;grid-template-columns:235px 1fr;height:529px}.cf-base{background:#172d36;color:#fff;padding:25px 21px;position:relative}.cf-base>small{color:#81bcb6;font-size:8px}.cf-base h3{font-size:21px;line-height:1.3;margin:11px 0 14px}.cf-base p{font-size:11px;color:#b9cbd0;margin-bottom:22px}.cf-base>div{padding:10px 0;border-bottom:1px solid #ffffff12;font-size:11px;color:#d8e6e9}.cf-base footer{position:absolute;bottom:20px;font-size:9px;color:#8faab2}.cf-possibilities{padding:21px 25px}.cf-heading h3{font-size:23px;letter-spacing:-.5px;margin:4px 0}.cf-heading p{font-size:11px;color:#82919c}.cf-choices{display:flex;gap:18px;border-bottom:1px solid #ced9de;margin:16px 0 14px;font-size:11px;color:#7a8b97}.cf-choices span{padding-bottom:9px}.cf-choices .active{border-bottom:2px solid #188b83;color:#157b75;font-weight:650}.cf-surface{height:315px;background:white;border:1px solid #dbe4e8;border-radius:9px;padding:17px 20px;animation:cf-rise .35s}.cf-viewhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e7eded;padding-bottom:12px;margin-bottom:14px}.cf-viewhead h4{font-size:17px;margin-top:4px}.cf-viewhead small{font-size:8px}.cf-viewhead i{font-size:9px;font-style:normal;color:#708791}.cf-portal-grid{display:grid;grid-template-columns:1fr 145px;gap:25px}.cf-portal-grid h4{font-size:16px;margin:5px 0}.cf-portal-grid p{font-size:10px;color:#83949d;margin-bottom:10px}.cf-portal-grid aside{border-left:1px solid #e1e8eb;padding-left:16px}.cf-portal-grid aside b{font-size:11px;display:block;margin:8px 0 18px}.cf-portal-grid aside div{font-size:10px;padding:9px 0;border-bottom:1px solid #e8eeee}.cf-input{border:1px solid #cadbdd;border-radius:5px;background:#fbfdfd;padding:9px;min-height:47px;font-size:11px}.cf-file{font-size:10px;padding:10px 0;color:#7a8e98}.cf-file span{float:right;color:#26877d}.cf-button{display:inline-block;background:#198581;color:white;font-size:10px;padding:8px 12px;border-radius:5px}.cf-confirm,.cf-quote-sent{font-size:10px;color:#238379;display:inline-block;margin-left:10px}.cf-quote-summary{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.cf-quote-summary span{font-size:9px;color:#81969f}.cf-line,.cf-total{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #e7eded;font-size:11px}.cf-total{font-size:14px;border:0}.cf-rule{display:flex;justify-content:space-between;font-size:9px;margin:4px 0 10px;color:#708993}.cf-rule b{color:#238379;font-weight:500}.cf-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:15px}.cf-metrics>div{border-bottom:1px solid #dde7e8;padding-bottom:9px}.cf-metrics b{display:block;font-size:23px;line-height:1.1}.cf-metrics small{font-size:9px}.cf-order{display:flex;justify-content:space-between;align-items:center}.cf-order b{display:block;font-size:12px}.cf-state{font-size:10px;color:#29867d}.cf-routing{display:flex;gap:14px;font-size:9px;color:#7e959c;margin:10px 0}.cf-assign{display:flex;justify-content:space-between;font-size:11px;padding:9px 0}.cf-assign b{font-weight:500;color:#21877d;border:1px solid #bad9d5;border-radius:4px;padding:3px 9px}.cf-assigned{font-size:11px;color:#21877d;margin-top:5px}.cf-assigned small{font-size:9px}.cf-connections{display:flex;gap:13px;font-size:9px;border-top:1px solid #e6eded;margin-top:12px;padding-top:10px}.cf-connections small{font-size:8px}.cf-range{font-size:10px;color:#7a8e97;margin-top:14px}.cf-range b{color:#456571}.custom-film figcaption{position:relative;display:flex;justify-content:space-between;gap:12px;padding:13px 17px;font-size:11px;line-height:1.45;color:#4d686f;min-height:44px}.custom-film figcaption small{font-size:9px;color:#96a0a5;align-self:center}.cf-progress{position:absolute;bottom:0;left:0;height:2px;background:#248f87}.cf-restart{position:absolute;top:9px;right:9px;z-index:12;width:29px;height:29px;border:1px solid #dce4e5;background:white;color:#257e79;border-radius:50%;font-size:19px;opacity:0;cursor:pointer}.custom-film:hover .cf-restart,.cf-restart:focus-visible{opacity:1}.cf-cursor{position:absolute;left:0;top:0;width:23px;height:29px;z-index:10;pointer-events:none;transition:transform .5s cubic-bezier(.22,.7,.3,1)}.cf-cursor svg{width:23px;height:29px}.cf-cursor i{position:absolute;left:-10px;top:-10px;width:28px;height:28px;border:2px solid #168580;border-radius:50%;opacity:0}.cf-click i{animation:cf-click .5s}.cf-typing:after{content:'';display:inline-block;height:12px;width:1px;background:#188980;animation:cf-caret .6s steps(1) infinite}.cf-fade-out{opacity:0}
.cf-mobile{height:700px}.cf-mobile .cf-top>span{display:none}.cf-mobile .cf-stage{display:block;height:639px}.cf-mobile .cf-base{padding:13px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.cf-mobile .cf-base h3,.cf-mobile .cf-base p,.cf-mobile .cf-base footer{display:none}.cf-mobile .cf-base>small{width:100%;font-size:10px}.cf-mobile .cf-base>div{padding:0;border:0;font-size:10px}.cf-mobile .cf-possibilities{padding:16px}.cf-mobile .cf-heading h3{font-size:22px}.cf-mobile .cf-choices{font-size:12px;gap:17px}.cf-mobile .cf-surface{height:340px;padding:16px}.cf-mobile .cf-portal-grid{grid-template-columns:1fr}.cf-mobile .cf-portal-grid aside{display:none}.cf-mobile .cf-input{min-height:63px;font-size:14px}.cf-mobile .cf-portal-grid p{font-size:12px}.cf-mobile .cf-button{font-size:12px}.cf-mobile .cf-viewhead i{display:none}.cf-mobile .cf-line{font-size:13px}.cf-mobile .cf-range{font-size:11px}.cf-mobile .cf-confirm,.cf-mobile .cf-quote-sent{display:block;margin:7px 0 0}.cf-mobile .cf-routing{gap:7px;font-size:9px}.cf-mobile .cf-connections{gap:9px}.cf-mobile .cf-order b{font-size:13px}
@media(max-width:600px){.custom-film figcaption{display:block;padding:11px 13px;min-height:66px}.custom-film figcaption small{display:block;margin-top:4px}}@media(hover:none){.cf-restart{opacity:.65}}@keyframes cf-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes cf-click{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}@keyframes cf-caret{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.cf-app *{animation:none!important;transition:none!important}.cf-cursor,.cf-progress{display:none}}

.cf-app .cf-base h3{color:#fff}.cf-ops .cf-viewhead{margin-bottom:10px;padding-bottom:9px}.cf-ops .cf-metrics{margin-bottom:10px}.cf-ops .cf-routing{margin:6px 0}.cf-ops .cf-assign{padding:5px 0}.cf-ops .cf-assigned{font-size:10px;margin-top:2px}.cf-ops .cf-connections{margin-top:7px;padding-top:6px}

/* A fourth possibility shows how an unfamiliar requirement becomes useful software. */
.cf-choices{gap:16px}.cf-tailored .cf-viewhead{padding-bottom:8px;margin-bottom:9px}.cf-tailored .cf-input{min-height:32px;padding:7px 9px;margin-top:4px}.cf-loan{margin-top:10px;animation:cf-rise .4s}.cf-loan-head,.cf-loan-record,.cf-loan-details{display:flex;justify-content:space-between;align-items:center;gap:12px}.cf-loan-head{font-size:12px;border-bottom:1px solid #e4ecec;padding-bottom:6px}.cf-loan-head>span{font-size:9px;color:#7d929a}.cf-loan-record{padding:8px 0}.cf-loan-record b{display:block;font-size:11px}.cf-loan-state{color:#21877d;font-size:10px}.cf-loan-details{font-size:9px;margin-bottom:9px;color:#789099}.cf-loan-details b{color:#334e58;font-weight:500;margin-left:5px}.cf-loan-confirm{font-size:9px;color:#21877d;display:inline-block;margin-left:9px}.cf-tailored .cf-tailored-note{font-size:9px;color:#748a93;margin-top:10px}.cf-mobile .cf-choices{gap:13px;font-size:11px}.cf-mobile .cf-tailored .cf-input{font-size:12px;min-height:36px}.cf-mobile .cf-loan-details{font-size:10px}.cf-mobile .cf-loan-confirm{display:block;margin:6px 0 0}.cf-mobile .cf-tailored .cf-tailored-note{font-size:10px;margin-top:8px}

.cf-ai-draft{font-size:10px;line-height:1.5;color:#246c68;border-left:2px solid #278f91;padding-left:9px;margin-bottom:9px;min-height:30px}.cf-quote .cf-viewhead{margin-bottom:8px;padding-bottom:8px}.cf-quote .cf-line{padding-block:5px}.cf-mobile .cf-ai-draft{font-size:11px;min-height:33px}.cf-mobile .cf-quote .cf-line{padding-block:5px}

/* Keep the draft and sent confirmation inside the same mobile surface. */
.cf-mobile .cf-quote .cf-quote-summary{margin-bottom:3px}.cf-mobile .cf-quote .cf-line{padding-block:3px}.cf-mobile .cf-quote .cf-total{padding-block:4px}.cf-mobile .cf-quote .cf-rule{margin-bottom:6px}.cf-mobile .cf-quote .cf-viewhead{padding-bottom:5px;margin-bottom:5px}
