/* ==========================================================================
   إدارة الديون Pro — تنسيق الموقع
   --------------------------------------------------------------------------
   الألوان مأخوذة من ألوان البرنامج نفسه (presentation/theme/Color.kt) حتى يبدو
   الموقع والبرنامج وجهين لشيء واحد:

       BrandPrimary     #12A983   الأخضر الأساسي
       BrandPrimaryDark #0C8A6B   الأخضر الغامق للنصوص على الأبيض
       BrandPrimarySoft #E3F5F0   خلفية البطاقات الخضراء
       BrandAccent      #F5A55F   البرتقالي
       BrandDanger      #EF4F6C   الأحمر (علينا / الحذف)
       AppBackground    #EEF2F0   خلفية الصفحة
       AppTextPrimary   #16211D   النص
       AppTextSecondary #71827B   النص الثانوي
       AppOutline       #DCEDE6   الحدود

   الخط: Tajawal (تجوّل)، خط عربي تصميم بوطرس فؤاد هوزار. هندسيّ واضح وعيناه
   أوسع من خطوط النسخ المعتادة، فيُقرأ بسهولة على هاتف صغير من مسافة ذراع.
   عربي ولاتيني في ملفات منفصلة، والأوزان 400 و500 و700 و800.
   الملفات محفوظة محليًا في assets/fonts/ بدل التحميل من Google:
   أسرع على شبكة ضعيفة، ولا يُسرَّب أي طلب إلى Google عند فتح الصفحة، ويعمل
   حتى لو حُجب fonts.gstatic.com.
   ========================================================================== */

/* --------------------------------------------------------------------------
   تجوّل — خط عربي لاتيني من Google برخصة SIL Open Font License 1.1.

   كل وزن له نسختان: عربية ولاتينية، مقسومتان بـunicode-range، فيحمّل المتصفح
   العربية لنص عربي واللاتينية لنص لاتيني، ولا يُحمَّل وزن لا يُستعمل في
   الصفحة. والملفات محفوظة محليًا، فلا يحتاج الرفع إلى Google.
   -------------------------------------------------------------------------- */

/* 400 — عادي */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/tajawal-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
    U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
    U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52,
    U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62,
    U+1EE64, U+1EE67-1EE6A;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/tajawal-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 500 — متوسط */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/tajawal-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
    U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
    U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52,
    U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62,
    U+1EE64, U+1EE67-1EE6A;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/tajawal-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 700 — عريض */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/tajawal-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
    U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
    U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52,
    U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62,
    U+1EE64, U+1EE67-1EE6A;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/tajawal-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 800 — عريض جدًا، للشعار */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/tajawal-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E,
    U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22,
    U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B,
    U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52,
    U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62,
    U+1EE64, U+1EE67-1EE6A;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/tajawal-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #12a983;
  --green-dark: #0c8a6b;
  --green-soft: #e3f5f0;
  --accent: #f5a55f;
  --accent-soft: #fef4ec;
  --danger: #ef4f6c;
  --danger-soft: #fdeaed;
  --bg: #eef2f0;
  --surface: #ffffff;
  --surface-muted: #f5f7f6;
  --text: #16211d;
  --text-2: #71827b;
  --text-3: #a1aea8;
  --line: #dcede6;
  --line-strong: #b9dfd1;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 2px 10px rgba(22, 33, 29, .06);
  --shadow-lg: 0 12px 32px rgba(22, 33, 29, .12);

  --header-h: 62px;
  --stickybar-h: 62px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Tajawal", "Segoe UI", "Tahoma", "Arial", sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  /* يمنع القفزة الأفقية على الهاتف عند ظهور شريط تمرير أفقي */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* كل الروابط الداخلية تُفتح في الصفحة نفسها، إلا الصراحة الخارجية */
h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 18px;
}

/* ==========================================================================
   الرأس والتنقل
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* ظهر مكان القائمة على الهاتف */
  padding-top: env(safe-area-inset-top);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4fd8ab, var(--green-dark));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
  flex: none;
}

.nav { margin-inline-start: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: block;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: .95rem;
  white-space: nowrap;
}
.nav-list a:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.nav-list a[aria-current="page"] { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    inset-inline: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
  .nav-list a { padding: 12px 14px; font-size: 1rem; }
  /* مساحة تحت القائمة لا تخفي محتواها */
  body { padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   الأزرار
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(18, 169, 131, .28);
}
.btn-primary:hover { background: var(--green-dark); }

.btn-outline {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--green-dark);
}
.btn-outline:hover { background: var(--green-soft); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-muted); }

.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1eb856; }

.btn-sm { padding: 9px 15px; font-size: .92rem; }

/* ==========================================================================
   البطاقات والعناوين
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.section { padding: 46px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.section-head { margin-bottom: 26px; max-width: 60ch; }
.section-head p { color: var(--text-2); margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green-dark);
  background: var(--green-soft);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

.grid { display: grid; gap: 16px; }
/* min(Xpx, 100%) يمنع أن يفرض العمود عرضًا أكبر من الشاشة على هاتف
   ضيق، فيُقص المحتوى بدل أن ينكمش. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.feature-card h3 { color: var(--green-dark); }

.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 12px;
  background: var(--green-soft);
}
.icon-badge.accent { background: var(--accent-soft); }
.icon-badge.danger { background: var(--danger-soft); }

/* ==========================================================================
   الواجهة الرئيسية
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, var(--green-soft), var(--bg));
  border-bottom: 1px solid var(--line);
  padding: 44px 0 40px;
}

.hero-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: 2.3rem; margin-bottom: .35em; }
@media (max-width: 640px) { .hero h1 { font-size: 1.75rem; } }

.hero-lead { font-size: 1.1rem; color: var(--text-2); max-width: 52ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge {
  font-size: .87rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

/* لقطة البرنامج في الواجهة: إطار هاتف، أو إطار فارغ وصفي إن لم تُوضع صورة */
.phone-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  max-width: 300px;
  margin-inline: auto;
}
/* 720x1612 هو مقاس لقطات الهاتف فعليًا، فنضبط النسبة عليه فلا يُقصّ
   شيء من الصورة، و object-fit: contain احتياطًا لأي مقاس آخر. */
.phone-frame .shot { aspect-ratio: 720 / 1612; }

/* ==========================================================================
   لقطات الشاشة: الحقيقية تظهر، وإن غابت بقي الإطار موصوفًا
   ========================================================================== */

.shot {
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px dashed var(--line-strong);
  /* مقاس لقطات الهاتف فعليًا، وإلا ظهرت أشرطة جانبية حول الصورة */
  aspect-ratio: 720 / 1612;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
}

/* contain لا يقصّ أزرار الشاشة ولا شريط الحالة كما يفعل cover */
.shot img { width: 100%; height: 100%; object-fit: contain; }

/* العنوان والوصف يظهران أسفل الصورة دائمًا، وفي مكانها إن لم توجد */
.shot-caption {
  font-size: .9rem;
  color: var(--text-2);
  padding: 10px 12px 0;
  text-align: center;
}

.screen-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.screen-card .shot-caption strong {
  display: block;
  color: var(--text);
  margin-bottom: 2px;
}

.shot-missing {
  color: var(--text-3);
  font-size: .88rem;
  line-height: 1.6;
}
.shot-missing strong { display: block; color: var(--text-2); margin-bottom: 4px; }
.shot-missing code {
  display: inline-block;
  direction: ltr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .82rem;
}

/* ==========================================================================
   شريط التحميل الثابت أسفل الهاتف
   ========================================================================== */

.stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(22, 33, 29, .08);
  padding-bottom: env(safe-area-inset-bottom);
}

.stickybar-inner {
  min-height: var(--stickybar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.stickybar-text { font-size: .92rem; color: var(--text-2); line-height: 1.4; }
.stickybar-text strong { display: block; color: var(--text); font-size: .98rem; }

/* ==========================================================================
   الجداول والخطوات والأسئلة
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: 12px; }

.step {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 18px 18px 62px;
}
.step::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 18px;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.step h3 { margin-bottom: .2em; }
.step p { margin-bottom: 0; color: var(--text-2); }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 15px 18px;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 18px 16px; color: var(--text-2); }
.faq .answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   لا يُخفى أول سؤال، فيبقى شيء ظاهرًا فوق طيّة السؤال
   -------------------------------------------------------------------------- */
.faq details:first-of-type { border-color: var(--line-strong); }

/* ==========================================================================
   التذييل
   ========================================================================== */

.site-footer {
  background: var(--text);
  color: #cfe3da;
  padding: 34px 0;
  margin-top: 0;
}
.site-footer a { color: #8fe3c6; }
.site-footer h4 { color: #fff; font-size: 1rem; }
.site-footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-footer .muted { color: #9db3aa; font-size: .9rem; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 24px;
  padding-top: 16px;
  font-size: .88rem;
  color: #9db3aa;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

/* ==========================================================================
   تفاصيل طفيفة
   ========================================================================== */

.note {
  background: var(--accent-soft);
  border: 1px solid #f6ddc4;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: .95rem;
  color: #7a4a1c;
}
.note strong { color: #5f3a14; }

.note-green {
  background: var(--green-soft);
  border-color: var(--line-strong);
  color: var(--green-dark);
}

.center { text-align: center; }
.mt-lg { margin-top: 30px; }
.mb-0 { margin-bottom: 0; }

.tag {
  display: inline-block;
  font-size: .82rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-2);
  border: 1px solid var(--line);
}

/* إصدارات مخفية بصريًا لقارئات الشاشة فقط */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  background: var(--green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ==========================================================================
   الطباعة: من يريد طباعة شرح يخرج نصًا نظيفًا بلا تنقل وأزرار
   ========================================================================== */

/* ==========================================================================
   الهاتف: مساحات لمس أكبر
   ========================================================================== */

@media (max-width: 860px) {
  /* الإصبع يحتاج 44px على الأقل، وروابط التذييل كانت 19px فقط */
  .site-footer-grid a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 2px;
  }
  .site-footer-grid li { line-height: 1.4; }

  .btn,
  .stickybar .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; padding: 11px 16px; }

  .nav-toggle { width: 44px; height: 44px; }
  .brand { min-height: 44px; }

  /* روابط داخل الجمل: الاستثناء النصي في WCAG مسموح، لكن نكبّرها إلى
     الحد الأدنى 24px ليسهل ضغطها بالإبهام. margin-block السالب يُبقي
     تباعد الأسطر كما هو فلا يتكسر النص. */
  .tap-inline {
    display: inline-block;
    min-height: 24px;
    padding: 3px 6px;
    margin-block: -3px;
  }

  /* روابط المشغّل تأخذ العرض كله فلا يضيّق النص */
  .hero-actions .btn { flex: 1 1 100%; }
}

@media print {
  .site-header, .stickybar, .site-footer, .nav, .hero-actions, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card, .step, .faq details { break-inside: avoid; border-color: #ccc; box-shadow: none; }
  .faq .answer { display: block !important; }
}