#ws-transform{--paper:#faf7f1;--ink:#102336;--rust:#b34416;color:var(--ink);padding:0;font-family:Fraunces,Georgia,serif}#ws-transform *{box-sizing:border-box}#ws-transform .machine{background:#181a1c;border-radius:20px 20px 5px 5px;margin:0 16px;padding:17px 14px 13px;box-shadow:0 18px 35px #0002}#ws-transform .screen{background:var(--paper);height:450px;position:relative;overflow:hidden}#ws-transform .base{background:linear-gradient(#c6c9cc,#8a8e92);border-radius:0 0 50% 50%;height:15px;margin:0 0 24px;box-shadow:0 8px 10px #0002}#ws-transform header{background:#fff;justify-content:space-between;align-items:center;height:76px;padding:20px 10%;transition:all 1.3s;display:flex}#ws-transform .logo{letter-spacing:3px;font-size:17px;font-weight:600}#ws-transform .nav{color:#475569;font-size:11px}#ws-transform .oldnav{color:#fff;text-align:center;background:#153553;padding:12px;font-size:12px;transition:all 1s}#ws-transform .hero{height:125px;margin:0 10%;transition:all 1.5s;position:relative;overflow:hidden}#ws-transform .photo{object-fit:cover;object-position:center;width:100%;height:100%;transition:all 1.5s}#ws-transform .message{background:linear-gradient(90deg,#faf7f1 78%,#faf7f100);width:57%;padding:22px 25px;transition:transform 1.4s;position:absolute;inset:0 auto 0 0;transform:translate(-105%)}#ws-transform .eyebrow{color:var(--rust);letter-spacing:2px;font-size:9px}#ws-transform h2{margin:13px 0;font:500 31px/1.08 Fraunces,Georgia,serif}#ws-transform .message p{max-width:235px;margin:0 0 15px;font:12px/1.5 Fraunces,Georgia,serif}#ws-transform .cta{background:var(--rust);color:#fff;padding:11px 13px;font-size:10px;display:inline-block}#ws-transform .oldcopy{max-width:70%;margin:22px 13%;transition:all 1s}#ws-transform .oldcopy h3{color:#153553;margin:0 0 12px;font-size:21px}#ws-transform .oldcopy p{color:#526070;margin:0;font-size:12px;line-height:1.7}#ws-transform .oldcopy a{margin-top:14px;font-size:11px;text-decoration:underline;display:block}#ws-transform .benefits{background:var(--paper);grid-template-columns:repeat(3,1fr);gap:17px;padding:19px 22px;transition:transform 1.5s;display:grid;position:absolute;bottom:0;left:0;right:0;transform:translateY(120%)}#ws-transform .benefit{opacity:0;border-left:1px solid #d9d4cb;padding-left:13px;transition:all .8s;transform:translateY(25px)}#ws-transform .benefit strong{margin-bottom:6px;font:500 15px Fraunces,Georgia,serif;display:block}#ws-transform .benefit span{color:#56606a;font-size:10px;line-height:1.5;display:block}#ws-transform .controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}#ws-transform button{font:inherit;color:#153553;background:#fff;border:1px solid #b6bdc4;border-radius:5px;min-height:44px;padding:10px 17px;font-size:13px}#ws-transform .status{color:#475569;text-align:center;min-width:210px;font-size:13px}#ws-transform[data-step="1"] .oldcopy{outline-offset:8px;outline:2px solid #c98948}#ws-transform[data-step="2"] header,#ws-transform[data-step="3"] header,#ws-transform[data-step="4"] header{height:58px;padding:15px 5%}#ws-transform[data-step="2"] .oldnav,#ws-transform[data-step="3"] .oldnav,#ws-transform[data-step="4"] .oldnav{opacity:0;margin-top:-38px}#ws-transform[data-step="2"] .hero,#ws-transform[data-step="3"] .hero,#ws-transform[data-step="4"] .hero{height:295px;margin:0}#ws-transform[data-step="2"] .message,#ws-transform[data-step="3"] .message,#ws-transform[data-step="4"] .message{transform:translate(0)}#ws-transform[data-step="2"] .photo,#ws-transform[data-step="3"] .photo,#ws-transform[data-step="4"] .photo{width:65%;margin-left:35%}#ws-transform[data-step="2"] .oldcopy,#ws-transform[data-step="3"] .oldcopy,#ws-transform[data-step="4"] .oldcopy{opacity:0;transform:translateY(25px)}#ws-transform[data-step="3"] .benefits,#ws-transform[data-step="4"] .benefits{transform:translateY(0)}#ws-transform[data-step="3"] .benefit,#ws-transform[data-step="4"] .benefit{opacity:1;transform:translateY(0)}#ws-transform .benefit:nth-child(2){transition-delay:.25s}#ws-transform .benefit:nth-child(3){transition-delay:.5s}#ws-transform .cta{opacity:0;transition:opacity 1s}#ws-transform[data-step="4"] .cta{opacity:1}@media (width<=500px){#ws-transform .machine{margin:0 5px;padding:10px 7px}#ws-transform .screen{height:490px}#ws-transform .nav{display:none}#ws-transform .logo{font-size:14px}#ws-transform .message{width:72%;padding:25px 15px}#ws-transform h2{font-size:27px}#ws-transform .benefits{gap:6px;padding:14px 10px}#ws-transform .benefit{padding-left:7px}#ws-transform .benefit strong{font-size:12px}#ws-transform .benefit span{font-size:10px}#ws-transform .oldcopy h3{font-size:18px}}@media (prefers-reduced-motion:reduce){#ws-transform *{transition:none!important}}#ws-transform{width:100%;min-width:0;max-width:960px;margin:0 auto;position:relative}#ws-transform .visual{pointer-events:none;user-select:none}#ws-transform .hero{padding:0}#ws-transform .eyebrow{text-transform:none;margin:0;font-weight:400}#ws-transform header{border:0;position:static}#ws-transform h2,#ws-transform h3{letter-spacing:normal;padding:0;transform:none}#ws-transform .nav{display:block}#ws-transform .browser{color:#384046;background:#e4e3df;align-items:center;gap:16px;height:30px;padding:0 12px;font:11px/1.2 Fraunces,Georgia,serif;display:flex}#ws-transform .browser-dots{color:#838a8c;white-space:nowrap;font-size:8px}#ws-transform .browser-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#ws-transform .annotation{text-align:center;color:#173d17;max-width:540px;min-height:58px;margin:12px auto;font-size:18px;line-height:1.5}#ws-transform[data-note=title] .browser-title,#ws-transform[data-note=heading] h2,#ws-transform[data-note=image] .photo,#ws-transform[data-note=benefits] .benefits,#ws-transform[data-note=button] .cta{outline-offset:-3px;outline:3px solid #00a000}#ws-transform[data-note=heading] .annotation{text-align:left;margin-left:6%}#ws-transform[data-note=image] .annotation{text-align:right;margin-right:6%}#ws-transform .controls button{font:inherit;color:#292929;cursor:pointer;background:#fffaf1;border:1px solid #938b7f;font-size:15px}#ws-transform .controls button:hover{color:#fff;background:#000}#ws-transform .controls button:focus-visible{outline-offset:3px;outline:3px solid green}#ws-transform [hidden]{display:none!important}#ws-transform .demo-caption{text-align:center;color:#59544d;margin:18px 0 0;font-size:13px;line-height:1.5}#ws-transform .transform-description{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=600px){#ws-transform .annotation{font-size:16px;text-align:center!important;margin:12px auto!important}#ws-transform .screen{height:470px}#ws-transform .nav{display:none}#ws-transform .message{width:72%}#ws-transform .browser{gap:8px;font-size:9px}}@media (prefers-reduced-motion:reduce){#ws-transform *{transition:none!important;animation:none!important}}@media (width>=601px){#ws-transform{position:relative}#ws-transform .annotation{z-index:5;color:#173d17;pointer-events:none;background:#fffaf1;border:1px solid green;border-radius:8px;width:245px;max-width:70%;min-height:0;padding:14px 18px;font-size:16px;line-height:1.4;position:absolute;top:110px;left:8%;right:auto;box-shadow:0 8px 24px #0002;text-align:left!important;margin:0!important}#ws-transform .annotation:empty{visibility:hidden}#ws-transform .annotation:after{content:"";background:#fffaf1;border-bottom:1px solid green;border-right:1px solid green;width:14px;height:14px;position:absolute;bottom:-8px;left:28px;transform:rotate(45deg)}#ws-transform[data-note=title] .annotation{top:65px;left:12%}#ws-transform[data-note=title] .annotation:after{top:-8px;bottom:auto;transform:rotate(225deg)}#ws-transform[data-note=heading] .annotation{top:260px;left:8%}#ws-transform[data-note=heading] .annotation:after{top:-8px;bottom:auto;transform:rotate(225deg)}#ws-transform[data-note=image] .annotation{top:290px;left:auto;right:7%}#ws-transform[data-note=image] .annotation:after{inset:-8px 28px auto auto;transform:rotate(225deg)}#ws-transform[data-note=benefits] .annotation{top:320px;left:15%}#ws-transform[data-note=button] .annotation{top:310px;left:8%}#ws-transform[data-note=button] .annotation:after{top:-8px;bottom:auto;transform:rotate(225deg)}#ws-transform .controls{margin-top:28px}}
