.js{--js-navy:#0b1f3a;--js-slate:#5b6b7f;--js-line:#dde3ea;--js-teal:#0e9bae;--js-teal-ink:#0a6f7d;--js-teal-tint:#e3f6f8;--js-green:#13744e;--js-green-tint:#e3f4ec;--js-loop:5.5s;color:var(--js-navy);background:#f3f5f8;border-radius:22px;max-width:1000px;margin-inline:auto;position:relative;container-type:inline-size}.js-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:clamp(1.25rem,5cqi,3rem);padding:clamp(1.25rem,4.5cqi,2.75rem);font-size:clamp(.9rem,1.6cqi,1.02rem);display:grid}.js-phone{background:var(--js-navy);border-radius:2.2em;justify-self:center;width:100%;max-width:19em;padding:.6em}.js-screen{background:#fff;border-radius:1.7em;gap:.7em;padding:1.2em 1em 1em;display:grid;position:relative}.js-job{gap:.1em;margin:0 0 .1em;display:grid}.js-job span{color:var(--js-slate);font-size:.85em}.js-job b{letter-spacing:-.01em;font-size:1.1em}.js-step{border:1px solid var(--js-line);border-radius:12px;gap:.45em;padding:.65em .75em;display:grid}.js-step-head{color:var(--js-teal-ink);align-items:center;gap:.35em;margin:0;font-size:.82em;font-weight:700;display:flex}.js-thumbs{gap:.4em;display:flex}.js-thumbs i{aspect-ratio:4/3;background:#dde6f0;border-radius:6px;flex:1;display:block}.js-thumbs i:nth-child(2){background:#ccd8e5}.js-thumbs i:nth-child(3){background:#e6edf5}.js-quote ul{gap:.25em;margin:0;padding:0;list-style:none;display:grid}.js-quote li{justify-content:space-between;font-size:.9em;display:flex}.js-quote li span{color:var(--js-slate)}.js-quote li b{font-variant-numeric:tabular-nums}.js-quote .js-total{border-top:1px solid var(--js-line);padding-top:.25em;font-size:1em}.js-quote .js-total span{color:var(--js-navy);font-weight:700}.js-signature{width:100%;height:2em;display:block}.js-signature path{fill:none;stroke:var(--js-navy);stroke-linecap:round;stroke-width:2.2px}.js-paid{background:var(--js-green-tint);border:2px solid var(--js-green);color:var(--js-green);border-radius:999px;justify-content:center;align-items:center;gap:.35em;margin:.1em 0 0;padding:.4em .7em;font-size:.88em;font-weight:700;display:flex}.js-office{background:var(--js-navy);color:#fff;border-radius:16px;gap:.75em;padding:1.2em 1.25em;display:grid}.js-label{color:#3dd6e8;letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.85em;font-weight:700}.js-board{gap:.55em;margin:0;padding:0;list-style:none;display:grid}.js-board li{background:#ffffff12;border-left:3px solid #3dd6e8;border-radius:8px;gap:.15em;padding:.6em .75em;display:grid}.js-board li span{color:#9fb0c4;align-items:center;gap:.35em;font-size:.9em;display:flex}.js-board .js-done{border-left-color:#43c38b}.js-board .js-done span{color:#8ee0b9}.js-zero{color:#9fb0c4;margin:0;font-size:.9em}.js-pause{border:1px solid var(--js-line);color:var(--js-navy);cursor:pointer;z-index:2;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:inline-flex;position:absolute;top:10px;right:10px}.js-pause:hover{background:var(--js-navy);color:#fff}.js-pause span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (hover:hover){.js-pause{opacity:0}.js:hover .js-pause,.js:focus-within .js-pause{opacity:1}}@container (max-width:620px){.js-stage{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1rem}.js-phone{max-width:16em}}@media (prefers-reduced-motion:no-preference){.js-pause{transition:opacity .18s,background .18s}.js[data-play] .js-thumbs i:first-child{animation:js-p1 var(--js-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.js[data-play] .js-thumbs i:nth-child(2){animation:js-p2 var(--js-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.js[data-play] .js-thumbs i:nth-child(3){animation:js-p3 var(--js-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.js[data-play] .js-quote li{animation:js-quote var(--js-loop) ease .94 forwards}.js[data-play] .js-quote .js-total{animation-name:js-total}.js[data-play] .js-signature{animation:js-sign var(--js-loop) ease-out .94 forwards;transform-origin:0}.js[data-play] .js-paid{animation:js-paid var(--js-loop) cubic-bezier(.16, 1, .3, 1) .94 forwards}.js[data-play] .js-done{animation:js-done var(--js-loop) ease .94 forwards}.js[data-play] .js-hours{animation:js-hours var(--js-loop) ease .94 forwards}.js[data-play] .js-zero{animation:js-zero var(--js-loop) ease .94 forwards}.js[data-paused] *{animation-play-state:paused!important}}@keyframes js-p1{0%,2%{opacity:0;transform:scale(.6)}6%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-p2{0%,6%{opacity:0;transform:scale(.6)}10%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-p3{0%,10%{opacity:0;transform:scale(.6)}14%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-quote{0%,16%{opacity:0;transform:translateY(4px)}22%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-total{0%,24%{opacity:0;transform:translateY(4px)}30%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-sign{0%,34%{opacity:0;transform:scaleX(0)}44%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-paid{0%,46%{opacity:0;transform:scale(1.2)}52%,95%{opacity:1;transform:none}to{opacity:0}}@keyframes js-done{0%,52%{opacity:.35;transform:translate(8px)}58%,95%{opacity:1;transform:none}to{opacity:.35}}@keyframes js-hours{0%,58%{opacity:0}63%,95%{opacity:1}to{opacity:0}}@keyframes js-zero{0%,62%{opacity:0}67%,95%{opacity:1}to{opacity:0}}