/* داينزا — موقع تعريفي. الألوان من المنصة نفسها: بيج + حبر بنّي + لون جمري واحد. */
:root{
  --ground:#F7F4EF; --ground-2:#F1EDE4; --paper:#FFFFFF; --inset:#EAE4D9;
  --ink:#231A14; --ink-2:#655A4E; --ink-3:#7C7167;
  --line:#E6E0D4; --line-2:#D6CDBD;
  --ember:#B4402A; --ember-deep:#8E3020; --ember-tint:rgba(180,64,42,.09);
  --on-ember:#fff; --btn-hover:#3A2C22;

  --font-ui:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-num:'Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --gutter:20px; --maxw:1120px;
  --ease:cubic-bezier(.22,.7,.2,1); --dur:.18s;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-ui); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ── الأزرار (≥ 44px للمس) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;border-radius:var(--r-md);border:1.5px solid transparent;
  font:500 15px/1 var(--font-ui);cursor:pointer;white-space:nowrap;
  transition:background var(--dur),border-color var(--dur),color var(--dur),transform var(--dur);
}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-ink{background:var(--ink);color:var(--ground)}
.btn-ink:hover{background:var(--btn-hover)}
.btn-ember{background:var(--ember);color:var(--on-ember)}
.btn-ember:hover{background:var(--ember-deep)}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
:focus-visible{outline:2.5px solid var(--ember);outline-offset:3px;border-radius:var(--r-sm)}

/* ── الشريط العلوي ── */
.top{
  position:sticky;top:0;z-index:50;
  background:var(--ground);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.top-in{display:flex;align-items:center;gap:10px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto}
.mark{width:22px;height:27px;fill:var(--ember);flex-shrink:0}
.mark circle{fill:var(--ground)}
.brand-en{font:700 22px/1 'Readex Pro',var(--font-ui);letter-spacing:-.3px}
.brand-ar{font:500 14px/1 var(--font-ui);color:var(--ink-3);padding-inline-start:10px;border-inline-start:1px solid var(--line-2)}
/* مفتاح اللغة المنزلق */
.lang{position:relative;display:flex;padding:3px;border-radius:var(--r-md);background:var(--ground-2);border:1px solid var(--line);direction:rtl;flex-shrink:0}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;right:3px;width:calc(50% - 3px);border-radius:7px;background:var(--paper);box-shadow:0 1px 2px rgba(35,26,20,.14);transition:transform .28s var(--ease)}
.lang:has([data-lang="en"].on)::before{transform:translateX(-100%)}
.lang button{position:relative;width:40px;height:36px;border:0;background:none;cursor:pointer;font:600 13px/1 var(--font-ui);color:var(--ink-3);transition:color var(--dur)}
.lang button.on{color:var(--ember)}
.nav{display:none;gap:4px}
.nav a{padding:10px 14px;border-radius:var(--r-md);font-size:14.5px;color:var(--ink-2);transition:var(--dur)}
.nav a:hover{color:var(--ink);background:var(--ground-2)}

/* ── الأقسام ── */
.eyebrow{
  display:inline-block;font:500 13px/1 var(--font-ui);color:var(--ember);
  letter-spacing:.2px;margin-bottom:14px;
}
.sec{padding:64px 0}
.sec-alt{background:var(--ground-2);border-block:1px solid var(--line)}
.sec-ink{background:var(--ink);color:var(--ground)}
.sec-ink .eyebrow{color:#E08A74}
h2{font:700 clamp(27px,6.8vw,42px)/1.35 var(--font-ui);letter-spacing:-.2px;margin-bottom:28px;max-width:20em}

.hero{padding:36px 0 40px}
h1{font:800 clamp(30px,8.6vw,64px)/1.3 var(--font-ui);letter-spacing:-.5px;margin-bottom:18px}
h1,h2{text-wrap:balance}
h1 em{display:block;font-style:normal;color:var(--ember)}
.lead{font-size:clamp(16px,4.2vw,19px);color:var(--ink-2);max-width:32em;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-cta .btn{flex:1 1 150px}

/* ══ الجولة ══
   الوضع الثابت (الافتراضي): المحطات تحت بعض، لكل واحدة إطارها.
   الوضع المتحرك (html.live): مسرح ثابت والمحطات فوق بعض، والتمرير يبدّل بينها. */
.tour{background:var(--ground-2);border-block:1px solid var(--line)}
.stage{--head:64px;--cap-h:196px}
.st{display:grid;gap:20px;padding:40px var(--gutter)}
.st-ghost,.rail{display:none}
.vis{display:grid;place-items:center;min-height:0;min-width:0}

/* إطار الجوال وإطار اللوحة */
.ph,.bd{position:relative;background:#17110E;border-radius:13.5%/6.3%;padding:2.6%;width:280px;aspect-ratio:390/844;max-width:100%;
  box-shadow:inset 0 0 0 1.5px #6E625A,inset 0 0 0 3px #17110E,0 18px 30px -18px rgba(35,26,20,.45)}
/* أزرار الآيفون الجانبية */
.ph::before,.ph::after{content:"";position:absolute;width:3px;background:#3A302A;border-radius:2px}
.ph::before{right:-3px;top:23%;height:10%}
.ph::after{left:-3px;top:18%;height:6%;box-shadow:0 calc(100% + 10px) 0 #3A302A}
.bd{--base:390}
.scr{--k:.68;--base:390;position:relative;width:100%;height:100%;overflow:hidden;border-radius:11.5%/5.3%;background:var(--ground)}
.scr-in{position:absolute;top:0;right:0;width:calc(var(--base)*1px);height:calc(100%/var(--k));transform:scale(var(--k));transform-origin:top right}
.todo-scr{height:100%;display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:22px;line-height:1.8}

.cap{max-width:30em}
.cap-n{font-size:13.5px;font-weight:600;color:var(--ember);margin-bottom:8px}
.cap-n span{color:var(--ink-3);font-weight:400}
.cap h2{font-size:clamp(22px,5.6vw,34px);margin-bottom:8px}
.cap p:last-child{color:var(--ink-2);font-size:15.5px;line-height:1.75}

/* عدّاد الفاتورة (المحطة 4) */
.bill{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;color:var(--ink-2);font-size:14px}
.bill b{font-size:34px;line-height:1;font-weight:700;color:var(--ember);min-width:1.3em;text-align:center}
.bill b.bump{animation:bump .45s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ── الوضع المتحرك ── */
.live .tour{height:calc(100svh - 64px + var(--units,7)*62svh)}
.live .stage{
  position:sticky;top:calc(var(--head) + env(safe-area-inset-top));
  height:calc(100svh - var(--head) - env(safe-area-inset-top));
  display:grid;overflow:hidden;
}
.live .st{
  grid-area:1/1;min-height:0;padding:16px var(--gutter) 14px;gap:14px;
  grid-template-rows:minmax(0,1fr) var(--cap-h);
  pointer-events:none;
}
.live .st-ghost{display:grid}
.live .ph,.live .bd{width:auto;height:100%}
.live .st:not(.st-ghost) .ph{background:none;box-shadow:none}   /* الإطار يرسمه الشبح الثابت */
.live .st:not(.st-ghost) .ph::before,.live .st:not(.st-ghost) .ph::after{display:none}

/* تبدّل المحطات: الشاشة تتلاشى، والنص يصعد */
.live .st:not(.st-ghost) .scr,
.live .st .bd{opacity:0;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.live .st.is-on .scr,.live .st.is-on .bd{opacity:1}
.live .st .cap{opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.live .st.is-past .cap{transform:translateY(-14px)}
.live .st.is-on .cap{opacity:1;transform:none;transition-delay:.12s}
.live .cap{align-self:start;padding-inline-end:28px}   /* مكان شريط المحطات */

/* من الجوال إلى لوحة الكاشير: الجوال ينسحب واللوحة تتقدّم */
.live .ph-frame{transition:transform .6s var(--ease),opacity .45s var(--ease)}
.live .stage[data-view="board"] .ph-frame{transform:translateX(-40%) scale(.82);opacity:0}
.live .st .bd{transform:translateX(30%) scale(.94)}
.live .st.is-on .bd{transform:none}

/* شريط المحطات */
.live .rail{
  position:absolute;inset-inline-end:8px;bottom:14px;height:var(--cap-h);
  display:flex;flex-direction:column;justify-content:center;gap:0;z-index:3;
}
.rail button{
  width:28px;height:22px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.rail button::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--line-2);
  transition:height .3s var(--ease),background .3s;
}
.rail button.is-done::before{background:var(--ink-3)}
.rail button.is-on::before{height:18px;background:var(--ember)}

/* مكان مهمة قادمة — يُحذف مع بناء كل قسم */
.todo{
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);
  padding:44px 20px;text-align:center;color:var(--ink-3);font-size:14px;
}
.todo-dark{border-color:rgba(247,244,239,.25);color:rgba(247,244,239,.6)}

.foot{padding:28px 0 calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ground)}
.foot-in{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.foot-brand{font-weight:600}
.foot-sub{color:var(--ink-3);font-size:14px}

/* ── شاشات أعرض ── */
@media (min-width:760px){
  :root{--gutter:32px}
  .nav{display:flex}
  .sec{padding:96px 0}
  .hero{padding:80px 0 88px}
  .hero-cta .btn{flex:0 0 auto}

  /* الجولة: النص يمين والشاشة يسار */
  .st{grid-template-columns:1fr 1fr;align-items:center;max-width:var(--maxw);margin-inline:auto;padding-block:56px}
  .st .cap{order:-1}
  .st-board .bd{--base:1000;width:100%;aspect-ratio:1000/640;border-radius:18px;padding:6px}
  .st-board .scr{--base:1000;border-radius:12px}
  .live .st{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding-block:28px;gap:40px;width:100%;align-items:stretch}
  .live .cap{align-self:center;padding-inline-end:0}
  .live .st-board .bd{height:auto;width:100%;max-height:100%}
  .live .rail{inset-inline-end:auto;inset-inline-start:max(4px,calc((100vw - var(--maxw))/2 - 28px));top:0;bottom:0;height:auto}
  .cap p:last-child{font-size:17px}
}

/* من عطّل الحركة في جهازه */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* الإنجليزية: حروف لاتينية أضيق قليلاً */
html[lang="en"] h1{letter-spacing:-1px}
html[lang="en"] .pl-add b::after{content:" SAR"}
@media (max-width:430px){.brand-ar{display:none}.top-cta{padding:0 12px;font-size:13px}}
@media (min-width:760px){.top-in{gap:16px}}

/* الخط: Tajawal للموقع. الشاشات داخل الجوال تبقى بخط المنتج (Readex + Plex). */
.scr-in{--font-ui:'Readex Pro',system-ui,sans-serif;--font-num:'IBM Plex Sans Arabic',system-ui,sans-serif;font-family:var(--font-ui)}
.btn,.pl-toggle button,.cmp-pick button{font-weight:700}
.cap p:last-child,.lead{font-size:clamp(16.5px,4.4vw,19px)}