.fg-signature {
    width: 28px;
    height: 28px;
    margin-left: 8px;
    display: inline-flex;
    flex: 0 0 28px;
    opacity: .3;
    filter: grayscale(1);
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}

.fg-signature svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fg-signature__disc { fill: #fffaf0; }
.fg-signature__ring {
    fill: none;
    stroke: #f26b4a;
    stroke-width: 3;
    stroke-dasharray: 74 26;
    transform-origin: 32px 32px;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.fg-signature__glyph {
    fill: #173f3a;
    transform-origin: 32px 32px;
    transition: transform .35s ease;
}
.fg-signature:hover,
.fg-signature:focus-visible {
    opacity: .88;
    filter: none;
    transform: translateY(-1px);
}
.fg-signature:hover .fg-signature__ring,
.fg-signature:focus-visible .fg-signature__ring { transform: rotate(44deg); }
.fg-signature:hover .fg-signature__glyph,
.fg-signature:focus-visible .fg-signature__glyph { transform: scale(1.035); }
.fg-signature:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 4px;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .fg-signature:hover .fg-signature__ring,
    .fg-signature:focus-visible .fg-signature__ring,
    .fg-signature:hover .fg-signature__glyph,
    .fg-signature:focus-visible .fg-signature__glyph { transform: none; }
}