/* ON AIR TV — SECTION 08 · How It Works / طريقة الاشتراك */
.ohw{position:relative;font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#F4D6B0;padding:44px 12px 52px}
.ohw *{box-sizing:border-box}
.ohw h2,.ohw h3,.ohw p,.ohw ol{margin:0;padding:0}
.ohw-h{text-align:center;font-size:26px;line-height:1.3;font-weight:700;color:#F4D6B0}

/* ثلاث خطوات في صف واحد دايماً: كل خطوة ثلث العرض */
.ohw .ohw-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:24px auto 0;max-width:900px}
.ohw-st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.ohw-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#5BC0DE;background:rgba(91,192,222,.07);border:1px solid rgba(91,192,222,.22)}
.ohw-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ohw-st h3{margin-top:12px;font-size:14px;line-height:1.4;font-weight:700;color:#F4D6B0}
.ohw-st p{margin-top:4px;font-size:12px;line-height:1.6;color:rgba(244,214,176,.64)}
/* السهم بين الخطوات: على مستوى الأيقونة عند حد العمود، متجه لليسار */
.ohw-st + .ohw-st::before{content:"";position:absolute;top:19px;inset-inline-start:-4px;width:8px;height:8px;border-top:1.5px solid rgba(91,192,222,.75);border-left:1.5px solid rgba(91,192,222,.75);transform:rotate(-45deg)}
html[dir=ltr] .ohw-st + .ohw-st::before{transform:rotate(135deg)}

/* حركة الظهور (نفس نظام السكشن 07): الخطوات تظهر مع بعض */
.ohw .rv{opacity:1;transform:none}
.ohw.anim .rv{opacity:0;transform:translateY(14px)}
.ohw.anim.in .rv{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.ohw.anim .rv{opacity:1;transform:none}.ohw.anim.in .rv{transition:none}}

@media (max-width:359px){
  .ohw{padding-inline:8px}
  .ohw-st{padding:0 6px}
  .ohw-ic{width:40px;height:40px;border-radius:12px}
  .ohw-ic svg{width:21px;height:21px}
  .ohw-st h3{font-size:13px}
  .ohw-st p{font-size:11.5px}
  .ohw-st + .ohw-st::before{top:16px;width:7px;height:7px;inset-inline-start:-3px}
}
@media (min-width:1024px){
  .ohw{padding:96px 24px 104px}
  .ohw-h{font-size:42px}
  .ohw .ohw-steps{margin-top:52px}
  .ohw-st{padding:0 36px}
  .ohw-ic{width:64px;height:64px;border-radius:18px}
  .ohw-ic svg{width:30px;height:30px}
  .ohw-st h3{margin-top:20px;font-size:20px}
  .ohw-st p{margin-top:6px;font-size:15.5px}
  .ohw-st + .ohw-st::before{top:27px;width:11px;height:11px;inset-inline-start:-6px}
}