/* @u */
/* Figma 5bhjpik4BMAF0XywBScnR8 node 15:257 (1440 frame): "how it works" red timeline. Added (requested): numbers 1-6 inside the circles.
   Scroll-fill timeline line (standing rule) via data-timeline. Fonts: Noto Sans Hebrew (900 title, 400 body) + Poppins for the digits. */
.c-tr { --u: calc(min(100vw, 1440px) / 1440); background: #000; color: #fff; direction: rtl; font-family: "Noto Sans Hebrew", "Poppins", sans-serif; overflow-x: clip; }
.c-tr :where(h2, p, ol, li) { margin: 0; padding: 0; list-style: none; }
.c-tr__section { box-sizing: border-box; padding: 56px 16px 64px; border-top: 3px solid #de8378; border-radius: 40px 40px 0 0; background: radial-gradient(ellipse 70% 62% at 50% 51%, #351813 0%, #1b0c0a 50%, #0d0605 75%, #000 100%); }
.c-tr__title { text-align: center; font-size: clamp(26px, 6.6vw, 46px); font-weight: 900; line-height: 1.2; background: linear-gradient(90deg, #f67f7f 0%, #ab2525 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.c-tr__list { --tl-w: 3px; --tl-track: rgba(222, 131, 120, .28); --tl-fill: #de8378; position: relative; display: flex; flex-direction: column; gap: 18px; width: min(100%, 520px); margin: 34px auto 0; }
.c-tr__step { display: flex; align-items: center; gap: 12px; }
.c-tr__dot { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #de8378; color: #351813; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 700; line-height: 1; }
.c-tr__box { flex: 1; box-sizing: border-box; padding: 16px 18px; border: 1px solid #de8378; background: #351813; font-size: clamp(15px, 4vw, 21px); font-weight: 400; line-height: 1.4; text-align: right; }

@media (min-width: 1280px) {
  .c-tr__section { box-sizing: border-box; height: auto; padding: calc(72 * var(--u)) 0 calc(96 * var(--u)); border-radius: calc(64 * var(--u)) calc(64 * var(--u)) 0 0; }
  .c-tr__title { font-size: calc(48 * var(--u)); line-height: calc(58 * var(--u)); }
  .c-tr__list { width: calc(860 * var(--u)); gap: calc(32 * var(--u)); margin: calc(84 * var(--u)) auto 0 calc((100% - calc(860 * var(--u))) / 2 + calc(22 * var(--u))); }
  .c-tr__list { margin-inline: auto; }
  .c-tr__step { gap: calc(36 * var(--u)); }
  .c-tr__dot { width: calc(46 * var(--u)); height: calc(46 * var(--u)); font-size: max(13px, calc(20 * var(--u))); }
  .c-tr__box { flex: none; width: calc(778 * var(--u)); height: calc(98 * var(--u)); padding: 0 calc(42 * var(--u)) 0 calc(20 * var(--u)); display: flex; align-items: center; font-size: max(13px, calc(24 * var(--u))); line-height: calc(29 * var(--u)); }
}