/* ═══════════ site_pomo.css — صفحات الموقع العامة على «طقم خافت» ═══════════
   أمر فارس ١٩ سبتمبر ٢٠٢٦: «غيّر كل الصفحات وخلّها بنفس الأسلوب حق خافت الجديد»
   و«التزم بالنتيجة النهائية اللي طلعت معنا» — المرجع: khafet-rizq-design-kit/khafet/redesign/index.html
   (لغة FocusPomo من Refero app 181). يلغي Superr على الصفحة الرئيسية (DECISIONS ١٩ سبتمبر).

   القيم حرفيًا من الطقم:
     أرضية #F1E9DF · مجموعة #E7DDD1 · بطاقة #FAF6F1 · خط فاصل #E2D7CA
     حبر #3A3029 / #5E5046 / #8E8175 · بنّي #4E3F35 · ذهبي الزرّ #F5C518 بنصّ الحبر
     زوايا ٣٢/٢٦/٢٠/١٤ · كبسولات ٩٩٩ · عناوين Baloo 800 · بلاطات ملوّنة بتدرّج ولمعة
     ألوان البلاطات: تركواز #27B9B5 · أصفر #F0B21A · أزرق #3796D3 · برتقالي #EC8434 · وردي #E45C86 · بنفسجي #9460DC · أخضر #46B064 · مرجاني #DE6650
   الحركة: نابض cubic-bezier(.34,1.56,.64,1) للضغط · خروج cubic-bezier(.22,1,.36,1) للدخول المتتابع.
   قراءة: ذهبي الطقم لا يُكتب به نصّ فوق البيج (تباين ٢٫٦) — النص المميّز بنّي ذهبي #7A5300 (٥٫٣)،
   والكلمة المبرزة في العنوان يُظلَّل خلفها بالذهبي كفقاعة الطقم لا تُلوَّن.
   يُحمَّل آخر الرأس في كل صفحة عامة: <link rel="stylesheet" href="site_pomo.css?v=N">
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Baloo2';src:url(vendor/fonts/baloo2-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Baloo2';src:url(vendor/fonts/baloo2-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Tajawal';src:url(vendor/fonts/tajawal-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url(vendor/fonts/tajawal-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url(vendor/fonts/tajawal-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Tajawal';src:url(vendor/fonts/tajawal-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  /* الطقم */
  --pm-bg:#F1E9DF; --pm-group:#E7DDD1; --pm-card:#FAF6F1; --pm-line:#E2D7CA; --pm-sheet:#EFE5D9;
  --pm-ink:#3A3029; --pm-ink2:#5E5046; --pm-mute:#8E8175; --pm-brown:#4E3F35;
  --pm-gold:#F5C518; --pm-gold-d:#B8860B; --pm-gold-l:#FBF1C9; --pm-gold-ll:#FDF8E7; --pm-gold-ink:#7A5300;
  --pm-teal:#27B9B5; --pm-yellow:#F0B21A; --pm-blue:#3796D3; --pm-orange:#EC8434; --pm-pink:#E45C86; --pm-purple:#9460DC; --pm-green:#46B064; --pm-coral:#DE6650;
  --pm-spring:cubic-bezier(.34,1.56,.64,1); --pm-out:cubic-bezier(.22,1,.36,1);
  --pm-head:'Baloo2','Tajawal',system-ui,sans-serif;

  /* نظام Superr (index · school · academy · pay) */
  --paper:var(--pm-bg); --surface:var(--pm-card); --surface-2:var(--pm-group); --sand:var(--pm-group);
  --line:var(--pm-line); --line-2:var(--pm-line);
  --ink:var(--pm-ink); --ink-2:var(--pm-ink2); --ink-3:var(--pm-ink2); --head:var(--pm-ink);
  --marker:var(--pm-gold); --accent:var(--pm-gold-ink); --accent-2:var(--pm-gold-ink); --accent-tint:var(--pm-gold-ll);
  --stk-pink:var(--pm-pink); --stk-sky:var(--pm-blue); --stk-sprout:var(--pm-green);
  --brand:var(--pm-ink); --good:var(--pm-ink); --warn:#B45309; --warn-tint:var(--pm-gold-ll);
  --on-dark:#FFF8EF; --on-dark-2:#E9DCCD; --band:var(--pm-group);
  --f-display:var(--pm-head); --w-display:800;
  --r-s:14px; --r-m:20px; --r-l:26px; --r-pill:999px;
  --shadow:none; --shadow-lift:none;
  --nb-ink:transparent; --nb-r-card:26px; --nb-sh-card:none;
  /* نظام tokens.css (teachers · privacy · terms · try · hub) */
  --bg:var(--pm-bg); --text:var(--pm-ink); --muted:var(--pm-mute);
  --border:var(--pm-line); --text-2:var(--pm-ink2); --color-bg:var(--pm-bg); --color-fg:var(--pm-ink); --color-accent:var(--pm-gold-ink); --color-muted:var(--pm-mute); --color-border:var(--pm-line);
  /* نظام teachers · status */
  --navy:var(--pm-brown); --navy2:var(--pm-ink); --gold:var(--pm-gold); --goldD:var(--pm-gold-ink); --goldL:var(--pm-gold-l);
  --sec:var(--pm-ink2); --faint:var(--pm-mute); --card:var(--pm-card); --ok:#15803D;
  color-scheme:only light;
}

/* الصور بسمتَي width/height (fix_powerdesign) تحتفظ بنسبتها — كانت صورة واجهة المدارس بطول ١٤٠٠ على الجوال */
:where(img){height:auto}

/* ───── الأرضية والنص ───── */
html,body{background:var(--pm-bg)!important;color:var(--pm-ink)}
body{font-family:'Tajawal',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--pm-head)!important;font-weight:800!important;line-height:1.4;letter-spacing:0;-webkit-text-stroke:0!important;paint-order:normal!important}
::selection{background:var(--pm-gold-l)}

/* الكلمة المبرزة في العنوان: فقاعة ذهبية خلفها لا لون نصّ (قراءة) */
.display em,.display .hl,h1 em,h2 em{font-style:normal;color:var(--pm-ink)!important;
  background:linear-gradient(180deg,transparent 52%,var(--pm-gold) 52%,var(--pm-gold) 84%,transparent 84%);
  border-radius:6px;padding-inline:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ───── الشريط العلوي ───── */
.nav,header.nav,.top,.topbar{background:rgba(241,233,223,.86)!important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:0!important;box-shadow:none!important}

/* ───── الأزرار: كبسولات الطقم ───── */
.btn,.cta,.button,a.btn,button.btn{border-radius:999px!important;border:0!important;min-height:56px;padding-inline:28px;
  font-family:var(--pm-head)!important;font-weight:800!important;font-size:18px;line-height:1.4;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  transition:transform .28s var(--pm-spring),box-shadow .2s,background-color .2s,filter .2s!important}
.btn:hover{transform:scale(1.02)!important}
.btn:active{transform:scale(.95)!important}
/* الرئيسي: ذهبي بنصّ الحبر وظلّ ملوّن ناعم (.pill.gold) — و.btn المجرّد في pay هو الرئيسي */
.btn-1,.btn.primary,.btn-primary,.cta-primary,.b1,.cta,.btn:not(.btn-1):not(.btn-2):not(.b2):not(.btn-dark):not(.btn-ghost):not(.secondary):not(.dark){background:var(--pm-gold)!important;color:var(--pm-ink)!important;
  box-shadow:0 10px 22px -10px rgba(184,134,11,.8)!important}
.btn-1:hover{background:#F7CC2E!important}
.btn-1 .lead{color:var(--pm-ink)!important}
/* الثانوي: رملي هادئ (.pill.soft) */
.btn-2,.b2,.btn.secondary,.btn-ghost{background:var(--pm-group)!important;color:var(--pm-ink2)!important;box-shadow:none!important}
.btn-2:hover{background:#DFD3C5!important}
/* الداكن: بنّي (.pill.brown) */
.btn-dark,.btn.dark{background:var(--pm-brown)!important;color:#FFF8EF!important;box-shadow:0 10px 22px -10px rgba(58,48,41,.7)!important}
.nav .btn,.nav-act .btn{min-height:48px;padding-inline:20px;font-size:16px}

/* ───── الشارات الصغيرة ───── */
.eyebrow,.chip,.tag,.badge{background:var(--pm-group)!important;color:var(--pm-ink2)!important;border:0!important;border-radius:999px!important;font-weight:700}
.eyebrow b{color:var(--pm-gold-ink)!important}
.aside-hand{color:var(--pm-gold-ink)!important}

/* ───── البطاقات: بلا حدّ ولا ظلّ، زوايا ٢٦ ───── */
.step,.tri,.cmp,.fam,.step4,.b2b-c,.card,.box,.panel,.tile-card,.dd,.paper,.feat,.stage,.like{
  background:var(--pm-card)!important;border:0!important;border-radius:26px!important;box-shadow:none!important}
.like{background:var(--pm-group)!important}

/* خطوات «كيف»: الرقم بلاطة ملوّنة كأيقونات الطقم */
.step-n{width:40px!important;height:40px!important;border-radius:13px!important;border:0!important;color:#fff!important;
  font-family:var(--pm-head);font-weight:800;font-size:18px!important;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c,var(--pm-orange)) 72%,#fff) 0%,var(--c,var(--pm-orange)) 55%,color-mix(in srgb,var(--c,var(--pm-orange)) 88%,#000) 100%)!important;
  box-shadow:0 10px 18px -10px color-mix(in srgb,var(--c,var(--pm-orange)) 85%,transparent),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08)!important}
.s-or{--c:var(--pm-orange)} .s-sky{--c:var(--pm-blue)} .s-sprout{--c:var(--pm-green)} .s-dew{--c:var(--pm-teal)}
.step-t{font-family:var(--pm-head)!important;font-weight:800!important}

/* القوائم المرقّمة: رقم في فقاعة ذهبية */
.like-l b.num,.like-l .num{background:var(--pm-gold);color:var(--pm-ink)!important;border-radius:999px;min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--pm-head)}
.like-h{font-family:var(--pm-head)!important;font-weight:800!important}

/* ───── جدول المقارنة: مجموعة رملية ───── */
.cmp1{background:var(--pm-card)!important;border:0!important;border-radius:26px!important;box-shadow:none!important}
.cmp1-hd{background:var(--pm-group)!important;border-bottom:0!important}
.cmp1-hd .cmp1-us b,.cmp1-hd .cmp1-us i .num{color:var(--pm-gold-ink)!important}
.cmp1-row+.cmp1-row,.cmp1-hd+.cmp1-row{border-top:1px solid rgba(58,48,41,.06)!important}
.perk-i{color:#fff!important;background:var(--pm-green);border-radius:9px;width:26px!important;height:26px!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1)}
.perk-i svg{width:16px;height:16px}

/* ───── المراحل: المختارة بإطار ذهبي كبطاقات الخطط ───── */
.stage{border:3px solid transparent!important;transition:transform .28s var(--pm-spring),border-color .25s}
.stage.on{border-color:var(--pm-gold)!important;background:var(--pm-gold-ll)!important}
.stage-badge{background:var(--pm-group)!important;color:var(--pm-ink2)!important;border:0!important;border-radius:999px!important;font-weight:800}
.stage.on .stage-badge{background:var(--pm-brown)!important;color:#fff!important}

/* ───── الأسعار: بطاقات خطط الطقم ───── */
.cyc{background:var(--pm-group)!important;border:0!important;border-radius:999px!important;padding:5px!important}
.cyc button{border-radius:999px!important;color:var(--pm-mute)!important;transition:background .25s,color .25s,box-shadow .25s!important}
.cyc button[aria-pressed="true"]{background:#fff!important;color:var(--pm-ink)!important;box-shadow:0 2px 8px rgba(58,48,41,.1)!important}
.cyc em{background:var(--pm-brown)!important;color:#fff!important;border:0!important}
.price{background:transparent!important;border:3px solid var(--pm-line)!important;border-radius:26px!important;box-shadow:none!important;
  transition:transform .28s var(--pm-spring),border-color .25s,background .25s!important}
.price[aria-pressed="true"],.price.on{border-color:var(--pm-gold)!important;background:var(--pm-gold-ll)!important}
.price-b{background:var(--pm-brown)!important;color:#fff!important;border:0!important}
.price-p{color:var(--pm-ink)!important;font-family:var(--pm-head)!important;font-weight:800!important}
.price-t{color:var(--pm-ink2)!important}
.price-go{border:0!important;border-radius:999px!important;background:var(--pm-group)!important;color:var(--pm-ink2)!important;box-shadow:none!important}
.price[aria-pressed="true"] .price-go,.price.on .price-go{background:var(--pm-gold)!important;color:var(--pm-ink)!important;box-shadow:0 8px 18px -10px rgba(184,134,11,.8)!important}

/* ───── الأسئلة: صفوف مجموعة كإعدادات الطقم ───── */
.faq details,details.q,#faq .faq details{background:var(--pm-card)!important;border:0!important;border-radius:20px!important;box-shadow:none!important;margin-bottom:10px}
.faq summary,details.q summary{min-height:60px;font-weight:700}
.faq summary::after{border-color:var(--pm-faint,#B9ADA1)!important}

/* صور الخطوات: بلا إطار حبر */
.step-img,.side-img,.b2b-art{border:0!important;box-shadow:none!important}
.step-img{border-radius:20px!important}

/* ───── الروابط والنصّ المميّز ───── */
.b2b-c a,.nope-a,.vlink,.price-link,a.more{color:var(--pm-gold-ink)!important}
.vlink .vic{color:#fff!important;background:var(--pm-coral);border-radius:50%}

/* خطوط تحت عناوين الأقسام (كانت برتقالية): ذهبي الطقم */
#how .how-h::after,#more h2.display::after,#stages .stages-h::after,#compare h2.display::after,#plans h2.display::after,#faq h2.display::after{background:var(--pm-gold)!important}

/* ───── الخاتمة والتذييل ───── */
.final{background:var(--pm-bg)}
.foot,footer{background:var(--pm-group)!important;color:var(--pm-ink)!important}
.foot a,footer a{color:var(--pm-ink)!important}
.foot-grid{border-bottom:1px solid rgba(58,48,41,.1)!important}
.foot h3,.foot h4{color:var(--pm-mute)!important;font-family:var(--pm-head)!important}

/* ───── الدخول المتتابع الناعم ───── */
.rv{transition:opacity .5s var(--pm-out),transform .5s var(--pm-out)!important}


:focus-visible{outline:3px solid var(--pm-gold-d)!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.price,.stage,.rv{transition:none!important}}

/* ═════ صفحة المعلمين: الكحلي صار بنّي الطقم (بطاقة .promo/.me بنص فاتح) ═════ */
.hero:has(h1 .g),.money,.final:has(.b1),.dtop,.pop,.mini:not(.g),.dtabs button.on{background:linear-gradient(155deg,#56463B,var(--pm-brown) 55%,#3A3029)!important;color:#FFF8EF!important}
.hero:has(h1 .g)::before{background:radial-gradient(circle,rgba(245,197,24,.18),transparent 68%)!important}
h1 .g{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--pm-gold)!important}
.pains,.c{background:var(--pm-card)!important;border:0!important;box-shadow:none!important;border-radius:26px!important}
.c.hl{background:var(--pm-gold-ll)!important;box-shadow:inset 0 0 0 3px var(--pm-gold)!important}
.steps li::before{border-radius:13px!important;background:linear-gradient(165deg,#FFD65A,var(--pm-gold) 55%,#E0A800)!important;color:var(--pm-ink)!important}
.mini.g{background:var(--pm-gold)!important;color:var(--pm-ink)!important}

/* ═════ صفحة الدفع: اختيارات الطقم بدل ظلّ الحبر الصلب ═════ */
.step:has(.stepno){background:var(--pm-card)!important;border:0!important;box-shadow:none!important;border-radius:26px!important}
.stepno{border:0!important;background:var(--pm-brown);color:#fff;font-family:var(--pm-head)}
.kid,.pm button{border:3px solid transparent!important;background:var(--pm-group)!important;border-radius:999px!important;box-shadow:none!important;
  transition:background .25s,border-color .25s,transform .28s var(--pm-spring)!important}
.kid[aria-pressed=true],.pm button[aria-pressed=true]{border-color:var(--pm-gold)!important;background:var(--pm-gold-ll)!important;box-shadow:none!important}
.kid:active,.pm button:active{transform:scale(.94)}
.note{background:var(--pm-group)!important;border:0!important;border-radius:26px!important}
input:focus{border-color:var(--pm-gold)!important;box-shadow:0 0 0 3px var(--pm-gold-ll)!important}

/* ثانوي على الخلفية البنّية (المعلمين): زجاجي فاتح */
.hero:has(h1 .g) .b2,.money .b2,.final .b2{background:rgba(255,248,239,.14)!important;color:#FFF8EF!important}

/* ═════ الصفحات الصغيرة (التفعيل · الخصوصية · الشروط · جرّب · الأدوار · الحالة) ═════ */
.card button,.go{border:0!important;border-radius:999px!important;min-height:58px;background:var(--pm-gold)!important;color:var(--pm-ink)!important;
  box-shadow:0 10px 22px -10px rgba(184,134,11,.8)!important;font-family:var(--pm-head)!important;font-weight:800!important;font-size:18px!important;
  transition:transform .28s var(--pm-spring)!important}
.card button:active,.go:active{transform:scale(.95)!important}
.go.alt{background:var(--pm-group)!important;color:var(--pm-ink2)!important;box-shadow:none!important}
.card input,.card select{border:2px solid transparent!important;background:var(--pm-group)!important;border-radius:18px!important;box-shadow:none!important}
.card input:focus{border-color:var(--pm-gold)!important;background:var(--pm-card)!important}
.w{background:var(--pm-card)!important;border:0!important;border-radius:26px!important}
.box,.steps,th{background:var(--pm-group)!important;border:0!important}
.box{border-radius:20px!important}
.role,.mk a{background:var(--pm-card)!important;border:0!important;border-radius:26px!important;box-shadow:none!important;transition:transform .28s var(--pm-spring)!important}
.mk a{border-radius:20px!important}
.role:active,.mk a:active{transform:scale(.97);background:var(--pm-group)!important}
.card h2 span{background:var(--pm-group)!important;border:0!important;border-radius:13px!important}
.bar{background:var(--pm-group)!important;border:0!important}
.pill{background:var(--pm-card)!important;border:0!important}