/* Real product footage, sized for a portrait recording and the existing RTL layout. */
.bajri-demo {
  position: relative;
  z-index: 3;
  padding: 64px 24px 76px;
  scroll-margin-top: 104px;
  color: var(--ink, #182033);
  font-family: 'Cairo', sans-serif;
}
.bajri-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  grid-template-areas: 'copy video' 'steps video';
  column-gap: clamp(40px, 7vw, 100px);
  row-gap: 26px;
  align-content: center;
  max-width: 1010px;
  margin: 0 auto;
}
.bajri-demo-copy { grid-area: copy; align-self: end; min-width: 0; }
.bajri-demo-eyebrow {
  margin: 0 0 14px;
  color: var(--accent, #d64020);
  font-size: 14px;
  font-weight: 800;
}
.bajri-demo h2 {
  margin: 0;
  font: 800 clamp(32px, 4vw, 48px)/1.35 'Cairo', sans-serif;
  letter-spacing: -0.025em;
}
.bajri-demo h2 span { color: var(--accent, #d64020); }
.bajri-demo-description {
  margin: 18px 0 0;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--muted, #596579);
}
.bajri-demo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--muted, #596579);
  font-size: 14px;
  line-height: 1.6;
}
.bajri-demo-meta [dir='ltr'] { font-variant-numeric: tabular-nums; }
.bajri-demo-media { grid-area: video; align-self: center; margin: 0; min-width: 0; }
.bajri-demo-player {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: #101721;
  box-shadow: 0 20px 48px rgba(24, 32, 51, 0.14);
}
.bajri-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 478 / 850;
  object-fit: contain;
  background: #101721;
}
.bajri-demo-play {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(8,14,24,0.03) 35%, rgba(8,14,24,0.35) 100%);
  color: #fff;
  cursor: pointer;
  font: 700 16px/1.5 'Cairo', sans-serif;
}
.bajri-demo [hidden] { display: none !important; }
.bajri-demo-play-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent, #d64020);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.bajri-demo-play-icon svg { margin-left: 3px; }
.bajri-demo-play-label {
  border-radius: 999px;
  padding: 7px 17px;
  background: rgba(12,20,33,0.88);
}
.bajri-demo-play:hover .bajri-demo-play-icon { background: #fff1ec; }
.bajri-demo-play:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.bajri-demo video:focus-visible { outline: 3px solid var(--accent, #d64020); outline-offset: -4px; }
.bajri-demo-steps {
  grid-area: steps;
  align-self: start;
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bajri-demo-steps li { display: flex; gap: 16px; align-items: baseline; }
.bajri-demo-step-number {
  flex: 0 0 26px;
  color: var(--accent, #d64020);
  font: 600 14px/1.7 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}
.bajri-demo-steps h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; line-height: 1.7; }
.bajri-demo-steps p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--muted, #596579); }
.bajri-demo-error { margin: 12px 0 0; font-size: 14px; line-height: 1.8; }
.bajri-demo-error a { color: var(--accent, #d64020); text-decoration: underline; }
html[lang='en'] .bajri-demo,
html[lang='en'] .bajri-demo h2,
html[lang='en'] .bajri-demo-play { font-family: 'Inter', 'Segoe UI', sans-serif; }
@media (max-width: 760px) {
  .bajri-demo { padding: 44px 20px 48px; scroll-margin-top: 90px; }
  .bajri-demo-layout {
    max-width: 500px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'copy' 'video' 'steps';
    gap: 28px;
  }
  .bajri-demo-copy { text-align: center; }
  .bajri-demo h2 { font-size: clamp(30px, 7.5vw, 40px); }
  .bajri-demo-description { margin: 14px auto 0; font-size: 16px; }
  .bajri-demo-meta { justify-content: center; margin-top: 12px; }
  .bajri-demo-media { width: min(100%, 300px); justify-self: center; }
  .bajri-demo-steps { gap: 18px; }
}