/* 205-207 how it works (new): three styles, three palettes. Prefixes c-hwa, c-hwb, c-hwc. House type scale (3a). */
/* 205 A: white page, ink #14202f, brand blue #2563eb (white on blue 5.2:1, blue on white 5.2:1), body #44536a (7.6:1) */
.c-hwa { position: relative; isolation: isolate; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; letter-spacing: 0; overflow: clip; background: var(--zk-bg, #fff); color: var(--zk-text, #14202f); }
.c-hwa :where(h2, h3, ol, li, p) { margin: 0; padding: 0; list-style: none; }
.c-hwa .n { font-family: "Poppins", sans-serif; font-weight: 900; }
.c-hwa::before { content: ""; position: absolute; z-index: -1; top: 120px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: var(--zk-glow-blob, rgba(37, 99, 235, .12)); filter: blur(70px); }
.c-hwa__sec { padding: 56px 20px 64px; }
.c-hwa__h { margin: 0 auto 36px; max-width: 900px; font-size: clamp(28px, 7.4vw, 36px); font-weight: 900; line-height: 1.18; text-align: center; text-wrap: balance; }
.c-hwa__acc { color: var(--zk-text, #2563eb); background: linear-gradient(180deg, transparent 62%, var(--zk-mark, rgba(37, 99, 235, .2)) 62% 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.c-hwa__list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 76px; width: min(1160px, 100%); margin-inline: auto; }
.c-hwa__item { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px 32px; border-radius: 24px; background: var(--zk-card, #fff); box-shadow: var(--zk-shadow, 0 8px 24px rgba(20, 60, 140, .12), 0 1px 3px rgba(20, 60, 140, .10)); }
.c-hwa__item:not(:last-child)::after { content: ""; position: absolute; top: calc(100% + 9px); right: 50%; height: 30px; border-inline-start: 2px dashed var(--zk-line-a, rgba(37, 99, 235, .45)); }
.c-hwa__num { position: absolute; top: 0; right: 50%; transform: translate(50%, -50%); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--zk-btn-b, #2563eb); color: var(--zk-on-btn, #fff); font-size: 28px; line-height: 1; box-shadow: 0 6px 16px var(--zk-glow, rgba(37, 99, 235, .35)); }
.c-hwa__t { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--zk-text, #14202f); }
.c-hwa__p { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--zk-text-2, #44536a); }
@media (min-width: 900px) {
  .c-hwa__sec { padding: 96px 32px 104px; }
  .c-hwa__h { margin-bottom: 76px; font-size: clamp(38px, 3.3vw, 52px); }
  .c-hwa__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .c-hwa__item { padding: 60px 32px 40px; }
  .c-hwa__item:not(:last-child)::after { top: 50%; right: auto; left: -32px; width: 24px; height: 0; border-inline-start: 0; border-top: 2px dashed var(--zk-line-a, rgba(37, 99, 235, .45)); }
  .c-hwa__num { width: 72px; height: 72px; font-size: 34px; }
  .c-hwa__t { font-size: 26px; }
  .c-hwa__p { font-size: 20px; }
}

/* 206 B: white strips + band #1f2024 -> #121316, text #fff (16:1), body #cbd5e1 (10:1), accent #7aa8ff (7.6:1 on band), border fades from #2563eb */
.c-hwb { position: relative; isolation: isolate; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; letter-spacing: 0; overflow: clip; background: #fff; color: #fff; }
.c-hwb :where(h2, h3, ol, li, p) { margin: 0; padding: 0; list-style: none; }
.c-hwb .n { font-family: "Poppins", sans-serif; font-weight: 900; }
.c-hwb__sec { padding: 32px 0; }
.c-hwb__band { position: relative; isolation: isolate; box-sizing: border-box; width: 100%; padding: 56px 20px 64px; border-radius: clamp(28px, 3vw, 48px); background: radial-gradient(70% 60% at 50% 0%, rgba(37, 99, 235, .28), transparent 70%), linear-gradient(#1f2024, #121316); }
.c-hwb__h { margin: 0 auto 36px; max-width: 900px; font-size: clamp(28px, 7.4vw, 36px); font-weight: 900; line-height: 1.18; text-align: center; text-wrap: balance; color: #fff; }
.c-hwb__acc { color: #7aa8ff; }
.c-hwb__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: min(1160px, 100%); margin-inline: auto; }
.c-hwb__item { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px 36px; border: 1px solid transparent; border-radius: 24px; background: linear-gradient(#17181c, #17181c) padding-box, linear-gradient(180deg, #2563eb, rgba(37, 99, 235, 0) 75%) border-box; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.c-hwb__ic { display: block; width: 64px; height: 64px; margin-inline: auto; background: linear-gradient(135deg, #a9c6ff, #4f86f7); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.c-hwb__ic--1 { --ic: url(../assets/icons/ph-users-three-duotone.svg); }
.c-hwb__ic--2 { --ic: url(../assets/icons/ph-shield-check-duotone.svg); }
.c-hwb__ic--3 { --ic: url(../assets/icons/ph-chart-line-up-duotone.svg); }
.c-hwb__no { margin-top: 20px; font-size: 22px; line-height: 1; color: #7aa8ff; }
.c-hwb__t { margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1.3; color: #fff; }
.c-hwb__p { margin-top: 12px; font-size: 18px; line-height: 1.55; color: #cbd5e1; }
@media (min-width: 900px) {
  .c-hwb__sec { padding: 48px 0; }
  .c-hwb__band { padding: 96px 48px 104px; }
  .c-hwb__h { margin-bottom: 60px; font-size: clamp(38px, 3.3vw, 52px); }
  .c-hwb__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .c-hwb__item { padding: 44px 32px 44px; }
  .c-hwb__ic { width: 72px; height: 72px; }
  .c-hwb__t { font-size: 26px; }
  .c-hwb__p { font-size: 20px; }
}

/* 207 C: zebra brand teal #0f766e (white 5.5:1; with the .06 glow and the .16 marker behind the headline white stays at 3.5:1 or more, measured), secondary text #e0f5f1 (4.9:1), glass rgba(255,255,255,.12) + hairline .38, stairs step down toward the end side */
.c-hwc { position: relative; isolation: isolate; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; font-weight: 400; letter-spacing: 0; overflow: clip; background: #0f766e; color: #fff; }
.c-hwc :where(h2, h3, ol, li, p) { margin: 0; padding: 0; list-style: none; }
.c-hwc .n { font-family: "Poppins", sans-serif; font-weight: 900; }
.c-hwc::before { content: ""; position: absolute; z-index: -1; top: -120px; right: 50%; width: 520px; height: 520px; transform: translateX(50%); border-radius: 50%; background: rgba(255, 255, 255, .06); filter: blur(90px); }
.c-hwc__sec { padding: 56px 20px 64px; }
.c-hwc__h { margin: 0 auto 36px; max-width: 900px; font-size: clamp(28px, 7.4vw, 36px); font-weight: 900; line-height: 1.18; text-align: center; text-wrap: balance; color: #fff; }
.c-hwc__acc { background: linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, .16) 62% 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.c-hwc__list { display: flex; flex-direction: column; gap: 24px; width: min(1000px, 100%); margin-inline: auto; }
.c-hwc__item { box-sizing: border-box; display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 20px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 24px; background: rgba(255, 255, 255, .12); box-shadow: 0 8px 24px rgba(4, 47, 43, .35); }
.c-hwc__num { flex: none; font-size: 56px; line-height: 1; color: #fff; }
.c-hwc__body { min-width: 0; }
.c-hwc__t { font-size: 20px; font-weight: 800; line-height: 1.3; color: #fff; }
.c-hwc__p { margin-top: 6px; font-size: 18px; line-height: 1.55; color: #e0f5f1; }
@media (min-width: 900px) {
  .c-hwc__sec { padding: 96px 32px 104px; }
  .c-hwc__h { margin-bottom: 60px; font-size: clamp(38px, 3.3vw, 52px); }
  .c-hwc__list { gap: 28px; }
  .c-hwc__item { gap: 32px; width: 78%; padding: 32px 44px; }
  .c-hwc__item:nth-child(2) { margin-inline-start: 11%; }
  .c-hwc__item:nth-child(3) { margin-inline-start: 22%; }
  .c-hwc__num { font-size: 80px; }
  .c-hwc__t { font-size: 26px; }
  .c-hwc__p { font-size: 20px; }
}