/* WINGED PILL CTA, reusable component (Liav, Session 102; geometry measured from his reference; wings made thinner and a touch smaller on his request).
   Markup: <a class="c-wing" href="#"><span>label</span><i class="c-wing__arr" aria-hidden="true"></i></a>
   Colours via custom properties on the button or its section: --wing-a / --wing-b (ONE gradient, 135deg, used by the body AND by both wings: wings always have exactly the body colour and gradient), --wing-glow (shadow rgba). Defaults = house blue. Wings are transparent-gap crescents (svg mask), so it works on any background. */
.c-wing { --bh: 54px; --wo: calc(var(--bh) * .18); box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: calc(100% - 72px); max-width: 520px; min-height: var(--bh); padding: 8px 24px; white-space: nowrap; border-radius: 999px; background: linear-gradient(135deg, var(--wing-a, #3b6cf0) 0%, var(--wing-b, #1d3fa8) 100%); color: #fff; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 700; font-size: clamp(17px, 4.6vw, 23px); line-height: 1.2; text-decoration: none; box-shadow: 0 10px 28px var(--wing-glow, rgba(29, 63, 168, .38)), inset 0 1px 0 rgba(255, 255, 255, .24); }
.c-wing::before, .c-wing::after { content: ''; position: absolute; top: 0; width: calc(var(--bh) * .333); height: var(--bh); background: linear-gradient(135deg, var(--wing-a, #3b6cf0) 0%, var(--wing-b, #1d3fa8) 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 58.5' preserveAspectRatio='none'%3E%3Cpath d='M19.5 0A31.7 31.7 0 0 0 19.5 58.5A38.8 38.8 0 0 1 19.5 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 58.5' preserveAspectRatio='none'%3E%3Cpath d='M19.5 0A31.7 31.7 0 0 0 19.5 58.5A38.8 38.8 0 0 1 19.5 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.c-wing::before { left: calc(var(--wo) * -1); }
.c-wing::after { right: calc(var(--wo) * -1); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 58.5' preserveAspectRatio='none'%3E%3Cpath d='M0 0A31.7 31.7 0 0 1 0 58.5A38.8 38.8 0 0 0 0 0Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.5 58.5' preserveAspectRatio='none'%3E%3Cpath d='M0 0A31.7 31.7 0 0 1 0 58.5A38.8 38.8 0 0 0 0 0Z'/%3E%3C/svg%3E"); }
.c-wing:hover { filter: brightness(1.1); }
.c-wing:focus-visible { outline: 3px solid var(--wing-b, #1d3fa8); outline-offset: 10px; }
.c-wing__arr { flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; }
@media (min-width: 900px) { .c-wing { --bh: 58px; width: auto; padding: 8px 72px; font-size: 22px; } }