/* ===== s17 ===== */
@scope (.s17) {
  *,*::before,*::after { box-sizing: border-box; }
  html,body { margin:0; padding:0; }
  html { direction: rtl; }
  body {
    direction: rtl;
    font-family: "Assistant","Heebo",system-ui,sans-serif;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  h1,h2,h3,h4,p,figure,blockquote { margin:0; }
  :scope { --canvas-w: 1920px; --navy:#0e0d2c; }

  /* ---- scaled-stage helper (build at 1920, scale to viewport) ---- */
  .scaled { position: relative; width: 100%; overflow: hidden; height: calc(100vw * var(--h) / 1920); }
  .scaled > .stage {
    position: absolute; top: 0; right: 0;
    width: var(--canvas-w); height: calc(var(--h) * 1px);
    transform-origin: top right; transform: scale(calc(100vw / var(--canvas-w)));
  }

  .yv { --h: 761; background:#fff; }
  /* Figma group 5719:17 = 968x761 at x487 — not centred in the canvas */
  .yv__wrap { position:absolute; left:487px; top:0; transform:none; width:968px; height:761px; }

  .yv__title {
    position:absolute; top:0; left:45px; width:854px; height:120px;
    font-size:50px; line-height:60px; font-weight:400; text-align:center;
    color:var(--navy); letter-spacing:0;
  }
  .yv__title b { font-weight:700; }

  .yv__sub {
    position:absolute; top:148px; left:70px; width:806px; height:60px;
    font-size:20px; line-height:30px; font-weight:400; text-align:center;
    color:#1d1d1b;
  }

  /* ---- cards ---- */
  .yv__card {
    position:absolute; top:240px; width:302px; height:519px;
    border-radius:10px; overflow:hidden; display:block; cursor:pointer;
  }
  .yv__card--1 { left:0; }
  .yv__card--2 { left:333px; }
  .yv__card--3 { left:666px; }

  /* the prev/next arrows belong to the ≤1199 carousel only — not in the desktop design */
  .yv__navwrap { display:none; }

  .yv__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .yv__grad { position:absolute; inset:auto 0 0 0; height:177px;
              background:linear-gradient(to top, var(--navy) 0%, rgba(14,13,44,0) 100%); }
  .yv__play { position:absolute; left:50%; top:305px; transform:translateX(-50%);
              width:91px; height:91px; z-index:2; }
  .yv__cap {
    position:absolute; left:17px; width:271px; top:416px;
    text-align:center; font-size:21px; line-height:28px; font-weight:400;
    color:#fff; z-index:2;
  }

  /* ---- tablet / mobile ---- */
  
  /* ---- phone (≤768) — fluid type, wider snap cards ---- */

/* ===== RESPONSIVE — tablet ≤1199 / mobile ≤767 (Figma mobile: centred carousel + arrows) ===== */
@media (max-width:1199px){
  .yv{--h:auto;height:auto}
  .yv .stage{position:relative;width:100%;height:auto;transform:none}
  .yv__wrap{position:relative;left:0;top:0;transform:none;width:100%;height:auto;padding:0;
    --cw:min(69.07vw,340px);--ch:calc(var(--cw) * 445 / 259)}
  .yv__title{position:relative;top:0;left:0;width:auto;height:auto;max-width:720px;
    margin:0 auto;padding:0 24px;font-size:34px;line-height:44px}
  .yv__sub{position:relative;top:0;left:0;width:auto;height:auto;max-width:660px;
    margin:16px auto 0;padding:0 24px;font-size:18px;line-height:28px}

  .yv__cards{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-top:26px;padding-inline:calc((100% - var(--cw)) / 2);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .yv__cards::-webkit-scrollbar{display:none}
  .yv__card{position:relative;top:0!important;left:0!important;
    flex:0 0 var(--cw);width:var(--cw);height:auto;aspect-ratio:259/445;scroll-snap-align:center}
  .yv__play{left:50%;top:auto;bottom:25%;transform:translateX(-50%);width:78px;height:78px}
  .yv__cap{left:8%;right:8%;width:auto;top:auto;bottom:24px;font-size:16px;line-height:22px}

  /* circular arrows overlaid on the active card */
  .yv__navwrap{display:block;position:relative;z-index:6;height:0}
  .yv__nav{position:absolute;top:calc(26px + var(--ch) * .5 - 26px);
    width:52px;height:52px;border-radius:50%;background:#fff;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(14,13,44,.22)}
  .yv__nav svg{width:26px;height:26px}
  .yv__nav--prev{right:calc((100% - var(--cw)) / 2 + 27px)}
  .yv__nav--next{left:calc((100% - var(--cw)) / 2 + 26px)}
}

@media (max-width:767px){
  .yv__title{padding:0 15px;font-size:28px;line-height:38px}
  .yv__sub{margin-top:14px;padding:0 15px;font-size:16px;line-height:28px}
  .yv__cards{margin-top:21px}
  .yv__cap{font-size:15px;line-height:21px}
}

/* ===== Figma mobile 5647:20493 — corrected type scale ===== */
@media (max-width:767px){
  .yv__title{font-size:32px;line-height:38px;}
  .yv__sub{font-size:18px;line-height:28px;}
  .yv__cap{font-size:19px;line-height:26px;}
}
}