/* ================================================================
   STICKY STORY — product visual persists while steps scroll through.
   Adalo-style. The pinned side stays visible, content on the other
   side advances step-by-step.
   ================================================================ */
.story {
  position: relative;
  background: var(--adah-surface-mist);
  padding: 80px 0 120px;
}
/* story-hd now lives inside the sticky left column */
.story-hd {
  text-align: start;          /* RTL = visually right-aligned */
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--adah-tertiary-rgb),.06);
}
.story-hd .eyebrow { font: var(--adah-t-eyebrow); letter-spacing: .12em; color: var(--adah-primary); text-transform: uppercase; }
.story-hd h2 { font: var(--adah-t-h2); color: var(--adah-tertiary); letter-spacing: -0.01em; margin: 10px 0 10px; font-size: clamp(22px, 2.8vw, 30px); }
.story-hd p { font: var(--adah-t-body); color: var(--adah-ink-soft); margin: 0; }

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* Left column: sticky wrapper that pins header + visual together */
.story-left {
  position: sticky;
  top: 86px;
}

/* Visual pane — no longer sticky itself, parent handles it */
.story-sticky {
  position: relative;
  top: auto;
  aspect-ratio: 5/4;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(var(--adah-tertiary-rgb),.22), 0 0 0 1px rgba(var(--adah-tertiary-rgb),.04);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.story-frame {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
  display: flex; align-items: center; justify-content: center;
}
.story-frame.active { opacity: 1; transform: none; }

/* Each story frame = a mini product state */
.sf1 { background: linear-gradient(160deg, #F4FFFC 0%, #EAF9F6 100%); }
.sf1 .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 40px; width: 100%; max-width: 380px; }
.sf1 .tpl { aspect-ratio: 3/4; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px -10px rgba(var(--adah-tertiary-rgb),.18); padding: 10px; position: relative; }
.sf1 .tpl::before { content:""; position:absolute; inset: 8px 8px auto 8px; height: 50%; background: linear-gradient(135deg, var(--adah-wave-4), var(--adah-wave-2)); border-radius: 8px; }
.sf1 .tpl.picked { outline: 3px solid var(--adah-primary); outline-offset: 2px; }
.sf1 .tpl::after { content:""; position: absolute; bottom: 10px; inset-inline-start: 10px; width: 60%; height: 4px; background: #E4E7E7; border-radius: 4px; box-shadow: 0 8px 0 -2px #EEF1F1; }

.sf2 { background: #fff; }
.sf2 .editor { position: relative; width: 80%; height: 75%; border-radius: 16px; background: #F7FAFA; padding: 20px; box-shadow: inset 0 0 0 1px rgba(var(--adah-tertiary-rgb),.05); }
.sf2 .editor .block { background: #fff; border: 1.5px solid var(--adah-primary); border-radius: 10px; padding: 14px; margin-bottom: 10px; position: relative; }
.sf2 .editor .block::before { content:""; position:absolute; top:-8px; inset-inline-end: 10px; background: var(--adah-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; content: "نصّ"; color: #fff; }
.sf2 .editor .block .ln { height: 7px; background: #E4E7E7; border-radius: 4px; margin-bottom: 6px; }
.sf2 .editor .block .ln.sm { width: 60%; }
.sf2 .caret { position: absolute; width: 18px; height: 24px; inset-inline-end: 30%; top: 38%; }
.sf2 .caret svg { color: var(--adah-primary-ink); filter: drop-shadow(0 4px 6px rgba(var(--adah-tertiary-rgb),.2)); }

.sf3 { background: linear-gradient(160deg, #0F3D44 0%, #082F35 100%); color: #fff; }
.sf3 .shared {
  width: 80%; max-width: 340px; padding: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px; backdrop-filter: blur(12px);
  text-align: center;
}
.sf3 .shared .url { font: var(--adah-t-caption); background: rgba(255,255,255,.08); padding: 8px 14px; border-radius: 999px; margin-bottom: 16px; display: inline-block; color: var(--adah-wave-4); direction: ltr; }
.sf3 .shared .qr { width: 120px; height: 120px; background: #fff; border-radius: 10px; margin: 0 auto 14px; position: relative; padding: 10px; box-sizing: border-box; }
.sf3 .shared .qr::before, .sf3 .shared .qr::after {
  content:""; position: absolute; width: 24px; height: 24px; border: 4px solid var(--adah-ink-deep);
}
.sf3 .shared .qr::before { top: 10px; inset-inline-start: 10px; border-radius: 4px 0 0 0; border-width: 4px 0 0 4px;}
.sf3 .shared .qr::after { top: 10px; inset-inline-end: 10px; border-radius: 0 4px 0 0; border-width: 4px 4px 0 0;}
.sf3 .shared .qr-grid { position: absolute; inset: 24px; background-image:
  linear-gradient(90deg, transparent 50%, var(--adah-ink-deep) 50%),
  linear-gradient(var(--adah-ink-deep) 50%, transparent 50%);
  background-size: 12% 12%; opacity: .85; border-radius: 2px; }
.sf3 .shared h4 { font: var(--adah-t-h4); margin: 0 0 4px; color: #fff; }
.sf3 .shared p { font: var(--adah-t-caption); margin: 0; opacity: .7; }

/* Steps column */
.story-steps { display: flex; flex-direction: column; gap: 24px; padding-block: 20px; }
.step {
  padding: 28px 28px 28px 28px;
  background: transparent;
  border-inline-start: 2px solid rgba(var(--adah-tertiary-rgb),.1);
  padding-inline-start: 28px;
  position: relative;
  transition: border-color .4s, opacity .4s;
  opacity: .45;
  min-height: 55vh;
  display: flex; flex-direction: column; justify-content: center;
}
.step.active { opacity: 1; border-inline-start-color: var(--adah-primary); }
.step .num {
  position: absolute; inset-inline-start: -19px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--adah-muted);
  display: flex; align-items: center; justify-content: center;
  font: var(--adah-t-label); font-weight: 700;
  border: 2px solid rgba(var(--adah-tertiary-rgb),.1);
  transition: all .4s;
}
.step.active .num { background: var(--adah-primary); color: #fff; border-color: var(--adah-primary); box-shadow: 0 6px 14px -4px rgba(var(--adah-primary-rgb),.5); }
.step h3 { font: var(--adah-t-h2); color: var(--adah-tertiary); margin: 0 0 12px; letter-spacing: -0.01em; }
.step p { font: var(--adah-t-lead); color: var(--adah-ink-soft); margin: 0; line-height: 1.7; }

@media (max-width: 991.98px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-left { position: relative; top: auto; }
  .story-sticky { aspect-ratio: 4/3; }
  .step { min-height: auto; padding-block: 24px; }
}