/*
 * "Our story" section on the three homepages, in the site's own colours:
 * light section background, centred section title with the green underline,
 * teal (#409b9b) and green (#18d26e) accents, green rounded catalog button.
 * The video is a portrait phone clip, so it stands upright in a phone-shaped frame;
 * the numbered steps jump the video to that chapter.
 */
#intro-video.story {
  --st-teal: #409b9b;
  --st-green: #18d26e;
  --st-text: #111;
  --st-muted: #555;
  padding: 60px 0;
  text-align: start;
}
#intro-video.story .section-header p { text-align: center; }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 60px;
  align-items: center;
  margin-top: 10px;
}

/* the steps: white cards like the rest of the site */
.story-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.story-step { counter-increment: step; }
.story-step button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 2px 16px;
  align-items: start;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-inline-start: 4px solid transparent;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
  color: var(--st-text);
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: box-shadow .3s, border-color .3s;
}
.story-step button::before {
  content: counter(step);
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--st-teal);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
[lang="fa"] .story-step button::before { content: counter(step, persian); }
[lang="ar"] .story-step button::before { content: counter(step, arabic-indic); }
.story-step strong { font-size: 17px; font-weight: 700; color: var(--st-text); font-family: "Montserrat", sans-serif; }
[dir="rtl"] .story-step strong { font-family: inherit; }
.story-step span { grid-column: 2; color: var(--st-muted); font-size: 15px; line-height: 1.6; }
.story-step time { grid-row: 1; grid-column: 3; font-size: 13px; color: #999; direction: ltr; }
.story-step button:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, .14); border-inline-start-color: var(--st-teal); }
.story-step button:focus-visible { outline: 3px solid var(--st-green); outline-offset: 3px; }
.story-step.is-now button { border-inline-start-color: var(--st-green); }
.story-step.is-now button::before { background: var(--st-green); }
.story-step.is-now strong { color: var(--st-green); }

#intro-video.story .catalog-btn { margin-top: 0; }
#intro-video.story .catalog-btn small { opacity: .85; }

/* the phone-shaped video frame */
.story-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 34px;
  padding: 10px;
  background: var(--st-teal);
  box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.story-phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #000; }
.story-play {
  position: absolute;
  inset: 10px;
  border: 0;
  border-radius: 26px;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 10px;
  padding-bottom: 34px;
  color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
}
.story-play::before {
  content: '';
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--st-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 56% 50% / 34px no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .2s;
}
.story-play:hover::before { transform: scale(1.06); }
.story-play:focus-visible { outline: 3px solid var(--st-green); outline-offset: 4px; }
.story-phone.is-playing .story-play { display: none; }

@media (max-width: 991px) {
  .story-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 36px; }
}
@media (max-width: 720px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-phone { order: -1; max-width: 290px; }
}