/* @u */
/* Figma GlmA8Imvvz1h39NlsK5M4u node 2014:174: 106 three steps (dark cards, amber band + number tab, tilted illustrations overhanging). Frame 1920. Fonts: Noto Sans Hebrew, Poppins (numbers).
   Zigzag: cards 1 and 3 on the right, card 2 on the left (the design mirrors it). Flow layout. Body 18 to 19px. */
.c-sg { --u: calc(min(100vw, 1920px) / 1920); direction: rtl; font-family: "Noto Sans Hebrew", "Poppins", sans-serif; background: #1a1100; color: #fff6e3; overflow-x: clip; display: flow-root; }
.c-sg :where(h2, h3, p, ol, li) { margin: 0; padding: 0; list-style: none; }
.c-sg__sec { box-sizing: border-box; padding: 46px 16px 64px; overflow: hidden; }
.c-sg__h { max-width: 640px; margin: 0 auto; text-align: center; font-size: clamp(22px, 6vw, 30px); font-weight: 900; line-height: 1.35; text-wrap: balance; color: #fff7e6; }
.c-sg__list { display: flex; flex-direction: column; gap: 56px; max-width: 560px; margin: 52px auto 0; }
.c-sg__step { position: relative; padding-top: 22px; }
.c-sg__acc { position: absolute; top: 40px; right: -6px; width: 60px; height: 110px; border-radius: 20px; background: #ffac00; }
.c-sg__n { position: absolute; top: 0; right: 30px; z-index: 2; box-sizing: border-box; width: 54px; height: 44px; display: grid; place-items: center; border: 1px solid #fff6e3; border-radius: 3px; background: #ffac00; font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 900; line-height: 1; color: #1a1100; }
.c-sg__card { position: relative; z-index: 1; box-sizing: border-box; padding: 26px 22px 24px; border: .7px solid #fff7e6; border-radius: 20px; background: #13120e; text-align: right; }
.c-sg__t { font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; background: linear-gradient(90deg, #ffac00, #ffce6a 40%, #ffce6a 77%, #ffac00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.c-sg__card p { margin-top: 10px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #fff6e3; }
.c-sg__img { position: relative; z-index: 2; display: block; width: 150px; height: 150px; margin: -22px auto 0 14px; object-fit: cover; }
.c-sg__img--1 { transform: rotate(-17deg); }
.c-sg__img--2 { transform: none; }
.c-sg__img--3 { transform: rotate(-21.8deg); }

@media (min-width: 1280px) {
  .c-sg__sec { width: calc(1920 * var(--u)); max-width: none; min-height: calc(1080 * var(--u)); margin: 0 auto; padding: 0; }
  .c-sg__h { padding-top: calc(100 * var(--u)); max-width: calc(912 * var(--u)); font-size: calc(38 * var(--u)); line-height: calc(45 * var(--u)); }
  .c-sg__list { width: calc(1620 * var(--u)); max-width: none; gap: 0; margin: calc(52 * var(--u)) auto 0; }
  .c-sg__step { width: calc(647 * var(--u)); padding-top: calc(23 * var(--u)); }
  .c-sg__step--1, .c-sg__step--3 { align-self: flex-start; margin-right: 0; }
  .c-sg__step--2 { align-self: flex-end; margin-top: calc(78 * var(--u)); }
  .c-sg__step--3 { margin-top: calc(76 * var(--u)); }
  .c-sg__acc { top: calc(44 * var(--u)); height: calc(122 * var(--u)); width: calc(100 * var(--u)); border-radius: calc(20 * var(--u)); }
  .c-sg__step--1 .c-sg__acc, .c-sg__step--3 .c-sg__acc { right: calc(-7 * var(--u)); left: auto; }
  .c-sg__step--2 .c-sg__acc { right: auto; left: calc(-7 * var(--u)); }
  .c-sg__n { top: calc(-6 * var(--u)); width: calc(62 * var(--u)); height: calc(52 * var(--u)); font-size: calc(36 * var(--u)); border-radius: calc(4 * var(--u)); }
  .c-sg__step--1 .c-sg__n, .c-sg__step--3 .c-sg__n { right: calc(28 * var(--u)); }
  .c-sg__step--2 .c-sg__n { right: auto; left: calc(36 * var(--u)); }
  .c-sg__card { min-height: calc(163 * var(--u)); padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(26 * var(--u)); border-radius: calc(20 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
  .c-sg__step--2 .c-sg__card { padding-right: calc(190 * var(--u)); padding-left: calc(32 * var(--u)); }
  .c-sg__t { font-size: calc(26 * var(--u)); line-height: calc(34 * var(--u)); }
  .c-sg__card p { margin-top: calc(10 * var(--u)); font-size: max(13px, calc(19 * var(--u))); line-height: calc(25 * var(--u)); }
  .c-sg__img { position: absolute; margin: 0; }
  .c-sg__step--1 .c-sg__img, .c-sg__step--3 .c-sg__img { right: auto; left: calc(-190 * var(--u)); }
  .c-sg__img--1 { top: calc(-26 * var(--u)); width: calc(210 * var(--u)); height: calc(284 * var(--u)); object-fit: cover; box-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .5); }
  .c-sg__img--3 { top: calc(-10 * var(--u)); width: calc(215 * var(--u)); height: calc(240 * var(--u)); }
  .c-sg__step--2 .c-sg__img { left: auto; right: calc(-120 * var(--u)); top: calc(-50 * var(--u)); width: calc(270 * var(--u)); height: calc(316 * var(--u)); }
}