/* ============================================================
   «نقطة» — لفّة الورق
   المادّة: ورق حراريّ دافئ. التناقض: المتّصل ↔ المقطوع.
   عائلة خطّ واحدة · وزنان · ٧ أحجام · صبغتان · استدارة واحدة ·
   منحنى واحد · ثلاث مدد.
   ============================================================ */

@font-face{font-family:Plex;src:url(fonts/plex-ar-400.woff2) format("woff2");
  font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;src:url(fonts/plex-ar-600.woff2) format("woff2");
  font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;src:url(fonts/plex-la-400.woff2) format("woff2");
  font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;src:url(fonts/plex-la-600.woff2) format("woff2");
  font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  /* --- صبغتان لا ثالث لهما --- */
  --paper:#FBF8F4; --surface:#FFFFFF;
  --ink-1:#1A1714; --ink-2:#4A423A; --ink-3:#766B60; --ink-4:#A0958A;
  --orange:#D2490B; --orange-deep:#A8380A; --orange-tint:#FDF1E9;
  --line:#EAE3DA; --line-strong:#DBD1C4;

  /* --- ٧ درجات حجم لا غير --- */
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-20:1.25rem;
  --fs-28:clamp(1.35rem,2.6vw,1.75rem);
  --fs-40:clamp(1.75rem,4vw,2.5rem);
  --fs-56:clamp(2.6rem,7vw,5.25rem);    /* 84px — الثقل من الحجم */

  --radius:6px;                       /* واحدة. لا غير. */
  --ease:cubic-bezier(.23,1,.32,1);   /* واحد. لا غير. */
  --t-fast:120ms; --t-base:200ms; --t-slow:400ms;

  --shadow:0 1px 2px rgba(26,23,20,.04),0 2px 8px rgba(26,23,20,.04);
  --shadow-lift:0 2px 4px rgba(26,23,20,.05),0 12px 28px rgba(26,23,20,.08);
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:Plex,system-ui,"Segoe UI",sans-serif;
  font-size:var(--fs-16);line-height:1.75;             /* عربيّ: 1.75 */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- جهاز الخلفيّة: إيقاع لفّة الورق ----------
   خطوط التغذية الحراريّة. تمشي ولا تنقطع — هي الفكرة نفسها. */
.roll{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(26,23,20,.03) 0 1px,   /* تباين 1.06 مع الورق — نسيج لا ضجيج */
    transparent 1px 28px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}

h1,h2,h3{color:var(--ink-1);font-weight:600;line-height:1.25;margin:0;
  text-wrap:balance;letter-spacing:0}   /* صفر تتبّع — العربيّة تنكسر بغيره */
h1{font-size:var(--fs-56)}
h2{font-size:var(--fs-40)}
h3{font-size:var(--fs-20)}
p{margin:0;max-width:68ch}
strong,b{font-weight:600}   /* السقف وزنان — لا 700 */
a{color:var(--orange-deep);text-decoration-thickness:1px;text-underline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:clamp(1.15rem,4vw,2.5rem)}
section{padding-block:clamp(3.5rem,8vw,6rem)}
.stack{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.gap-32{gap:32px}

.eyebrow{font-size:var(--fs-12);font-weight:600;color:var(--orange-deep);
  letter-spacing:0;margin:0}
.lede{font-size:var(--fs-20);color:var(--ink-2);line-height:1.7;max-width:52ch}
.fine{font-size:var(--fs-14);color:var(--ink-3);margin:0;line-height:1.65}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- خطّ التثقيب: الفاصل بين الأقسام ---------- */
.perf{border:0;height:1px;margin:0;
  background:repeating-linear-gradient(to left,
    var(--line-strong) 0 5px, transparent 5px 11px)}

/* ---------- الأزرار — ستّ حالات لكلّ واحد ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 22px;border-radius:var(--radius);
  font:inherit;font-weight:600;font-size:var(--fs-14);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.btn-lg{min-height:50px;padding:14px 28px;font-size:var(--fs-16)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow)}
.btn-secondary{background:var(--surface);color:var(--ink-1);border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#BC4109;transform:translateY(-1px);box-shadow:var(--shadow-lift)}
  .btn-secondary:hover,.btn-ghost:hover{border-color:var(--ink-4);background:var(--surface)}
}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn[aria-disabled=true],.btn:disabled{opacity:.45;pointer-events:none}

.skip{position:absolute;top:0;inset-inline-start:16px;z-index:99;
  background:var(--orange);color:#fff;padding:10px 18px;
  border-radius:0 0 var(--radius) var(--radius);
  transform:translateY(-120%);transition:transform var(--t-fast) var(--ease)}
.skip:focus{transform:translateY(0)}

/* ---------- الهيدر ---------- */
.site-head{position:sticky;top:0;z-index:20;
  background:rgba(251,248,244,.86);backdrop-filter:blur(10px);
  border-block-end:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:64px;position:relative}
@media (min-width:940px){
  .head-in{display:grid;grid-template-columns:1fr auto 1fr}
}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink-1);font-weight:600;font-size:var(--fs-20)}
.brand-mark{width:26px;height:26px;border-radius:50%;background:var(--orange);
  display:block;flex:0 0 auto}
.nav{display:none;justify-self:center;gap:4px}
@media (min-width:940px){.nav{display:flex}}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--fs-14);font-weight:600;
  padding:8px 13px;border-radius:var(--radius);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
@media (hover:hover){.nav a:hover{color:var(--ink-1);background:rgba(26,23,20,.04)}}
.nav a[aria-current=page]{color:var(--orange-deep)}
.nav a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.head-cta{display:none;gap:8px;justify-self:end;align-items:center}
@media (min-width:560px){.head-cta{display:flex}}

/* ---------- قائمة الموبايل — بلا جافاسكربت ---------- */
.menu{position:relative}
@media (min-width:940px){.menu{display:none}}
.menu>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 14px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--surface);
  color:var(--ink-1);font-size:var(--fs-14);font-weight:600;
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{
  content:"";width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-base) var(--ease);
}
.menu[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.menu>summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.menu-panel{
  position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:30;
  min-width:14rem;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:6px;display:flex;flex-direction:column;
}
.menu-panel a{
  color:var(--ink-1);text-decoration:none;font-size:var(--fs-14);font-weight:600;
  padding:11px 14px;border-radius:var(--radius);min-height:44px;display:flex;align-items:center;
}
.menu-panel a[aria-current=page]{color:var(--orange-deep)}
.menu-panel a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
@media (hover:hover){.menu-panel a:hover{background:rgba(26,23,20,.04)}}

/* ---------- الهيرو ---------- */
.hero{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,5vw,3rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vw,3.25rem);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}}
.hero h1{max-width:15ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* الخيط: يمتدّ مرّة واحدة عند التحميل — «يمشي ولا ينقطع» */
.thread{height:2px;width:0;background:var(--orange);
  animation:thread var(--t-slow) var(--ease) .15s forwards}
@keyframes thread{to{width:72px}}
@media (prefers-reduced-motion:reduce){.thread{width:72px;animation:none}}

/* ---------- شريط الأرقام ---------- */
.proof{list-style:none;margin:clamp(2rem,5vw,3rem) 0 0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
@media (min-width:780px){.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
.proof li{background:var(--surface);padding:20px 16px;
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center}
.proof b{font-size:var(--fs-28);font-weight:600;color:var(--ink-1);line-height:1.15}
.proof span{font-size:var(--fs-12);color:var(--ink-3);line-height:1.5}

/* ---------- البطاقات ---------- */
.grid-2,.grid-3{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.15rem,3vw,1.6rem);
  box-shadow:var(--shadow);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}}
.card p{font-size:var(--fs-14);line-height:1.7}

.sec-head{display:flex;flex-direction:column;gap:12px;align-items:center;
  text-align:center;max-width:60ch;margin-inline:auto}
.sec-head .lede{max-width:56ch}
.sec-head .thread{margin-inline:auto}

/* ---------- مكان اللقطة ريثما تصل ---------- */
.shot{margin:0;display:flex;flex-direction:column;gap:10px}
.shot-pending{aspect-ratio:1.6;border:1px dashed var(--line-strong);
  border-radius:var(--radius);background:var(--surface);
  display:grid;place-items:center;text-align:center;padding:24px;
  color:var(--ink-3);font-size:var(--fs-14)}
.shot-pending b{display:block;color:var(--ink-1);font-size:var(--fs-16);margin-block-end:6px}
.shot figcaption{font-size:var(--fs-12);color:var(--ink-3);text-align:center}

/* ---------- الظهور عند التمرير ---------- */
.rv{opacity:1}                      /* بلا جافاسكربت: ظاهر — المحتوى قبل الحركة */
.js .rv{opacity:0;transform:translateY(12px)}
.rv.in{opacity:1;transform:none;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .rv.in{transition-duration:1ms}
}

/* ---------- وسم فراغ: صاخب عمداً، والبوّابة ترفض النشر معه ---------- */
.gap-mark{display:inline-block;padding:1px 7px;border-radius:var(--radius);
  font-size:var(--fs-12);font-weight:600;
  background:#FEE2E2;color:#991B1B;border:1px dashed #DC2626}

/* ============================================================
   أقسام الصفحات — نفس النظام: استدارة واحدة، منحنى واحد، وزنان.
   ============================================================ */

.center{align-items:center;text-align:center}
.center .lede,.center p{margin-inline:auto}
.center .thread{margin-inline:auto}
.center-cta{justify-content:center}

.page-hero{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.page-hero h1{max-width:20ch;margin-inline:auto}
.page-hero .lede{max-width:56ch}

/* ---------- رحلة الفاتورة: الخيط المتّصل ----------
   التناقض كلّه هنا — خطّ واحد يمرّ بالأربع خطوات ولا ينقطع. */
.feature-sec{background:linear-gradient(to bottom,rgba(210,73,11,.028),transparent 45%)}
.flow{list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;position:relative}
@media (min-width:860px){.flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flow li{position:relative;padding:0 0 28px;display:flex;flex-direction:column;gap:6px}
@media (min-width:860px){.flow li{padding:34px 20px 0;text-align:center;align-items:center}}
.flow h3{font-size:var(--fs-16)}
.flow .fine{max-width:26ch}
.flow-n{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:var(--fs-12);font-weight:600;
  background:var(--orange);color:#fff;position:relative;z-index:2;
}
/* الخيط نفسه — عموديّ على الموبايل، أفقيّ على الشاشة */
.flow li::before{
  content:"";position:absolute;z-index:1;background:var(--orange);opacity:.28;
  inset-inline-start:14px;top:30px;bottom:0;width:2px;
}
.flow li:last-child::before{display:none}
@media (min-width:860px){
  .flow li::before{inset-inline-start:50%;inset-inline-end:-50%;top:48px;bottom:auto;
    width:auto;height:2px}
  .flow li:last-child::before{display:none}
}
.flow-note{max-width:58ch;margin-inline:auto;text-align:center}

/* ---------- بطاقة ملاحظة ---------- */
.note{max-width:72ch;margin-inline:auto;border-inline-start:3px solid var(--orange)}
.note p{font-size:var(--fs-14)}

/* ---------- قوائم مؤشَّرة ---------- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.checks li{position:relative;padding-inline-start:26px;color:var(--ink-2);
  font-size:var(--fs-14);line-height:1.65}
.checks li::before{
  content:"";position:absolute;inset-inline-start:0;top:8px;
  width:12px;height:7px;border-inline-start:2px solid var(--orange);
  border-block-end:2px solid var(--orange);transform:rotate(-45deg);
}
[dir=ltr] .checks li::before{transform:rotate(-45deg) scaleX(1)}

/* ---------- مجموعات المميزات ---------- */
.fgroup h2{font-size:var(--fs-20)}

/* ---------- صفحة مستند ---------- */
.doc{max-width:72ch;margin-inline:auto;display:flex;flex-direction:column;
  gap:clamp(1.75rem,4vw,2.5rem)}
.doc-sec{display:flex;flex-direction:column;gap:12px}
.doc-sec h2{font-size:var(--fs-28)}
.doc-sec p{max-width:none}

/* ---------- جدول المواصفات ---------- */
.spec{margin:0;display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  max-width:46rem;margin-inline:auto}
.spec>div{background:var(--surface);display:flex;flex-wrap:wrap;gap:6px 16px;
  justify-content:space-between;padding:13px 18px}
.spec dt{color:var(--ink-3);font-size:var(--fs-14);margin:0}
.spec dd{margin:0;color:var(--ink-1);font-size:var(--fs-14);font-weight:600}

/* ---------- الأسعار ---------- */
.price-grid{align-items:stretch;max-width:64rem;margin-inline:auto;width:100%}
.plan{justify-content:flex-start}
.plan-featured{border-color:var(--orange);box-shadow:var(--shadow-lift)}
.price{font-size:var(--fs-28);font-weight:600;color:var(--ink-1);line-height:1.15;margin:0}

/* ---------- الأسئلة ---------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;max-width:56rem;margin-inline:auto;width:100%}
.faq details{border-block-end:1px solid var(--line)}
.faq details:last-child{border-block-end:0}
.faq summary{
  cursor:pointer;padding:15px clamp(1rem,3vw,1.4rem);font-weight:600;color:var(--ink-1);
  list-style:none;display:flex;align-items:center;gap:12px;min-height:44px;
  font-size:var(--fs-16);transition:background var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{background:var(--paper)}}
.faq summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.faq summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;
  border-right:2px solid var(--orange-deep);border-bottom:2px solid var(--orange-deep);
  transform:rotate(45deg);transition:transform var(--t-base) var(--ease);
}
.faq details[open] summary::before{transform:rotate(-135deg)}
.faq details p{padding:0 clamp(1rem,3vw,1.4rem) 17px;margin:0;max-width:70ch;
  font-size:var(--fs-14);color:var(--ink-2)}

/* ---------- شريط الدعوة ---------- */
.band{background:var(--orange-tint);border-block:1px solid var(--line)}
.band h2{font-size:var(--fs-28)}

/* ---------- 404 ---------- */
.nf{min-height:58svh;display:grid;align-items:center}
.nf-code{font-size:var(--fs-56);color:var(--line-strong);line-height:1;font-weight:600}
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center}

/* ---------- الذيل ---------- */
.site-foot{background:var(--surface);border-block-start:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,3.5rem)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:720px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.site-foot h4{margin:0 0 10px;font-size:var(--fs-12);font-weight:600;color:var(--ink-3)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-foot a:not(.brand){color:var(--ink-2);text-decoration:none;font-size:var(--fs-14)}
@media (hover:hover){.site-foot a:not(.brand):hover{color:var(--orange-deep)}}
.site-foot a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- وسم مسودّة ---------- */
.gap-draft{background:#FEF3C7;color:#92400E;border-color:#D97706}

/* ---------- شاشات ضيّقة ---------- */
@media (max-width:520px){
  .hero-cta{flex-direction:column;align-items:stretch;width:100%}
  .hero-cta .btn{width:100%}
  .nf-links{flex-direction:column;align-items:stretch}
}

/* شريط أرقام صفحة المميزات — بلا حشو عموديّ فوق ما يلزم */
.numbers-sec{padding-block:0 clamp(2rem,5vw,3rem)}
.numbers-sec .proof{margin-top:0}

/* ============================================================
   الطابعة والفاتورة — بطل الهيرو.
   مخرَجُ البرنامج نفسه، مبنيٌّ من حروفٍ وخطوط لا من رسم.
   ============================================================ */
.printer{position:relative;width:100%;max-width:390px;margin-inline:auto;
  padding-block-start:30px}

/* فتحة الطابعة: الشقّ الذي ينزل منه الورق */
.printer-slot{
  position:absolute;inset-inline:0;top:0;height:30px;border-radius:var(--radius);
  background:linear-gradient(to bottom,#2A2521,#1A1714);
  box-shadow:0 2px 6px rgba(26,23,20,.22);
}
.printer-slot::after{
  content:"";position:absolute;inset-inline:14px;bottom:5px;height:3px;border-radius:2px;
  background:#0C0A09;box-shadow:inset 0 1px 1px rgba(0,0,0,.8);
}

/* الورق: يطول وهو ينطبع */
.paper{
  position:relative;overflow:hidden;height:0;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(26,23,20,.06),0 14px 30px rgba(26,23,20,.10);
  font-size:var(--fs-14);line-height:1.55;color:var(--ink-1);
  /* بلا انتقال على height: الورق يتقدّم بخطوة لكلّ سطر — كالطابعة.
     والحركة الوحيدة المتحرّكة هي opacity على السطر، كما تقتضي القاعدة. */
}
/* حافّة القصّ المسنّنة أسفل الورق */
.paper::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:9px;
  background:var(--paper);
  /* أسنان القصّ: مثلّثات متجاورة تقضم أسفل الورقة */
  -webkit-mask:
    linear-gradient(45deg,#000 50%,#0000 0) 0 100%/14px 9px repeat-x,
    linear-gradient(-45deg,#000 50%,#0000 0) 7px 100%/14px 9px repeat-x;
  mask:
    linear-gradient(45deg,#000 50%,#0000 0) 0 100%/14px 9px repeat-x,
    linear-gradient(-45deg,#000 50%,#0000 0) 7px 100%/14px 9px repeat-x;
}
.paper-inner{padding:18px 22px 26px}

.r-line{opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.r-line.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.r-line{transition-duration:1ms}}

.r-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.r-row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.r-shop{text-align:center;font-size:var(--fs-20);font-weight:600;line-height:1.3}
.r-meta{text-align:center;color:var(--ink-3);font-size:var(--fs-12)}
.r-rule{height:1px;margin-block:9px;
  background:repeating-linear-gradient(to left,var(--line-strong) 0 4px,transparent 4px 8px)}
.r-total{font-size:var(--fs-16);font-weight:600}
.r-dim{color:var(--ink-3)}

/* سطر الحالة: الوعد كلّه ينتهي هنا */
.r-status{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-block-start:10px;padding:7px 10px;border-radius:var(--radius);
  font-weight:600;text-align:center;line-height:1.4}
.r-status[data-state=idle],.r-status[data-state=sending]{background:var(--paper);color:var(--ink-3)}
.r-status[data-state=ok]{background:var(--orange-tint);color:var(--orange-deep)}
.r-status .tick{width:13px;height:8px;flex:0 0 auto;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  transition:transform var(--t-base) var(--ease)}
.r-status[data-state=ok] .tick{transform:rotate(-45deg) scale(1)}
.r-status .lbl-send{display:none}
.r-status[data-state=sending] .lbl-send{display:inline}
.r-status[data-state=sending] .lbl-ok,.r-status[data-state=sending] .tick{display:none}
.r-status[data-state=idle] .lbl-ok,.r-status[data-state=idle] .lbl-send,
.r-status[data-state=idle] .tick{visibility:hidden}

/* الذيل: التعليق وزرّ الإيقاف */
.shot-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.r-toggle{
  font:inherit;font-size:var(--fs-12);font-weight:600;color:var(--ink-3);
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 12px;min-height:32px;cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
@media (hover:hover){.r-toggle:hover{color:var(--ink-1);border-color:var(--ink-4)}}
.r-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ============================================================
   عرض الانقطاع: النت بينقطع، البيع بيكمّل، الطابور بيفضى.
   ============================================================ */
.offline-demo{
  max-width:44rem;margin-inline:auto;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.od-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 18px;border-block-end:1px solid var(--line)}
.od-net{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-14);
  color:var(--ink-3)}
.od-net b{font-weight:600;color:var(--ink-1)}
.od-net::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--ink-4);
  transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.od-net[data-state=on]::before{background:#3F8F4F;box-shadow:0 0 0 3px rgba(63,143,79,.16)}
.od-net[data-state=off]::before{background:var(--orange);box-shadow:0 0 0 3px rgba(210,73,11,.16)}

.od-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line)}
.od-stats>div{background:var(--surface);padding:18px 12px;display:flex;
  flex-direction:column;gap:3px;align-items:center;text-align:center}
.od-stats b{font-size:var(--fs-28);font-weight:600;color:var(--ink-1);line-height:1.1;
  font-variant-numeric:tabular-nums;display:block}
.od-stats span{font-size:var(--fs-12);color:var(--ink-3);line-height:1.4}
.od-queue{color:var(--orange-deep) !important}

/* نبضة صغيرة عند تغيّر الرقم — transform وopacity فقط */
@keyframes pop{from{transform:translateY(-3px);opacity:.35}to{transform:none;opacity:1}}
.pop{animation:pop var(--t-base) var(--ease)}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}

.od-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:13px 18px;border-block-start:1px solid var(--line)}
.od-say{margin:0;font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;max-width:52ch}
.od-toggle{
  font:inherit;font-size:var(--fs-12);font-weight:600;color:var(--ink-3);
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 14px;min-height:32px;cursor:pointer;flex:0 0 auto;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
@media (hover:hover){.od-toggle:hover{color:var(--ink-1);border-color:var(--ink-4)}}
.od-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ============================================================
   v3 — المشهد: هيرو بارتفاع الشاشة، ورق بمنظور، ختم مطّاطي،
   عناوين تُكشف كلمةً كلمة، وأرقام تعدّ. كلّه transform/opacity.
   ============================================================ */

/* ---- الهيرو مشهدٌ لا بطاقة ---- */
.hero{position:relative;min-height:calc(100svh - 64px);display:flex;align-items:center;
  padding-block:clamp(2.5rem,6vw,4rem)}
.hero .wrap{width:100%}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 60% at 30% 52%,rgba(210,73,11,.11),transparent 72%)}
[dir=ltr] .hero-glow{background:radial-gradient(52% 60% at 70% 52%,rgba(210,73,11,.11),transparent 72%)}
.hero h1{max-width:14ch}

/* ---- الورق بمنظور ثلاثيّ الأبعاد ---- */
.printer{perspective:1400px;max-width:440px}
.paper{
  --ry:-7deg;--rx:3deg;
  transform-origin:50% 0;
  transform:rotateY(var(--ry)) rotateX(var(--rx));
  transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);
  box-shadow:0 2px 6px rgba(26,23,20,.07),0 34px 60px -22px rgba(26,23,20,.32);
  will-change:transform;
}
[dir=rtl] .paper{--ry:7deg}
/* القصّ: الورقة تنفصل وتسقط */
.paper.cut{
  transition:transform 420ms cubic-bezier(.4,.14,1,1),opacity 360ms cubic-bezier(.4,.14,1,1);
  transform:rotateY(var(--ry)) rotateX(var(--rx)) translateY(54px) rotate(2.5deg);opacity:0}
/* [dir] يرفع الخصوصيّة فوق [dir=rtl] .paper — وإلا بقي الميل على الموبايل */
@media (max-width:979px){[dir] .paper{--ry:0deg;--rx:0deg}}

/* ---- الختم المطّاطي: لحظة الحقيقة ---- */
.stamp{
  /* في منتصف الورقة أفقيّاً: الفراغ بين عمود الأسماء وعمود الأرقام، فلا يغطّي رقماً */
  position:absolute;left:50%;bottom:96px;z-index:3;pointer-events:none;
  padding:6px 16px;border-radius:var(--radius);
  border:3px solid var(--orange);
  box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 4px var(--orange);
  color:var(--orange);font-size:var(--fs-28);font-weight:600;line-height:1.15;
  letter-spacing:0;white-space:nowrap;
  mix-blend-mode:multiply;
  opacity:0;transform:translateX(-50%) rotate(-9deg) scale(1.7);
}
[dir=ltr] .stamp{letter-spacing:.06em}
.stamp.on{opacity:.92;transform:translateX(-50%) rotate(-9deg) scale(1);
  transition:transform 240ms cubic-bezier(.2,1.3,.4,1),opacity 120ms var(--ease)}
@media (prefers-reduced-motion:reduce){.stamp.on{transition:none}}

/* ---- كشف الكلمات ---- */
.w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-block-end:.16em;margin-block-end:-.16em}
.wi{display:inline-block;will-change:transform}
.js.gsap .wi{transform:translateY(112%)}
@media (prefers-reduced-motion:reduce){.js.gsap .wi{transform:none}}

/* ---- الفواصل تُقصّ عند المرور ---- */
.js.gsap .perf{transform:scaleX(0);transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){.js.gsap .perf{transform:none}}

/* ---- رمز الفاتورة يمشي على الخيط ---- */
.flow-wrap{position:relative}
.flow-token{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 4px var(--orange-tint),0 0 0 5px rgba(210,73,11,.35);
  z-index:3;pointer-events:none;display:none}
.js.gsap .flow-token{display:block;opacity:0;transition:opacity var(--t-slow) var(--ease) .2s}
.js.gsap .flow-wrap:has(.flow.in) .flow-token{opacity:1}

/* ---- شريط الأرقام: أثقل حضوراً ---- */
.proof b{font-size:var(--fs-40)}

/* ============================================================
   لوحة الميزات (bento): أحجام متنوّعة، كثافة عالية، نظام واحد.
   ============================================================ */
.showcase-sec .proof{margin-top:0}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;grid-auto-flow:dense}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1rem,2.2vw,1.35rem);box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
@media (min-width:700px){.t-w{grid-column:span 2}.t-xl{grid-column:span 2;grid-row:span 2}}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}}
a.tile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.tile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tile h3{font-size:var(--fs-20);line-height:1.3}
.t-xl h3{font-size:var(--fs-28)}
.tile-n{margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:end;flex:0 0 auto;
  line-height:1.05}
.tile-n b{font-size:var(--fs-28);font-weight:600;color:var(--orange-deep)}
.t-xl .tile-n b{font-size:var(--fs-40)}
.tile-n span{font-size:var(--fs-12);color:var(--ink-3);max-width:12ch;line-height:1.35;margin-top:3px}
.tile-p{margin:0;font-size:var(--fs-14);color:var(--ink-2);line-height:1.6}
.t-xl .tile-p{font-size:var(--fs-16);max-width:34ch}
.t-xl .chips{margin-top:0}
.tile-shot{margin-top:auto}   /* الصورة تُثبَّت في أسفل البلاطة فتملأ ارتفاعها */
.chips{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:var(--fs-12);line-height:1.4;padding:4px 9px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);white-space:normal}
.t-xl .chips li{font-size:var(--fs-14);padding:6px 11px}
.showcase-sec .center{text-align:center}

/* ============================================================
   الاتّجاه الغامق السينمائيّ — قرار هاشم.
   نفس النظام (صبغتان، استدارة واحدة، منحنى واحد) لكن الأرضيّة
   حبرٌ عميق، والبرتقاليّ يتوهّج، والورقة البيضاء تلمع في الوسط.
   الأسطح على الغامق = طبقات بيضاء شفّافة، لا رماديّات مصمتة.
   ============================================================ */
:root{
  --paper:#12100E; --surface:rgba(255,255,255,.045);
  --ink-1:#F7F2EB; --ink-2:#D8CFC4; --ink-3:#A89D91; --ink-4:#6F665D;
  --orange:#D2470E; --orange-deep:#F58A50; --orange-tint:rgba(224,82,26,.16);   /* أبيض فوقه ≥ 4.5 */
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.17);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 24px 48px rgba(0,0,0,.5);
}
html{color-scheme:dark}
body{background:var(--paper)}
.roll{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 28px)}
.site-head{background:rgba(18,16,14,.78)}
.nav a[aria-current=page],.menu-panel a[aria-current=page]{color:var(--orange-deep)}
.btn-primary{color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 8px 28px rgba(224,82,26,.35)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:#F0602A;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 36px rgba(224,82,26,.5)}}
.btn-secondary{background:rgba(255,255,255,.06);color:var(--ink-1)}
.hero-glow{background:radial-gradient(48% 58% at 30% 52%,rgba(224,82,26,.28),transparent 70%)}
[dir=ltr] .hero-glow{background:radial-gradient(48% 58% at 70% 52%,rgba(224,82,26,.28),transparent 70%)}
.eyebrow{color:var(--orange-deep)}
.band{background:rgba(224,82,26,.10)}
.chips li{background:rgba(255,255,255,.04)}
.faq summary:hover{background:rgba(255,255,255,.04)}
.menu>summary,.menu-panel{background:#1B1815}
.printer-slot{background:linear-gradient(to bottom,#4A423A,#2A2521);box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.55)}
.feature-sec{background:linear-gradient(to bottom,rgba(224,82,26,.08),transparent 45%)}
.gap-mark{background:#3B1212;color:#FCA5A5;border-color:#DC2626}
.gap-draft{background:#3B2A08;color:#FCD34D;border-color:#D97706}
.nf-code{color:rgba(255,255,255,.12)}
.od-net[data-state=on]::before{background:#5FC46E;box-shadow:0 0 0 3px rgba(95,196,110,.2)}
.r-toggle,.od-toggle{color:var(--ink-3)}

/* الورقة تبقى جسماً فاتحاً يلمع على الحبر: نعيد رموز الفاتح داخلها فقط */
.paper{
  --paper:#FBF8F4; --surface:#FFFFFF;
  --ink-1:#1A1714; --ink-2:#4A423A; --ink-3:#766B60; --ink-4:#A0958A;
  --line:#EAE3DA; --line-strong:#DBD1C4; --orange-tint:#FDF1E9; --orange-deep:#A8380A;
  background:#FFFFFF;
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 40px 80px -24px rgba(0,0,0,.7),0 0 90px rgba(224,82,26,.22);
}
.paper::after{background:#12100E}

/* ============================================================
   المنتج على الشاشة — لقطات حقيقيّة من البرنامج.
   ============================================================ */
.app-shot{display:block;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.45),0 48px 90px -28px rgba(0,0,0,.75),0 0 110px rgba(224,82,26,.20)}
.app-shot img{display:block;width:100%;height:auto}
.app-shot-wide{max-width:960px;margin-inline:auto;box-shadow:0 2px 6px rgba(0,0,0,.45),0 40px 80px -30px rgba(0,0,0,.7)}

/* الهيرو: الشاشة هي البطل بمنظور خفيف، والطابعة بطاقة صغيرة تطبع فوق زاويتها */
.app-hero{position:relative;perspective:1600px;display:flex;flex-direction:column;gap:10px}
.app-hero .app-shot{transform:rotateY(var(--ry,-6deg)) rotateX(2deg) scale(1.06);transform-origin:50% 40%;
  transition:transform var(--t-slow) var(--ease);will-change:transform}
[dir=rtl] .app-hero .app-shot{--ry:6deg}
@media (max-width:979px){[dir] .app-hero .app-shot{--ry:0deg;transform:none}}
.app-hero figcaption{text-align:center}
/* الورقة بيضاء والشاشة فاتحة — فلتتعلّق الطابعة على حافّة الشاشة وثلثاها فوق الحبر الغامق حتى تُقرأ */
.app-printer{position:absolute;inset-inline-end:-120px;top:9%;width:min(40%,250px);z-index:4}
/* لوحة حبرٍ خلف الطابعة: تُقرأ الورقة البيضاء حتى فوق الشاشة الفاتحة */
.app-printer::before{content:"";position:absolute;inset:-14px -16px -18px;border-radius:var(--radius);z-index:-1;
  background:rgba(18,16,14,.82);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
@media (min-width:980px){.hero{overflow:clip}}   /* أمان: لا تجاوز أفقيّ من التعليق */
.app-printer .printer{max-width:none;padding-block-start:22px}
.app-printer .printer-slot{height:22px}
.app-printer .paper{font-size:var(--fs-12);--ry:0deg;--rx:0deg;
  box-shadow:0 2px 6px rgba(0,0,0,.4),0 30px 60px -20px rgba(0,0,0,.75),0 0 60px rgba(224,82,26,.25)}
.app-printer .paper-inner{padding:12px 14px 18px}
.app-printer .r-shop{font-size:var(--fs-14)}
.app-printer .r-total{font-size:var(--fs-14)}
.app-printer .stamp{font-size:var(--fs-20);bottom:64px}
.app-printer .shot-foot,.app-printer .fine{display:none}
.app-printer .r-toggle{display:none}
@media (max-width:979px){
  .app-printer{position:static;width:100%;max-width:340px;margin-inline:auto}
  .app-printer .shot-foot{display:flex}.app-printer .r-toggle{display:inline-block}
}
/* زرّ الإيقاف يبقى متاحاً للوصوليّة على الشاشات الكبيرة: نضعه تحت الصورة */
.app-hero>.r-toggle-host{display:flex;justify-content:center}

/* صور البلاطات */
.tile-shot{margin-top:6px;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.tile-shot img{display:block;width:100%;height:auto}

/* ---------- سعر واحد ---------- */
.plan-one{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:60rem;margin-inline:auto;width:100%}
@media (min-width:860px){.plan-one{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);align-items:start}}
.plan-main{background:var(--surface);border:1px solid var(--orange);border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-lift)}
.plan-price{margin:0;display:flex;align-items:baseline;gap:10px;line-height:1}
.plan-price b{font-size:var(--fs-56);font-weight:600;color:var(--ink-1)}
.plan-price span{font-size:var(--fs-20);color:var(--ink-2)}
.plan-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
@media (max-width:560px){.plan-feats{grid-template-columns:1fr}}
.plan-addons{margin:0;max-width:none}
.plan-addons dt small{display:block;font-size:var(--fs-12);color:var(--ink-3);margin-top:2px;max-width:30ch}
.plan-addons dd{font-size:var(--fs-16);color:var(--orange-deep)}

/* ---------- تكبير الصور ---------- */
.app-shot,.tile-shot{cursor:zoom-in}
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:96vh;width:auto;color:var(--ink-1)}
.lb::backdrop{background:rgba(10,8,7,.86);backdrop-filter:blur(6px)}
.lb-inner{display:flex;flex-direction:column;gap:10px;align-items:center}
.lb img{display:block;max-width:min(96vw,1600px);max-height:84vh;width:auto;height:auto;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.lb-cap{font-size:var(--fs-14);color:var(--ink-2);text-align:center;max-width:70ch;margin:0}
.lb-close{position:fixed;top:14px;inset-inline-end:14px;min-width:44px;min-height:44px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.2);background:rgba(20,17,14,.8);color:#fff;font:inherit;font-size:var(--fs-16);cursor:pointer}
.lb-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .lb[open]{animation:lb-in var(--t-base) var(--ease)}
  @keyframes lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
}

/* ---------- تملكه، ولا يملكك ---------- */
.own-card{border-color:rgba(255,255,255,.14)}
.own-big{margin:0;font-size:var(--fs-40);font-weight:600;color:var(--orange-deep);line-height:1.1}
.own-card h3{font-size:var(--fs-20)}
.own-card p.muted{font-size:var(--fs-14)}

/* ---------- الصفحات القانونيّة ---------- */
.legal-doc{max-width:74ch;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(1.8rem,4vw,2.6rem)}
.legal-sec{display:flex;flex-direction:column;gap:12px;padding-block:0}
.legal-sec h2{font-size:var(--fs-24,1.5rem)}
.legal-sec p{color:var(--ink-2);max-width:none;line-height:1.85}
.foot-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* ---------- سطر الاعتماد ---------- */
.foot-bottom{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.credit{margin:0;text-align:center;color:var(--ink-3)}
.credit a{color:var(--orange-deep);text-decoration:none;font-weight:600}
.credit a:hover{text-decoration:underline}

/* ---- tune: الجافاسكربت يحسب --p والـCSS ترسم (فكرة StringTune، بلا مكتبة) ---- */
.js.tune [data-read] .rw{color:var(--ink-1);opacity:calc(.32 + .68 * clamp(0, var(--p,1) * var(--n,1) - var(--i,0), 1));transition:opacity .25s var(--ease)}
.js.tune .tile[data-p] picture,.js.tune figure.shot[data-p] picture{display:block;transform-origin:50% 100%;
  transform:perspective(1400px) rotateX(calc((1 - var(--p,1)) * 9deg)) scale(calc(.965 + var(--p,1) * .035))}
@media (prefers-reduced-motion:reduce){.js.tune [data-read] .rw{opacity:1}.js.tune .tile[data-p] picture,.js.tune figure.shot[data-p] picture{transform:none}}

/* ---- البيان المثبَّت: جملة تُضاء كلمةً كلمة عبر 240vh من التمرير ---- */
.manifesto{height:240vh;position:relative}
.manifesto .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 clamp(16px,6vw,80px);overflow:hidden}
.mani{margin:0;max-width:20ch;text-align:center;font-size:clamp(2rem,5.4vw,4.8rem);font-weight:600;line-height:1.3;color:var(--ink-1);text-wrap:balance}
.mani .ml{display:inline}
.mani em{font-style:normal;color:var(--orange-deep)}
.js.tune .mani .rw{opacity:calc(.14 + .86 * clamp(0, var(--p,1) * var(--n,1) - var(--i,0), 1));transition:opacity .2s var(--ease)}
.mani-bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--orange);transform-origin:var(--bar-origin,right);transform:scaleX(var(--p,1));opacity:.9}
[dir=ltr] .mani-bar{--bar-origin:left}
@media (max-width:700px){.manifesto{height:200vh}.mani{font-size:clamp(1.7rem,7.5vw,2.6rem)}}
@media (prefers-reduced-motion:reduce){.manifesto{height:auto}.manifesto .pin{position:static;height:auto;padding-block:clamp(56px,10vw,120px)}.js.tune .mani .rw{opacity:1}.mani-bar{display:none}}
.js.tune .mani em .rw{color:var(--orange-deep)}