/* Rounded pencil calls to action, with a single flat colour. */
.pill{position:relative;isolation:isolate;background:transparent;border-radius:32px;padding:17px 55px 17px 35px;gap:22px;min-height:58px;max-width:100%;line-height:1.45;transition:transform .25s ease;color:#fff}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:32px;background:var(--ink);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%);transition:background .25s ease}
.pill::after{content:"";position:absolute;inset:0;border-radius:32px;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%);background:linear-gradient(90deg,transparent 23px,#ffffff65 23px 24px,transparent 24px calc(100% - 35px),#ffffff65 calc(100% - 35px) calc(100% - 34px),transparent calc(100% - 34px));pointer-events:none}
.pill:hover,.pill:focus-visible{background:transparent;color:#fff}.pill:hover{transform:translateY(-3px)}.pill:hover::before,.pill:focus-visible::before{background:var(--purple)}.pill:focus-visible{outline:2px solid var(--purple);outline-offset:6px}.pill span{font-size:22px;flex-shrink:0}
@media(max-width:420px){.pill{padding:16px 45px 16px 32px;gap:14px;font-size:13px}}
body.no-motion .pill,body.no-motion .pill::before{transition:none}.no-motion .pill:hover{transform:none}@media(prefers-reduced-motion:reduce){.pill,.pill::before{transition:none}.pill:hover{transform:none}}

.pill .pencil-point{position:absolute;right:0;top:50%;transform:translateY(-50%);width:14px;height:24px;overflow:visible;pointer-events:none}.pencil-point path{fill:#fff;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round;transition:stroke .25s ease}.pill:hover .pencil-point path,.pill:focus-visible .pencil-point path{stroke:var(--purple)}body.no-motion .pencil-point path{transition:none}@media(prefers-reduced-motion:reduce){.pencil-point path{transition:none}}