/* Fading-stroke number cards (Session 101): shared by 261 (blue), 270 (dark), 271 (violet), 272 (teal). Prefix c-wsk.
   The card stroke is a 1px white ring on ::before: a vertical gradient makes it fade out downward, the ring comes from a mask (border box xor content box)
   and a clip-path cuts a gap in the top edge exactly where the two-digit number straddles it (rule 18.9, no colour patch). */
.c-wsk { --bg: #0b1d4a; --ink: #fff; --muted: #eef3ff; --num: #fff; --btn-bg: #fff; --btn-ink: #1e3a8a; --gap: 52px; --card: rgba(255, 255, 255, .07); --stroke: 255, 255, 255; --title: #fff; --icon: linear-gradient(135deg, #fff, #b7ccff);
  position: relative; isolation: isolate; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; letter-spacing: 0; overflow: clip; background: var(--bg); color: var(--ink); }
.c-wsk--blue { --bg: linear-gradient(160deg, #1d4ed8 0%, #0f2a66 100%); --muted: #f0f5ff; --btn-ink: #1e3a8a; }
.c-wsk--light { --bg: var(--zk-bg, radial-gradient(60% 38% at 88% 0%, rgba(37, 99, 235, .16), transparent 72%), radial-gradient(55% 38% at 6% 100%, rgba(37, 99, 235, .13), transparent 72%), #fff); --ink: var(--zk-text, #14202f); --muted: var(--zk-text-2, #44536a); --num: var(--zk-accent, #2563eb); --btn-bg: linear-gradient(135deg, var(--zk-btn-a, #2563eb), var(--zk-btn-b, #1d4ed8)); --btn-ink: var(--zk-on-btn, #fff); --card: var(--zk-card, #fff); --stroke: 37, 99, 235; --title: var(--zk-text, #14202f); --icon: linear-gradient(135deg, var(--zk-icon-a, #5b8def), var(--zk-icon-b, #1d4ed8)); }
.c-wsk--dark { --bg: #111; --muted: #e8e8ec; --num: #fa5b26; --btn-bg: #fa5b26; --btn-ink: #111; --card: rgba(255, 255, 255, .05); }
.c-wsk--violet { --bg: #2e1065; --muted: #f1eafe; --btn-ink: #4c1d95; --card: rgba(255, 255, 255, .08); }
.c-wsk--teal { --bg: #04242b; --muted: #eaf8f5; --num: #5eead4; --btn-bg: #5eead4; --btn-ink: #04242b; --card: rgba(255, 255, 255, .06); }
.c-wsk :where(h2, h3, ul, li, p) { margin: 0; padding: 0; list-style: none; }
.c-wsk__sec { display: flex; flex-direction: column; align-items: center; padding: 56px 20px 64px; }
.c-wsk__h { font-size: clamp(28px, 7.4vw, 36px); line-height: 1.18; text-align: center; text-wrap: balance; color: var(--title); }
.c-wsk__thin { font-weight: 300; }
.c-wsk__bold { font-weight: 900; }
.c-wsk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px 20px; width: min(1160px, 100%); margin-top: 64px; }
.c-wsk__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 58px 24px 34px; border-radius: 26px; background: var(--card); }
.c-wsk__card::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--stroke), .95) 0%, rgba(var(--stroke), .5) 38%, rgba(var(--stroke), 0) 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  clip-path: polygon(0 0, calc(50% - var(--gap)) 0, calc(50% - var(--gap)) 14px, calc(50% + var(--gap)) 14px, calc(50% + var(--gap)) 0, 100% 0, 100% 100%, 0 100%); }
.c-wsk__n { position: absolute; top: 0; right: 50%; transform: translate(50%, -50%); font-family: "Poppins", sans-serif; font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -.02em; color: var(--num); }
.c-wsk__ic { display: block; width: 64px; height: 64px; margin: 6px auto 0; background: var(--icon); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.c-wsk__t { margin-top: 16px; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--title); }
.c-wsk__ic + .c-wsk__t { margin-top: 20px; }
.c-wsk__p { margin-top: 8px; font-size: 18px; line-height: 1.55; color: var(--muted); }
.c-wsk--light .c-wsk__p + .c-wsk__ic { margin: 28px auto 0; }
.c-wsk--light .c-wsk__n + .c-wsk__t { margin-top: 4px; }
.c-wsk--light .c-wsk__card { box-shadow: var(--zk-shadow, 0 8px 24px rgba(37, 99, 235, .12), 0 1px 3px rgba(37, 99, 235, .10)); }
.c-wsk--light .c-wsk__btn { box-shadow: 0 10px 28px var(--zk-glow, rgba(29, 78, 216, .32)), inset 0 1px 0 rgba(255, 255, 255, .22); }
.c-wsk--light .c-wsk__btn:focus-visible { outline-color: var(--zk-focus, #14202f); }
.c-wsk__btn { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; margin-top: 56px; padding: 18px 48px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: 19px; font-weight: 900; line-height: 1.3; text-align: center; text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); transition: transform .2s; }
.c-wsk__btn:hover { transform: translateY(-2px); }
.c-wsk__btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.c-wsk--c2 .c-wsk__card { align-items: flex-start; text-align: start; }
@media (min-width: 700px) { .c-wsk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 24px; } }
@media (min-width: 1100px) {
  .c-wsk { --gap: 64px; }
  .c-wsk__sec { padding: 104px 32px 112px; }
  .c-wsk__h { font-size: clamp(38px, 3.3vw, 52px); }
  .c-wsk__grid { gap: 72px 28px; margin-top: 88px; }
  .c-wsk--c3 .c-wsk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-wsk--c4 .c-wsk__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 72px 22px; }
  .c-wsk--c2 .c-wsk__grid { width: min(980px, 100%); }
  .c-wsk__card { padding: 64px 32px 42px; border-radius: 30px; }
  .c-wsk--c4 .c-wsk__card { padding: 64px 24px 40px; }
  .c-wsk__n { font-size: 72px; }
  .c-wsk__ic { width: 72px; height: 72px; }
  .c-wsk__t { font-size: 24px; }
  .c-wsk__p { font-size: 20px; }
  .c-wsk__btn { margin-top: 72px; padding: 22px 72px; font-size: 22px; }
}

.c-wsk--light .c-wsk__card::before { background: linear-gradient(180deg, var(--zk-line-a, rgba(37, 99, 235, .95)) 0%, var(--zk-line-m, rgba(37, 99, 235, .5)) 38%, var(--zk-line-c, rgba(37, 99, 235, 0)) 88%); }
