/* ===================================================================
   قصة المنتج — الطبقة التحريرية المشتركة (بأسلوب صفحات Apple).
   كانت inline جوّه products/product.html، فأي صفحة تانية بتحمّل
   js/product-story.js كانت بتطلّع القسم بلا ستايل خالص. اتنقلت هنا
   عشان product.html و ipad-air.html يشاركوا نفس المصدر.
   محتاجة متغيّرات الثيم من الصفحة: --bg --ink --mid --panel
   --silver --silver-dark --font-ar --font-en
   =================================================================== */
/* ===================================================================
   قصة المنتج — طبقة تحريرية بأسلوب صفحات Apple.
   كل الأسماء هنا مسبوقة بـ pstory- عشان ماتلمسش أي كلاس قائم في الصفحة.
   =================================================================== */
.pstory{display:block;background:var(--bg);color:var(--ink);overflow-x:clip}
.pstory[hidden]{display:none}
.pstory-inner{max-width:1180px;margin:0 auto;padding-inline:2rem}
.pstory-section{padding-block:clamp(3.5rem,9vw,7.5rem);position:relative}
.pstory-section+.pstory-section{border-top:1px solid rgba(255,255,255,.055)}

.pstory-head{max-width:760px;margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.pstory-eyebrow{font-family:var(--font-en);font-size:13px;letter-spacing:3.2px;text-transform:uppercase;color:var(--mid);margin-bottom:.85rem}
.pstory-title{font-size:clamp(1.85rem,4.4vw,3.5rem);font-weight:800;line-height:1.14;letter-spacing:-.03em}
.pstory-title b{font-family:var(--font-en);font-weight:800}
.pstory-lede{margin-top:1.1rem;font-size:clamp(15px,1.55vw,19px);line-height:1.85;color:var(--mid);max-width:66ch}

/* ---------- الافتتاحية ---------- */
.pstory-opener{position:relative;overflow:hidden;padding-block:clamp(4rem,11vw,9rem);text-align:center;background:radial-gradient(120% 80% at 50% 0%,#101013 0%,#000 62%)}
.pstory-opener-glow{position:absolute;inset-inline-start:50%;top:-32%;width:min(78vw,1050px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;background:radial-gradient(circle,rgba(41,151,255,.20),rgba(160,88,255,.10) 38%,transparent 70%)}
.pstory-opener-inner{position:relative;max-width:960px;margin:0 auto;padding-inline:1.5rem}
/* text-align stated here rather than inherited from .pstory-opener on purpose.
   This is the story's only block-level Latin run, so it matches
   `:where([dir=rtl] [lang=en]){text-align:right}` in css/i18n.css — and that
   rule beats an INHERITED centre (an inherited value carries no specificity, so
   :where() does not save it), which parked "iPad Air" against the page edge
   instead of over its headline. Declared on the element, the centre wins. */
.pstory-opener-kicker{font-family:var(--font-en);font-size:clamp(13px,1.5vw,16px);font-weight:700;letter-spacing:.5px;color:var(--mid);margin-bottom:1rem;text-align:center}
.pstory-opener-title{font-size:clamp(2.4rem,8vw,5.6rem);font-weight:800;line-height:1.04;letter-spacing:-.045em;
  background:linear-gradient(96deg,#f5f5f7 12%,#a9c9ff 48%,#d6b4ff 82%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pstory-opener-lede{margin:1.4rem auto 0;max-width:62ch;font-size:clamp(15px,1.7vw,20px);line-height:1.85;color:#c9c9ce}
.pstory-opener-lede b{color:var(--ink)}
.pstory-opener-media{margin-top:clamp(2.4rem,6vw,4.5rem);display:flex;justify-content:center}
/* الصورة كانت بتتمطّ لـ760px عرض (أكبر من مقاسها الأصلي 568px) فبتطلع
   ضخمة وبتعدّي طول الشاشة. دلوقتي الارتفاع هو الحاكم: تفضل جوه الشاشة
   ومابتتكبّرش عن مقاسها الطبيعي، والصور العرضية بيحكمها العرض زي الأول. */
.pstory-opener-media img{width:auto;max-width:min(100%,560px);height:auto;max-height:min(72vh,760px);
  object-fit:contain;filter:drop-shadow(0 40px 80px rgba(0,0,0,.6))}

/* ---------- شريط المميزات ---------- */
.pstory-highlights{padding-block:clamp(3rem,7vw,5.5rem)}
.pstory-strip-title{max-width:1180px;margin:0 auto clamp(1.4rem,3vw,2.2rem);padding-inline:2rem;font-size:clamp(1.35rem,3vw,2rem);font-weight:750;letter-spacing:-.02em}
.pstory-strip{display:flex;gap:1rem;overflow-x:auto;padding:.4rem 2rem 1.4rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.pstory-strip::-webkit-scrollbar{display:none}
.pstory-chip{scroll-snap-align:start;flex:0 0 min(78vw,268px);min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;gap:.55rem;
  padding:1.35rem;border-radius:22px;border:1px solid var(--silver-dark);background:linear-gradient(158deg,#1a1a1d,#121214);transition:transform .35s cubic-bezier(.2,.72,.2,1),border-color .35s}
.pstory-chip b{font-family:var(--font-en);font-size:clamp(1.15rem,2.4vw,1.55rem);font-weight:750;letter-spacing:-.02em;line-height:1.15}
.pstory-chip span{font-size:13.5px;line-height:1.6;color:var(--mid)}
.pstory-strip-hint{max-width:1180px;margin:0 auto;padding-inline:2rem;font-size:13px;color:#a1a1a6}

/* ---------- إحصاءات بعدّاد ---------- */
.pstory-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem)}
.pstory-stat{display:flex;flex-direction:column;gap:.5rem}
.pstory-stat-value{font-family:var(--font-en);direction:ltr;font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(120deg,#2997ff,#a86bff);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:baseline;
  /* الأرقام لاتينية فالصندوق LTR، لكن مكانه لازم يبدأ من جهة النص العربي نفسه */
  align-self:start}
.pstory-stat-affix{font-style:normal}
.pstory-stat-prefix{font-size:13px;font-weight:650;color:var(--mid);margin-bottom:-.15rem}
.pstory-stat-label{font-size:15px;font-weight:650;color:var(--ink)}
.pstory-stat-note{font-style:normal;font-size:13px;line-height:1.6;color:var(--mid)}
.pstory-stats-quiet .pstory-stat-value{background:linear-gradient(120deg,#5ac47f,#9fd86a);-webkit-background-clip:text;background-clip:text}

.pstory-bullets{list-style:none;margin-top:clamp(2.2rem,5vw,3.4rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.pstory-bullets li{position:relative;padding:1rem 1.1rem 1rem 1.1rem;padding-inline-start:2.4rem;border:1px solid var(--silver-dark);border-radius:15px;background:var(--silver);font-size:14.5px;line-height:1.65}
.pstory-bullets li::before{content:"";position:absolute;inset-inline-start:1.1rem;top:1.35rem;width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,#2997ff,#a86bff)}

/* ---------- مقارنة المقاسات ---------- */
.pstory-size-compare{border:1px solid var(--silver-dark);border-radius:26px;background:linear-gradient(180deg,#151518,#0d0d0f);padding:clamp(1.2rem,3vw,2.2rem)}
.pstory-size-switch{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:999px;background:#0a0a0c;border:1px solid var(--silver-dark)}
.pstory-size-tab{appearance:none;border:0;cursor:pointer;padding:.55rem 1.35rem;border-radius:999px;background:transparent;color:var(--mid);font-family:var(--font-ar);font-size:14px;font-weight:650;transition:background .25s,color .25s}
.pstory-size-tab.is-active{background:var(--ink);color:#000}
.pstory-size-stage{position:relative;height:clamp(200px,34vw,340px);margin:clamp(1.4rem,3.5vw,2.4rem) 0;display:grid;place-items:center}
.pstory-size-frame{position:absolute;height:calc(100% * var(--pstory-ratio,1));aspect-ratio:var(--pstory-aspect,1.37);border-radius:clamp(10px,1.6vw,18px);
  border:2px solid rgba(255,255,255,.30);background:linear-gradient(140deg,rgba(41,151,255,.22),rgba(168,107,255,.16) 55%,rgba(255,255,255,.05));
  display:grid;place-items:center;opacity:0;transform:scale(.94);transition:opacity .45s cubic-bezier(.2,.72,.2,1),transform .45s cubic-bezier(.2,.72,.2,1)}
.pstory-size-frame.is-active{opacity:1;transform:scale(1)}
.pstory-size-frame-label{font-family:var(--font-en);font-size:clamp(11px,1.5vw,15px);font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.9)}
.pstory-size-facts{position:relative;min-height:96px}
.pstory-size-fact{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.pstory-size-fact.is-active{display:grid;animation:pstory-fade .45s cubic-bezier(.2,.72,.2,1) both}
.pstory-size-fact dt{font-size:13px;color:var(--mid);margin-bottom:.35rem}
.pstory-size-fact dd{font-size:15px;font-weight:650}
.pstory-size-fact-wide{grid-column:1/-1}
@keyframes pstory-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- بطاقات ---------- */
.pstory-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.pstory-card{display:flex;flex-direction:column;gap:.5rem;min-height:132px;padding:1.25rem;border:1px solid var(--silver-dark);border-radius:18px;background:var(--silver);transition:transform .3s ease,border-color .3s ease}
.pstory-card b{font-size:clamp(15px,1.7vw,17.5px);font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.pstory-card span{font-size:13.5px;line-height:1.65;color:var(--mid)}

/* ---------- قسم منقسم (كاميرا) ---------- */
.pstory-split-inner{display:grid;grid-template-columns:1fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pstory-split-copy .pstory-head{margin-bottom:1.8rem}
.pstory-split-media{border-radius:26px;overflow:hidden;background:var(--silver);border:1px solid var(--silver-dark);display:grid;place-items:center;padding:1.5rem;min-height:320px}
.pstory-split-media img{width:100%;height:auto;max-height:420px;object-fit:contain}
.pstory-deflist{display:grid;gap:.7rem}
.pstory-deflist>div{display:grid;grid-template-columns:130px 1fr;gap:1rem;align-items:start;padding:1rem 1.15rem;border:1px solid var(--silver-dark);border-radius:15px;background:var(--silver)}
.pstory-deflist dt{font-size:13px;color:var(--mid)}
.pstory-deflist dd{font-size:14.5px;line-height:1.7}

/* ---------- جدار الألوان ---------- */
.pstory-colorwall{display:grid;gap:clamp(1.4rem,3vw,2.2rem);justify-items:center}
.pstory-colorwall-media{width:100%;border-radius:28px;background:linear-gradient(180deg,#151518,#0c0c0e);border:1px solid var(--silver-dark);display:grid;place-items:center;padding:clamp(1.5rem,4vw,3rem);min-height:clamp(260px,40vw,440px)}
.pstory-colorwall-media img{width:min(100%,520px);height:auto;max-height:400px;object-fit:contain;transition:opacity .3s ease}
.pstory-colorwall-swatches{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center}
.pstory-colorwall-swatch{appearance:none;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--mid);font-family:var(--font-ar);font-size:13px;transition:color .25s}
.pstory-colorwall-swatch i{width:34px;height:34px;border-radius:50%;background:var(--pstory-swatch,#3a3a3c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);outline:2px solid transparent;outline-offset:4px;transition:outline-color .25s,transform .25s}
.pstory-colorwall-swatch:hover i{transform:scale(1.08)}
.pstory-colorwall-swatch.is-active{color:var(--ink)}
.pstory-colorwall-swatch.is-active i{outline-color:var(--ink)}

/* ---------- شريط الشراء تحت الألوان ---------- */
/* بيقفل دايرة الاختيار: العميل شاف اللون، يبقى يقدر يشتريه من نفس المكان.
   العرض هنا مرآة للوحة الشراء فوق (نفس اللون والسعة والسعر) — js/product-story.js
   بيوجّه الضغطة لأزرار اللوحة نفسها، فمفيش منطق شراء متكرّر يعرف يختلف عنها. */
.pstory-buy{
  width:min(100%,980px);margin-top:clamp(.4rem,1.4vw,1rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(.85rem,2vw,1.25rem) clamp(1.1rem,2.6vw,2rem);
  padding:clamp(1rem,2.2vw,1.25rem) clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid var(--silver-dark);border-radius:24px;
  background:linear-gradient(158deg,#1a1a1d,#111113);
  box-shadow:0 18px 44px rgba(0,0,0,.45)
}
.pstory-buy[hidden]{display:none}
.pstory-buy-pick{display:flex;align-items:center;gap:.7rem;min-width:0}
.pstory-buy-dot{width:22px;height:22px;flex:none;border-radius:50%;background:#3a3a3c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.pstory-buy-dot[hidden]{display:none}
.pstory-buy-pick-text{display:grid;gap:.12rem;min-width:0}
.pstory-buy-pick-text b{font-family:var(--font-en);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstory-buy-pick-text span{font-family:var(--font-en);font-size:13px;color:var(--mid)}
.pstory-buy-pick-text b[hidden],.pstory-buy-pick-text span[hidden]{display:none}
.pstory-buy-price{display:flex;align-items:baseline;gap:.35rem;justify-self:end;direction:ltr;font-family:var(--font-en);margin:0}
.pstory-buy-price[hidden]{display:none}
.pstory-buy-price span{font-size:13px;font-weight:700;color:var(--mid)}
.pstory-buy-price b{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.pstory-buy-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.pstory-buy-btn{
  appearance:none;cursor:pointer;flex:0 1 auto;min-width:170px;min-height:48px;padding-inline:1.4rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1.5px solid transparent;border-radius:999px;
  font-family:var(--font-ar);font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.2,.72,.2,1),background .25s ease,border-color .25s ease,color .25s ease,opacity .25s ease
}
.pstory-buy-btn[hidden]{display:none}
.pstory-buy-btn svg{width:18px;height:18px;flex:none}
.pstory-buy-btn:hover:not(:disabled){transform:translateY(-1px)}
.pstory-buy-btn:disabled{opacity:.45;cursor:not-allowed}
.pstory-buy-btn-fill{background:var(--ink);color:#000}
.pstory-buy-btn-fill:hover:not(:disabled){background:#dcdce0;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.pstory-buy-btn-line{background:var(--panel);color:var(--ink);border-color:var(--silver-dark)}
.pstory-buy-btn-line:hover:not(:disabled){background:var(--silver)}
.pstory-buy-btn-quiet{flex:0 0 auto;min-height:40px;padding-inline:.5rem;background:none;color:var(--mid);font-weight:650;text-decoration:underline;text-underline-offset:5px}
.pstory-buy-btn-quiet:hover{color:var(--ink)}
/* تأكيد الإضافة — نفس أخضر النظام، بيرجع لحالته بعد ثانيتين */
.pstory-buy.is-added .pstory-buy-btn-fill{background:#30d158;color:#06210f}
.pstory-buy-note{grid-column:1/-1;margin:0;font-size:13px;line-height:1.6;color:#ff7a7a}
.pstory-buy-note[hidden]{display:none}
/* أضيق من كده الصف الواحد بيتزنق: الأزرار بتنزل سطر لوحدها والسعر يفضل جنب
   الاختيار — نفس ترتيب لوحة الشراء فوق لما بتضيق. */
@media(max-width:900px){
  .pstory-buy{grid-template-columns:minmax(0,1fr) auto}
  .pstory-buy-actions{grid-column:1/-1}
  .pstory-buy-btn{flex:1 1 180px}
}

/* ---------- الملحقات ---------- */
.pstory-acc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pstory-acc-card{padding:clamp(1.3rem,2.6vw,1.9rem);border:1px solid var(--silver-dark);border-radius:22px;background:linear-gradient(165deg,#1a1a1d,#111113);transition:transform .3s ease,border-color .3s ease}
.pstory-acc-card h3{font-family:var(--font-en);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:750;letter-spacing:-.02em;margin-bottom:.8rem}
.pstory-acc-card p{font-size:14px;line-height:1.8;color:var(--mid)}
.pstory-acc-card ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.pstory-acc-card li{font-size:13px;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--silver-dark);background:#0d0d0f;color:#c3c3c8}

/* ---------- المواصفات الكاملة ---------- */
.pstory-specgroup{border:1px solid var(--silver-dark);border-radius:18px;background:var(--silver);margin-bottom:.7rem;overflow:hidden}
.pstory-specgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.35rem;font-size:16px;font-weight:700}
.pstory-specgroup>summary::-webkit-details-marker{display:none}
.pstory-specgroup>summary i{font-family:var(--font-en);font-size:19px;line-height:1;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--silver-dark);border-radius:50%;background:var(--panel);color:var(--mid);transition:transform .25s ease}
.pstory-specgroup[open]>summary i{transform:rotate(45deg)}
.pstory-specgroup-body{padding:0 1.35rem 1.1rem}
.pstory-specrow{display:grid;grid-template-columns:190px 1fr;gap:1.4rem;padding:.9rem 0;border-top:1px solid rgba(255,255,255,.06)}
.pstory-specrow-label{font-size:13px;color:var(--mid)}
.pstory-specrow-value{font-size:14.5px;line-height:1.75}

/* ---------- معرض المنتجات العامة ---------- */
.pstory-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pstory-shot{border:1px solid #e3e3e6;border-radius:22px;background:#fff;display:grid;place-items:center;padding:1.4rem;min-height:260px}
.pstory-shot img{width:100%;height:auto;max-height:230px;object-fit:contain}

/* صور فوتوغرافية (مش رندرات منتج): الصورة بتملا الإطار، والكارت الفاتح
   والحشو بيتشالوا — الصورة نفسها هي الكارت. نسبة الأبعاد محجوزة من
   width/height اللي الماركب بيحطهم، فمفيش أي إزاحة وقت التحميل. */
.pstory-shot--photo{padding:0;border-color:var(--silver-dark);background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;min-height:0}
.pstory-shot--photo img{width:100%;height:auto;max-height:none;object-fit:cover;display:block}
/* الكابشن بمقاس Apple بالظبط: 12/16 برمادي هادي وبعد 16px عن الصورة */
.pstory-shot figcaption{font-size:12px;line-height:16px;color:#86868b;padding:16px 18px 18px;text-align:start}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .pstory-shot--photo{transition:transform .45s cubic-bezier(.2,.72,.2,1),border-color .45s}
  .pstory-shot--photo img{transition:transform .7s cubic-bezier(.2,.72,.2,1)}
  .pstory-shot--photo:hover{border-color:#3a3a3d}
  .pstory-shot--photo:hover img{transform:scale(1.045)}
}

/* ---------- سلّم الزووم ---------- */
/* safe center: السلّم شريط تمرير أفقي مضبوط على سبع محطات. المنتج اللي عنده
   أربعة بس كان بيرصّهم من حافة البداية ويسيب فراغ نص الصف. `center` لوحدها
   كانت هتقصّ أول محطة لما المحطات تفيض، و`safe` بترجع للبداية ساعتها. */
.pstory-zoom-ladder{display:flex;gap:.75rem;justify-content:safe center;list-style:none;margin:0;padding:.4rem max(2rem,calc(50% - 590px)) 1.4rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pstory-zoom-ladder::-webkit-scrollbar{display:none}
.pstory-zoom-step{scroll-snap-align:center;flex:0 0 clamp(104px,15vw,140px);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:.3rem;padding:1.1rem .7rem 1rem;border-radius:18px;
  border:1px solid var(--silver-dark);background:linear-gradient(168deg,#1a1a1d,#0f0f11);position:relative;
  transition:transform .35s cubic-bezier(.2,.72,.2,1),border-color .35s}
/* الشريط الضوئي فوق كل درجة بيطول مع زيادة الزووم — يخلّي المدى محسوس بالعين */
.pstory-zoom-step::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  margin-inline:auto;height:2px;width:calc(18% + var(--pstory-grow,0) * 64%);border-radius:2px;
  background:linear-gradient(90deg,rgba(41,151,255,.25),rgba(41,151,255,.95));
  opacity:calc(.45 + var(--pstory-grow,0) * .55)}
.pstory-zoom-mult{font-family:var(--font-en);font-size:clamp(1.3rem,3vw,1.75rem);font-weight:750;
  letter-spacing:-.03em;line-height:1}
.pstory-zoom-mm{font-family:var(--font-en);font-size:13px;color:var(--mid);letter-spacing:.02em}
.pstory-zoom-lens{font-family:var(--font-en);font-size:13px;letter-spacing:.9px;text-transform:uppercase;color:#a1a1a6}
.pstory-zoom-note{margin-top:.4rem;font-size:13px;line-height:1.75;color:var(--mid)}
@media(max-width:734px){
  .pstory-zoom-ladder{padding-inline:1.25rem}
}


/* ===================== Center Stage — المستشعر المربّع ===================== */
.pstory-cs-stage{display:grid;grid-template-columns:minmax(200px,380px) minmax(0,400px);justify-content:center;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(1.8rem,4vw,3rem)}
.pstory-cs-sensor{position:relative;width:100%;max-width:380px;aspect-ratio:1;margin-inline:auto;border-radius:24px;
  border:1px dashed rgba(255,255,255,.22);background:
    radial-gradient(120% 120% at 50% 0%,rgba(41,151,255,.16),transparent 62%),
    linear-gradient(180deg,#141417,#0b0b0d)}
.pstory-cs-sensor::after{content:"";position:absolute;inset:-1px;border-radius:24px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(41,151,255,.10)}
.pstory-cs-sensor-label{position:absolute;bottom:.75rem;inset-inline:0;text-align:center;font-family:var(--font-en);font-size:13px;
  letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.66)}
.pstory-cs-crop{position:absolute;inset:0;margin:auto;
  width:calc(var(--pstory-cs-w) * 1%);height:calc(var(--pstory-cs-h) * 1%);
  border:2px solid rgba(255,255,255,.92);border-radius:10px;opacity:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 18px 48px rgba(41,151,255,.28)}
.pstory-cs-legend{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pstory-cs-legend-item{padding:1rem 1.15rem;border:1px solid var(--silver-dark);border-radius:16px;background:var(--silver);
  opacity:.42;transition:opacity .5s ease,border-color .5s ease,transform .5s ease}
.pstory-cs-legend-item b{display:block;font-size:15.5px;font-weight:750;margin-bottom:.3rem}
.pstory-cs-legend-item span{font-size:13.5px;line-height:1.6;color:var(--mid)}
@media(max-width:900px){.pstory-cs-stage{grid-template-columns:minmax(0,1fr);justify-content:stretch}}

@media(prefers-reduced-motion:no-preference){
  /* دورة واحدة 9 ثوانٍ، كل قصّة ليها ٣ ثوانٍ — والكشف بالـopacity والـtransform
     بس، زي ما Apple ماشية بالظبط (ولا كيفريم بيحرّك width/height). */
  .pstory-cs-crop{animation:pstory-cs-cycle 9s cubic-bezier(.22,1,.36,1) infinite both;
    animation-delay:calc(var(--pstory-cs-i,0) * 3s)}
  .pstory-cs-legend-item{animation:pstory-cs-lit 9s ease infinite both;
    animation-delay:calc(var(--pstory-cs-i,0) * 3s)}
  @keyframes pstory-cs-cycle{
    0%,1%{opacity:0;transform:scale(.9)}
    5%,29%{opacity:1;transform:scale(1)}
    34%,100%{opacity:0;transform:scale(1.05)}}
  @keyframes pstory-cs-lit{
    0%,1%{opacity:.42}
    6%,29%{opacity:1;border-color:#3a3a3d;transform:translateY(-3px)}
    35%,100%{opacity:.42;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  /* بلا حركة: أول قصّة ظاهرة وخلاص، والقائمة كلها واضحة. */
  .pstory-cs-crop{opacity:0}
  .pstory-cs-crop:first-of-type{opacity:1}
  .pstory-cs-legend-item{opacity:1}
}

/* ===== تحسينان من صفحة Apple ===== */
/* 2) تدرّج خفيف مكان الحدّ الحاد بين الأقسام — نفس فكرة .gradient-transition. */
.pstory-section+.pstory-section::before{content:"";position:absolute;inset-inline:0;top:0;height:clamp(90px,12vw,170px);
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}


/* ===================== المقارنة — تستاهل الترقية؟ ===================== */
.pstory-cmp{border:1px solid var(--silver-dark);border-radius:26px;background:linear-gradient(180deg,#151518,#0d0d0f);padding:clamp(1.2rem,3vw,2.2rem)}
.pstory-cmp-ask{font-size:14px;color:var(--mid);margin-bottom:.8rem}
.pstory-cmp-switch{display:inline-flex;flex-wrap:wrap;gap:.3rem;padding:.3rem;border-radius:999px;background:#0a0a0c;border:1px solid var(--silver-dark)}
.pstory-cmp-tab{appearance:none;border:0;cursor:pointer;padding:.55rem 1.15rem;border-radius:999px;background:transparent;color:var(--mid);
  font-family:var(--font-en);font-size:14px;font-weight:650;transition:background .25s,color .25s}
.pstory-cmp-tab.is-active{background:var(--ink);color:#000}
.pstory-cmp-grid{margin-top:clamp(1.4rem,3.5vw,2.2rem)}
.pstory-cmp-head,.pstory-cmp-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 2rem minmax(0,1.15fr);gap:.75rem;align-items:center}
.pstory-cmp-head{padding:0 .2rem .7rem;border-bottom:1px solid var(--silver-dark);font-size:13px;color:var(--mid);letter-spacing:.3px}
.pstory-cmp-head-old{grid-column:2}
.pstory-cmp-head-arrow{text-align:center;opacity:.45}
.pstory-cmp-head-new{color:var(--ink);font-weight:700}
.pstory-cmp-row{padding:.85rem .2rem;border-bottom:1px solid rgba(255,255,255,.05)}
.pstory-cmp-row:last-child{border-bottom:0}
.pstory-cmp-label{font-size:13.5px;color:var(--mid)}
.pstory-cmp-old{position:relative;font-size:14.5px;color:#8b8b91}
.pstory-cmp-val{display:none;font-style:normal}
.pstory-cmp-val.is-active{display:inline;animation:pstory-fade .4s cubic-bezier(.22,1,.36,1) both}
/* السهم زخرفي (aria-hidden) فمش ملزوم بـAA، بس 2.07:1 كان باهت لدرجة إنه
   بيختفي على الشاشات الباهتة — الرفع لنفس رمادي القيم الثانوية. */
.pstory-cmp-arrow{text-align:center;color:#6e6e73}
.pstory-cmp-new{font-size:14.5px;color:var(--ink)}
.pstory-cmp-new b{background:linear-gradient(120deg,#f5f5f7,#a9c9ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:750}
@media(max-width:760px){
  .pstory-cmp-head{display:none}
  .pstory-cmp-row{grid-template-columns:1fr;gap:.25rem;padding:.9rem .2rem}
  .pstory-cmp-arrow{display:none}
  .pstory-cmp-old::after{content:" ← ";color:#4a4a50}
  .pstory-cmp-old,.pstory-cmp-new{display:inline}
}

/* ===================== ليه من عندنا ===================== */
.pstory-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:clamp(1.6rem,3.5vw,2.6rem)}
.pstory-why-card{display:flex;flex-direction:column;gap:.55rem;padding:1.5rem 1.35rem;border:1px solid var(--silver-dark);border-radius:20px;
  background:var(--silver);text-decoration:none;color:inherit;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.pstory-why-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;margin-bottom:.35rem;font-size:19px;line-height:1;
  background:linear-gradient(135deg,rgba(41,151,255,.22),rgba(168,107,255,.18));color:#cfe1ff}
.pstory-why-card b{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
.pstory-why-copy{font-size:13.5px;line-height:1.7;color:var(--mid)}
.pstory-why-go{margin-top:.35rem;font-size:13px;font-weight:650;color:#7bb4ff}
a.pstory-why-card:hover{transform:translateY(-5px);border-color:#3a3a3d;background:#202024}
@media(max-width:860px){.pstory-why-grid{grid-template-columns:1fr}}

/* ===================== رسم الشريحة ===================== */
.pstory-chipdiag{width:min(100%,420px);height:auto;display:block;margin-inline:auto;
  /* الصفحة RTL والـSVG بيورّث الاتجاه، فنص الليبل كان بيتزحلق ويتقص عند حدّ الـviewBox. */
  direction:ltr}
.pstory-chipdiag .pcd-pkg{fill:#0e0e11;stroke:rgba(255,255,255,.14);stroke-width:1}
.pstory-chipdiag .pcd-t{fill:rgba(255,255,255,.34);font-family:var(--font-en);font-size:13px;letter-spacing:1.6px;direction:ltr;text-anchor:start}
.pstory-chipdiag .pcd-perf{fill:#2997ff}
.pstory-chipdiag .pcd-eff{fill:rgba(41,151,255,.34)}
.pstory-chipdiag .pcd-gpu{fill:#a86bff}
.pstory-chipdiag .pcd-neural{fill:rgba(90,196,127,.55)}

/* ===================== تثبيت قصة الكاميرا بالتمرير ===================== */
@media(min-width:1025px){
  /* الصورة بتثبت والصفوف بتعدّي جنبها — نفس نمط sticky-scroll بتاع Apple.
     الحاوية الخارجية هي اللي بتعمل المسافة، والجوّانية sticky محسوبة على
     ارتفاع الشاشة عشان المحتوى يثبت متمركز مش ملزوق فوق. */
  .pstory-split-media{position:sticky;top:calc(50vh - 200px);align-self:start}
}
.pstory-deflist>div{transition:opacity .5s ease,border-color .5s ease}
@media(prefers-reduced-motion:no-preference){
  .pstory-deflist>div{opacity:.45}
  .pstory-deflist>div.is-lit{opacity:1}
}


/* ===================== مقياس المتانة ===================== */
.pstory-shield{margin-top:clamp(1.6rem,3.5vw,2.4rem);padding:clamp(1.2rem,3vw,1.8rem);border:1px solid var(--silver-dark);border-radius:22px;background:var(--silver)}
.pstory-shield-title{font-size:14px;color:var(--mid);margin-bottom:1.1rem}
.pstory-shield-bars{display:grid;gap:.85rem}
.pstory-shield-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:.9rem;align-items:center}
.pstory-shield-name{font-size:13.5px;color:var(--mid)}
.pstory-shield-track{height:12px;border-radius:999px;background:#0a0a0c;border:1px solid var(--silver-dark);overflow:hidden}
.pstory-shield-fill{display:block;height:100%;width:var(--pstory-w,0);border-radius:999px;background:#3a3a3d}
.pstory-shield-row.is-hero .pstory-shield-fill{background:linear-gradient(90deg,#2997ff,#a86bff)}
/* #6e6e73 كان بيدّي تباين 3.36:1 على خلفية الصف — تحت حد AA (4.5:1)
   وده رقم حقيقي بيتقري، مش زخرفة. #98989d بيعدّي الحد ويفضل أهدى من
   الصف البطل اللي لونه --ink. */
.pstory-shield-val{font-family:var(--font-en);font-size:16px;font-weight:750;color:#98989d;min-width:2.2rem;text-align:center}
.pstory-shield-row.is-hero .pstory-shield-val{color:var(--ink)}
.pstory-shield-note{margin-top:1.1rem;font-size:13px;line-height:1.7;color:var(--mid)}
@media(max-width:640px){
  .pstory-shield-row{grid-template-columns:minmax(0,1fr) auto;gap:.3rem .7rem}
  .pstory-shield-track{grid-column:1/-1;order:3}
}
@media(prefers-reduced-motion:no-preference){
  /* العمود بيتمدّد من الصفر لقيمته لما القسم يظهر — transform مش width عشان
     مايجبرش إعادة تخطيط في كل إطار. */
  .pstory-shield-fill{transform:scaleX(0);transform-origin:right center;transition:transform 1s cubic-bezier(.22,1,.36,1)}
  .pstory-shield.is-visible .pstory-shield-fill{transform:scaleX(1)}
  .pstory-shield.is-visible .pstory-shield-row:nth-child(2) .pstory-shield-fill{transition-delay:.18s}
}

/* ===================== الحركة ===================== */
@media(prefers-reduced-motion:no-preference){
  html.pstory-motion .pstory-reveal{opacity:0;transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.2,.72,.2,1),transform .8s cubic-bezier(.2,.72,.2,1);
    transition-delay:calc(var(--pstory-i,0) * 90ms)}
  html.pstory-motion .pstory-reveal.is-visible{opacity:1;transform:none}
  .pstory-chip:hover{transform:translateY(-6px);border-color:#3a3a3d}
  .pstory-card:hover{transform:translateY(-5px);border-color:#3a3a3d}
  .pstory-acc-card:hover{transform:translateY(-6px);border-color:#3a3a3d}
  .pstory-zoom-step:hover{transform:translateY(-5px);border-color:#3a3a3d}
  .pstory-opener-glow{animation:pstory-glow 8s ease-in-out infinite}
  @keyframes pstory-glow{0%,100%{opacity:.55;transform:translateX(-50%) scale(.96)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
  /* حركة مربوطة بالتمرير نفسه — زي ما Apple بتكبّر الصورة وأنت نازل. */
  @supports (animation-timeline:view()){
    .pstory-opener-media img{animation:pstory-zoom linear both;animation-timeline:view(block);animation-range:entry 4% cover 42%}
    .pstory-split-media img{animation:pstory-rise linear both;animation-timeline:view(block);animation-range:entry 6% cover 46%}
    @keyframes pstory-zoom{from{opacity:.35;transform:scale(.9) translateY(28px)}to{opacity:1;transform:scale(1) translateY(0)}}
    @keyframes pstory-rise{from{transform:translateY(26px) scale(.96)}to{transform:translateY(0) scale(1)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .pstory-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .pstory-opener-glow{animation:none}
}

/* ===================== الشاشات الصغيرة ===================== */
@media(max-width:1024px){
  .pstory-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstory-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstory-acc-grid{grid-template-columns:1fr}
  .pstory-split-inner{grid-template-columns:1fr}
  .pstory-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .pstory-inner{padding-inline:1.1rem}
  .pstory-strip{padding-inline:1.1rem}
  .pstory-strip-title,.pstory-strip-hint{padding-inline:1.1rem}
  .pstory-section{padding-block:2.8rem}
  .pstory-bullets{grid-template-columns:1fr}
  .pstory-size-fact.is-active{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstory-deflist>div{grid-template-columns:1fr;gap:.3rem}
  .pstory-specrow{grid-template-columns:1fr;gap:.3rem}
  .pstory-shots{grid-template-columns:1fr}
  .pstory-cards{gap:.65rem}
  .pstory-card{min-height:112px;padding:1rem;border-radius:15px}
  .pstory-colorwall-swatches{gap:1rem}
  .pstory-buy{grid-template-columns:1fr;border-radius:20px;padding:1rem}
  .pstory-buy-price{justify-self:start}
  .pstory-buy-actions{flex-direction:column;align-items:stretch}
  .pstory-buy-btn{flex:none;width:100%}
}

/* ===================================================================
   قصة المنتج V2 — تطبيق مباشر لدروس تحليل صفحة Apple الرسمية:
   إيقاع أوسع، خطوط أضخم بتتبّع مضغوط، كشف كلمات متتابع، معرض
   بأسهم، رصة ألوان cross-fade، وشريحة M4 بتوهّج. كله pstory- فقط.
   =================================================================== */

/* 1) إيقاع الأقسام — آل بيستخدم حتى 200px بين الأقسام */
.pstory-section{padding-block:clamp(4rem,11vw,9.5rem)}
.pstory-section+.pstory-section{border-top-color:rgba(255,255,255,.045)}

/* 2) تايبوغرافي أضخم — تتبّع حروف مضغوط زي ‎-0.04em‎ عند آبل */
.pstory-title{font-size:clamp(2rem,5vw,4.25rem);line-height:1.07;letter-spacing:-.04em;font-weight:800}
.pstory-lede{font-size:clamp(15px,1.7vw,21px);line-height:1.8;max-width:62ch}

/* 3) أداء أفضل من الأصل: تجسيد مؤجّل للأقسام تحت خط الشاشة */
.pstory-section{content-visibility:auto;contain-intrinsic-size:auto 760px}
.pstory-opener,.pstory-highlights{content-visibility:visible;contain-intrinsic-size:none}

/* 4) كشف متدرج بمنحنى آبل البطيء الفاخر */
@media(prefers-reduced-motion:no-preference){
  html.pstory-motion .pstory-reveal{
    transition-timing-function:cubic-bezier(.22,1,.36,1);
    /* مدة الإزاحة أقصر من مدة الوضوح (0.7s ضد 0.9s) — العنصر بيستقرّ في مكانه
       قبل ما يكمّل ظهور، وده اللي بيشيل إحساس "الطفو". قيم أبل الرسمية. */
    transition-duration:.9s,.7s;
  }
  /* عنوان الافتتاحية: الحاوية تظهر فورًا والكلمات هي اللي تتكشف */
  html.pstory-motion .pstory-opener-title.pstory-reveal{transition:none}
  html.pstory-motion .pstory-opener-title .pw{
    /* الكلمة صندوق مستقل فمابتورّثش قصّ الأب — فبتاخد نفس التدرّج بمقاس الأب
       وبإزاحة سالبة بمقدار موضعها (بيحسبها alignWordGradient). */
    background-image:inherit;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
    background-size:var(--pw-bw,100%) var(--pw-bh,100%);background-position:var(--pw-bx,0) var(--pw-by,0);
    display:inline-block;opacity:0;transform:translateY(.45em);
    transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(var(--pw-i,0)*85ms + 150ms);
    will-change:opacity,transform;
  }
  html.pstory-motion .pstory-opener-title.is-visible .pw{opacity:1;transform:none}

  /* لمعة الشريحة — تدفّق مستمر: الشريط بيتحرّك بالظبط بمقدار طول التكرار
     (300 بكسل)، فآخر إطار مطابق لأول إطار والدورة بتقفل من غير أي قفزة —
     زي لوب فيديو. linear مش ease عشان السرعة تفضل ثابتة بلا تباطؤ عند الحواف. */
  .pstory-chipviz-sheen::before{animation:pstory-chip-sheen 1.8s linear infinite}
  @keyframes pstory-chip-sheen{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(300px) skewX(-18deg)}}

  /* شريحة M4 — نبض توهّج هادي (إيقاع آبل: 5-8 ثواني) */
  .pstory-chipviz-core{animation:pstory-chip-pulse 6s ease-in-out infinite}
  @keyframes pstory-chip-pulse{
    0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5),
      0 22px 54px -20px rgba(41,151,255,.28),0 10px 30px rgba(0,0,0,.55)}
    50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5),
      0 34px 90px -16px rgba(41,151,255,.5),0 12px 36px rgba(0,0,0,.55)}
  }

  /* دخول صور المعرض مربوط بالتمرير نفسه */
  @supports(animation-timeline:view()){
    .pstory-slide img{
      animation:pstory-shot-in linear both;
      animation-timeline:view(block);
      animation-range:entry 8% cover 40%;
    }
    @keyframes pstory-shot-in{from{opacity:.25;transform:scale(.92) translateY(24px)}to{opacity:1;transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){
  .pstory-chipviz-core{animation:none!important}
  .pstory-chipviz-sheen::before{animation:none!important}
  .pstory-slide img{animation:none!important}
  .pstory-opener-title .pw{opacity:1!important;transform:none!important;transition:none!important}
}

/* 5) نقاط الألوان في الافتتاحية */
.pstory-opener-colors{
  margin-top:1.7rem;display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--silver-dark);
  background:rgba(20,20,23,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pstory-opener-colors-label{font-size:13px;font-weight:600;color:var(--mid)}
.pstory-opener-colors i{
  width:13px;height:13px;border-radius:50%;background:var(--sw,#555);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* 6) شريحة M4 المرسومة CSS — ميلان ‎-2deg‎ ولمعة conic زي الأصل */
.pstory-chipviz{display:grid;place-items:center;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
/* نسخة الصورة — رندر شريحة M4 الرسمي بخلفية شفافة بتندمج مع خلفية القسم.
   الظل قاعد على الغلاف مش على الصورة: جوّه الغلاف بنقصّ اللمعة بـoverflow،
   ولو الظل كان على نفس العنصر المقصوص كان هيتقصّ معاها ويروح التوهّج. */
.pstory-chipviz-shot{
  position:relative;display:block;width:min(480px,78vw);
  filter:drop-shadow(0 34px 80px rgba(41,151,255,.22)) drop-shadow(0 14px 38px rgba(0,0,0,.55));
}
.pstory-chipviz-img{display:block;width:100%;height:auto;border-radius:18px}
/* لمعة الشريحة — نفس ميل لمعة بلوك السعر (‎-18deg‎)، بس شرايط متكرّرة بتتدفّق
   بدل شريط واحد بيعدّي وبعده سكون: عرض الشريحة 480 بكسل والتكرار كل 300، يعني
   فيه دايمًا ضوء ونص على جسمها فالسطح باين حيّ طول الوقت.
   الطبقة متقنّعة بصورة الشريحة، فالضوء يمشي على جسمها بس مش على الفراغ حواليها،
   والميل جاي من skewX على العنصر (مش من زاوية التدرّج) عشان الإزاحة الأفقية
   تساوي طول التكرار بالظبط والّلوب يقفل بلا خيط ظاهر. */
.pstory-chipviz-sheen{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:18px;
  -webkit-mask-image:var(--pstory-sheen);mask-image:var(--pstory-sheen);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.pstory-chipviz-sheen::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;right:-70%;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0px,rgba(255,255,255,0) 140px,
    rgba(255,255,255,.05) 178px,rgba(255,255,255,.19) 205px,rgba(255,255,255,.05) 232px,
    rgba(255,255,255,0) 300px);
  transform:translateX(0) skewX(-18deg);
}
.pstory-chipviz-core{
  position:relative;width:clamp(100px,14vw,150px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:26%;rotate:-2deg;color:#fff;
  font-family:var(--font-en);font-weight:800;font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.02em;
  background:linear-gradient(145deg,#3a3a40,#16161a 58%,#232327);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5),
    0 22px 54px -20px rgba(41,151,255,.28),0 10px 30px rgba(0,0,0,.55);
}
.pstory-chipviz-core::before{content:"";position:absolute;inset:7px;border-radius:inherit;border:1px solid rgba(255,255,255,.09)}
.pstory-chipviz-core::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;
  background:conic-gradient(from 90deg,rgba(255,255,255,.05),rgba(255,255,255,.32) 64deg,rgba(255,255,255,.05) 130deg,rgba(255,255,255,.05));
}

/* 7) معرض نظرة أقرب */
.pstory-closer .pstory-inner{max-width:1280px}
.pstory-carousel{position:relative;margin-top:clamp(1.8rem,4vw,2.8rem)}
.pstory-track{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.35rem .25rem 1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pstory-track::-webkit-scrollbar{display:none}
.pstory-slide{
  scroll-snap-align:center;flex:0 0 min(76vw,480px);margin:0;
  border-radius:28px;border:1px solid var(--silver-dark);
  background:linear-gradient(168deg,#17171a,#0d0d0f);
  padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.pstory-slide img{
  width:100%;height:auto;max-height:min(46vh,430px);object-fit:contain;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.45));
}
.pstory-slide figcaption{font-family:var(--font-en);font-size:13px;font-weight:650;letter-spacing:.4px;color:var(--mid)}
.pstory-nav{
  position:absolute;top:calc(50% - 23px);z-index:2;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(22,22,26,.78);color:var(--ink);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:opacity .25s ease,background .25s ease;
}
.pstory-nav:hover{background:rgba(44,44,49,.92)}
.pstory-nav.is-off{opacity:0;pointer-events:none}
.pstory-nav svg{width:19px;height:19px}
.pstory-nav-prev{inset-inline-start:10px}
.pstory-nav-next{inset-inline-end:10px}
[dir="rtl"] .pstory-nav-prev svg,[dir="ltr"] .pstory-nav-next svg{transform:scaleX(-1)}

/* 8) رصة جدار الألوان — cross-fade بين الرندرات */
.pstory-stack{position:relative;width:min(100%,560px);aspect-ratio:1086/1189}
.pstory-stack-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.4));
}
.pstory-stack-img.is-active{opacity:1}

/* 9) قسم Apple Intelligence — التدرج الرسمي بأربع محطات */
.pstory-intel .pstory-head{margin-inline:auto;text-align:center}
.pstory-intel .pstory-ai-title{
  background-image:linear-gradient(90deg,#0090F7 8%,#BA62FC,#F2416B,#F55600);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pstory-intel .pstory-lede{margin-inline:auto;text-align:center}
.pstory-card-center{text-align:center;align-items:center}

/* 10) لمسات ختامية */
.pstory-stat-value{font-size:clamp(2.3rem,5.5vw,4.1rem);letter-spacing:-.045em}
.pstory-strip{
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}

/* الشاشات الصغيرة */
@media(max-width:640px){
  .pstory-section{padding-block:3.2rem}
  .pstory-title{letter-spacing:-.03em}
  .pstory-slide{flex-basis:84vw;border-radius:22px;padding:1.1rem}
  .pstory-slide img{max-height:300px}
  .pstory-nav{width:40px;height:40px;top:calc(50% - 20px)}
  .pstory-nav-prev{inset-inline-start:6px}
  .pstory-nav-next{inset-inline-end:6px}
  .pstory-nav svg{width:17px;height:17px}
  .pstory-chipviz-core{width:88px;border-radius:24%}
  .pstory-chipviz-img{width:min(320px,86vw)}
  .pstory-stat-value{font-size:clamp(2rem,9vw,2.6rem)}
}