/* ============================================================
   مودّة — نظام صفحات هبوط العوالم (World Landing System)
   مكوّنات مشتركة لصفحات الهبوط العامّة لكلّ عالم (W1–W5).
   مبنيّ على brand-tokens.css + world-themes.css: كلّ لون من [data-world].
   Mobile-first · RTL · focus-visible · reduced-motion. لا hex ثابت.
   ============================================================ */

.wl { color: var(--text-primary); background: var(--bg-canvas); }
.wl .wl-wrap { max-width: 1080px; margin-inline: auto; padding-inline: var(--space-4); }
.wl section { padding-block: var(--space-10); }
.wl .wl-eyebrow { display:inline-block; color: var(--world-accent, var(--primary)); font-size: var(--t-label-size); font-weight:700; letter-spacing:.02em; margin-bottom: var(--space-2); }
.wl h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); text-wrap: balance; margin: 0 0 var(--space-3); }
.wl .wl-sub { color: var(--text-secondary); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); max-width: 62ch; }
.wl .wl-head { text-align:center; margin-bottom: var(--space-7); }
.wl .wl-head .wl-sub { margin-inline:auto; }

/* ---- Hero ---- */
.wl-hero {
  background: linear-gradient(160deg, var(--world-accent-subtle, var(--primary-subtle)), var(--bg-surface) 72%);
  border-bottom: 4px solid var(--world-accent, var(--primary));
}
.wl-hero .wl-wrap { padding-block: var(--space-10); }
.wl-hero-top { display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap:wrap; }
.wl-hero-badge { background: var(--world-tint); color: var(--world-accent-strong, var(--world-accent)); border:1px solid var(--world-border); border-radius: var(--radius-pill); padding: 4px 14px; font-size: var(--t-label-size); font-weight:700; }
.wl-hero h1 { font-size: var(--t-display-size); line-height: var(--t-display-lh); font-weight: var(--t-display-weight); text-wrap: balance; margin: 0 0 var(--space-3); max-width: 20ch; }
.wl-hero .wl-sub { font-size: var(--t-body-lg-size); }
.wl-hero-cta { display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-6); }

/* ---- Buttons ---- */
.wl-btn { display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2); min-height:48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); font-weight:700; font-size: var(--t-button-size); text-decoration:none; cursor:pointer; border:1px solid transparent; transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.wl-btn-accent { background: var(--world-accent, var(--primary)); color: var(--world-on-accent, #fff); }
.wl-btn-accent:hover { transform: translateY(-1px); }
.wl-btn-ghost { background: transparent; color: var(--world-accent, var(--primary)); border-color: var(--world-border); }
.wl-btn-ghost:hover { background: var(--world-accent-subtle); }
.wl-btn-sm { min-height:40px; padding: 0 var(--space-4); font-size: var(--t-body-sm-size); }
.wl-btn:focus-visible, .wl-card:focus-visible, .wl-feature:focus-visible { outline: 2px solid var(--world-accent, var(--focus-ring)); outline-offset: 3px; }

/* ---- Alt section bg ---- */
.wl-alt { background: var(--bg-subtle); }

/* ---- Feature / service grid ---- */
.wl-grid { display:grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 620px){ .wl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .wl-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.wl-feature {
  display:flex; flex-direction:column; gap: var(--space-2);
  background: var(--bg-surface); border:1px solid var(--border-subtle);
  border-top: 3px solid var(--world-accent, var(--primary));
  border-radius: var(--radius-lg); padding: var(--space-5);
  text-decoration:none; color: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
a.wl-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wl-feature .wl-ico { width:46px; height:46px; border-radius: var(--radius-md); display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; background: var(--world-accent-subtle); color: var(--world-accent); }
.wl-feature h3 { font-size: var(--t-h6-size); margin: var(--space-2) 0 0; }
.wl-feature p { color: var(--text-secondary); font-size: var(--t-body-sm-size); line-height: var(--t-body-lh); margin:0; flex:1; }
.wl-feature .wl-go { color: var(--world-accent); font-weight:700; font-size: var(--t-body-sm-size); margin-top: var(--space-2); }

/* ---- Badges (free / paid / sample) ---- */
.wl-badge { display:inline-block; font-size: var(--t-caption-size); font-weight:700; padding: 2px 10px; border-radius: var(--radius-pill); }
.wl-badge-free { background: color-mix(in srgb, var(--c-nama-500, #2e9e6b) 16%, transparent); color: var(--c-nama-700, #1f7d52); }
.wl-badge-paid { background: var(--world-accent-subtle); color: var(--world-accent-strong, var(--world-accent)); border:1px solid var(--world-border); }
.wl-badge-sample { background: var(--c-tanbih-100, #fff4d6); color: var(--c-tanbih-800, #8a6100); border:1px solid var(--c-tanbih-300, #f0d08a); }

/* ---- How it works (steps) ---- */
.wl-steps { display:grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }
@media (min-width: 760px){ .wl-steps { grid-template-columns: repeat(3, 1fr); } }
.wl-step { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); position:relative; }
.wl-step::before { counter-increment: step; content: counter(step); display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background: var(--world-accent); color: var(--world-on-accent); font-weight:800; margin-bottom: var(--space-2); }
.wl-step h3 { font-size: var(--t-h6-size); margin:0 0 var(--space-1); }
.wl-step p { color: var(--text-secondary); font-size: var(--t-body-sm-size); margin:0; }

/* ---- Illustrative sample / preview card ---- */
.wl-sample { position:relative; background: var(--bg-surface); border:1px dashed var(--world-border); border-radius: var(--radius-lg); padding: var(--space-6); overflow:hidden; }
.wl-sample .wl-sample-tag { position:absolute; inset-inline-end: var(--space-4); inset-block-start: var(--space-4); }
.wl-sample h3 { font-size: var(--t-h5-size); margin: 0 0 var(--space-3); }
.wl-meter { height:8px; border-radius:99px; background: var(--border-subtle); overflow:hidden; margin: var(--space-1) 0 var(--space-3); }
.wl-meter > span { display:block; height:100%; background: var(--world-accent); }

/* ---- Two-column split ---- */
.wl-split { display:grid; grid-template-columns:1fr; gap: var(--space-6); align-items:center; }
@media (min-width: 860px){ .wl-split { grid-template-columns: 1fr 1fr; } }

/* ---- Pricing tiers ---- */
.wl-tiers { display:grid; grid-template-columns:1fr; gap: var(--space-4); }
@media (min-width: 760px){ .wl-tiers { grid-template-columns: repeat(3, 1fr); align-items:stretch; } }
.wl-tier { display:flex; flex-direction:column; background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.wl-tier.is-featured { border:2px solid var(--world-accent); box-shadow: var(--shadow-md); }
.wl-tier h3 { font-size: var(--t-h5-size); margin:0 0 var(--space-1); }
.wl-tier .wl-price { font-size: var(--t-h3-size); font-weight:800; color: var(--world-accent-strong, var(--world-accent)); margin: var(--space-1) 0; }
.wl-tier .wl-price small { font-size: var(--t-body-sm-size); color: var(--text-muted); font-weight:500; }
.wl-tier ul { list-style:none; padding:0; margin: var(--space-3) 0; display:flex; flex-direction:column; gap: var(--space-2); flex:1; }
.wl-tier li { color: var(--text-secondary); font-size: var(--t-body-sm-size); padding-inline-start: 22px; position:relative; }
.wl-tier li::before { content:"✓"; position:absolute; inset-inline-start:0; color: var(--world-accent); font-weight:800; }

/* ---- FAQ ---- */
.wl-faq { max-width: 820px; margin-inline:auto; }
.wl-faq details { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.wl-faq summary { cursor:pointer; font-weight:700; color: var(--text-primary); }
.wl-faq details[open] summary { color: var(--world-accent); margin-bottom: var(--space-2); }
.wl-faq p { color: var(--text-secondary); margin:0; line-height: var(--t-body-lh); }

/* ---- CTA band ---- */
.wl-cta-band { background: var(--world-accent-subtle); border:1px solid var(--world-border); border-radius: var(--radius-xl); padding: var(--space-8); text-align:center; }
.wl-cta-band h2 { margin-bottom: var(--space-2); }
.wl-cta-band .wl-hero-cta { justify-content:center; }

/* ---- Authed strip (for logged-in visitors on the public landing) ---- */
.wl-authed { background: var(--world-accent); color: var(--world-on-accent); }
.wl-authed .wl-wrap { padding-block: var(--space-4); display:flex; justify-content:space-between; align-items:center; gap: var(--space-3); flex-wrap:wrap; }
.wl-authed a.wl-btn-ghost { color: var(--world-on-accent); border-color: var(--world-on-accent); }
.wl-authed a.wl-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ---- empty-state note (content-gap, honest) ---- */
.wl-note { background: var(--bg-surface); border:1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); text-align:center; color: var(--text-secondary); }
.wl-note i { color: var(--world-accent); font-size: 1.8rem; }

@media (max-width: 768px){
  .wl section { padding-block: var(--space-8); }
  .wl-hero .wl-wrap { padding-block: var(--space-8); }
}
@media (prefers-reduced-motion: reduce){
  .wl-btn, .wl-feature, a.wl-feature:hover, .wl-btn-accent:hover { transition:none; transform:none; }
}