.pl-anim{--navy:#315074;--navy-d:#1e2f4a;--green-d:#2f7d55;--mint:#e8f6ee;--blue:#1d53c5;--line:#e5ecf4;--ink:#111827;--body:#374151;--muted:#6b7280;
  position:relative;width:100%;max-width:440px;aspect-ratio:440/540;margin:0 auto;font-family:Rubik,ui-sans-serif,system-ui,sans-serif}
.pl-stage{position:absolute;top:0;left:0;width:440px;height:540px;transform-origin:0 0;transform:scale(var(--pl-s,1))}
.pl-stage *{box-sizing:border-box}
.pl-blob{position:absolute;left:140px;top:110px;width:300px;height:300px;border-radius:50%;background:var(--mint)}

/* connection trail between practice and patient */
.pl-trail{position:absolute;left:0;top:0;width:440px;height:540px;overflow:visible}
.pl-trail .base{fill:none;stroke:#c6d5e5;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.pl-trail .pulse{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:16 120;stroke-dashoffset:16;opacity:0}
.pl-trail .out{stroke:var(--navy)}
.pl-trail .back{stroke:#56bd88}
.pl-anim[data-pulse="out"] .out{animation:pl-out .75s ease-in-out forwards}
.pl-anim[data-pulse="back"] .back{animation:pl-back .75s ease-in-out forwards}
@keyframes pl-out{0%{opacity:1;stroke-dashoffset:16}90%{opacity:1}100%{opacity:0;stroke-dashoffset:-100}}
@keyframes pl-back{0%{opacity:1;stroke-dashoffset:-100}90%{opacity:1}100%{opacity:0;stroke-dashoffset:16}}

/* phone */
.pl-phone{position:absolute;left:162px;top:8px;width:262px;height:524px;border-radius:40px;background:var(--navy-d);padding:9px;box-shadow:0 30px 60px -24px rgba(30,47,74,.45)}
.pl-phone.buzz{animation:pl-buzz .36s ease-in-out}
@keyframes pl-buzz{20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.pl-screen{position:relative;width:100%;height:100%;border-radius:31px;background:#f7f9fb;overflow:hidden}
.pl-island{position:absolute;top:10px;left:50%;width:78px;height:22px;margin-left:-39px;border-radius:12px;background:var(--navy-d);z-index:4}
.pl-status{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;font-weight:600;color:var(--ink);z-index:3}
.pl-bat{position:relative;width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px}
.pl-bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:var(--ink);border-radius:1px}
.pl-view{position:absolute;top:42px;left:0;right:0;bottom:0;padding:8px 16px 18px;opacity:0;transform:translateX(18px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pl-anim[data-view="msgs"] .pl-msgs,
.pl-anim[data-view="checkout"] .pl-checkout,
.pl-anim[data-view="paid"] .pl-paid{opacity:1;transform:none}

/* view: text message */
.pl-thread{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 14px;border-bottom:1px solid var(--line)}
.pl-avatar{width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--green-d);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.pl-thread strong{font-size:13px;font-weight:600;color:var(--ink)}
.pl-when{font-size:11px;color:var(--muted);text-align:center;margin:14px 0 10px}
.pl-bubble{max-width:198px;background:#e9eef4;color:var(--ink);font-size:13px;line-height:1.42;padding:11px 13px;border-radius:18px 18px 18px 6px;opacity:0;transform:translateY(12px) scale(.96);transform-origin:0 100%;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.2)}
.pl-anim[data-bubble] .pl-bubble{opacity:1;transform:none}
.pl-link{display:inline-block;margin-top:6px;color:var(--blue);text-decoration:underline;text-underline-offset:2px;font-weight:500}

/* view: checkout */
.pl-brand{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pl-brand .pl-avatar{width:32px;height:32px;font-size:12px}
.pl-brand strong{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.pl-brand span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:2px}
.pl-brand svg{width:10px;height:10px}
.pl-lines{margin-top:12px;font-size:12.5px;color:var(--body)}
.pl-lines div{display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.pl-due{margin-top:8px;padding-top:10px;border-top:1px dashed #d1d5db;display:flex;justify-content:space-between;align-items:baseline}
.pl-due span{font-size:12px;color:var(--muted)}
.pl-due strong{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pl-methods{margin-top:14px;display:grid;gap:7px}
.pl-method{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--body);background:#fff}
.pl-method i{width:14px;height:14px;border-radius:50%;border:1.5px solid #9ca3af;flex:none}
.pl-method.is-on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.pl-method.is-on i{border:4px solid var(--navy)}
.pl-paybtn{position:absolute;left:16px;right:16px;bottom:18px;height:44px;border-radius:12px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center}
.pl-paybtn .lbl{transition:opacity .2s}
.pl-anim[data-paying] .pl-paybtn .lbl{opacity:0}
.pl-spin{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0}
.pl-anim[data-paying] .pl-spin{opacity:1;animation:pl-spin .7s linear infinite}
@keyframes pl-spin{to{transform:rotate(360deg)}}

/* view: paid */
.pl-paid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:60px}
.pl-check{width:72px;height:72px}
.pl-check circle{fill:var(--mint)}
.pl-check path{fill:none;stroke:var(--green-d);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.pl-anim[data-view="paid"] .pl-check path{stroke-dashoffset:0;transition:stroke-dashoffset .5s .2s ease}
.pl-paid strong{margin-top:16px;font-size:18px;font-weight:600;color:var(--ink)}
.pl-paid .amt{margin-top:6px;font-size:13px;color:var(--body);max-width:190px;line-height:1.4}
.pl-paid .note{margin-top:18px;font-size:11.5px;color:var(--muted);padding:6px 11px;border-radius:999px;background:#fff;border:1px solid var(--line)}

/* tap indicator */
.pl-tap{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(49,80,116,.24);opacity:0;pointer-events:none;z-index:10}
.pl-tap.go{animation:pl-tap .55s ease-out}
@keyframes pl-tap{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
.pl-anim .is-press{animation:pl-press .3s ease}
@keyframes pl-press{50%{transform:scale(.95)}}

/* practice ledger card */
.pl-ledger{position:absolute;left:0;top:344px;width:256px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px;box-shadow:0 24px 48px -20px rgba(30,47,74,.35);z-index:5}
.pl-ledger.flash{animation:pl-flash .9s ease-out}
@keyframes pl-flash{0%{box-shadow:0 0 0 0 rgba(86,189,136,.55),0 24px 48px -20px rgba(30,47,74,.35)}100%{box-shadow:0 0 0 16px rgba(86,189,136,0),0 24px 48px -20px rgba(30,47,74,.35)}}
.pl-lh{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:12px}
.pl-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;transition:opacity .3s}
.pl-ledger.swapping .pl-row{opacity:0}
.pl-row strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.pl-row small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.pl-amt{text-align:right}
.pl-amt b{display:block;font-size:17px;font-weight:700;color:var(--ink);transition:color .3s}
.pl-anim[data-chip="paid"] .pl-amt b{color:var(--green-d)}
.pl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.pl-send{height:30px;padding:0 12px;border-radius:6px;background:var(--navy);color:#fff;font-size:12px;font-weight:500;display:inline-flex;align-items:center;transition:opacity .3s}
.pl-anim[data-sent] .pl-send{opacity:.35}
.pl-chip{height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;color:#4b5563;transition:background .3s,color .3s}
.pl-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pl-anim[data-chip="sent"] .pl-chip{background:#eaf1fd;color:var(--blue)}
.pl-anim[data-chip="opened"] .pl-chip{background:#fef3e2;color:#a3580b}
.pl-anim[data-chip="paid"] .pl-chip{background:var(--mint);color:var(--green-d)}

.pl-anim.pl-static *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.pl-anim *{transition:none!important;animation:none!important}}