body.page-help {
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
}

body.page-help::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, color-mix(in srgb, var(--color-brand-gold) 4%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, color-mix(in srgb, var(--color-night-lapis) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body.page-help .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

body.page-help .help-hero { padding: 5rem 0 3.5rem; text-align: center; position: relative; z-index: 1; }
body.page-help .help-hero__tag { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brand-gold); margin-bottom: 1.25rem; animation: fadeUp 0.6s ease both; }
[dir="rtl"] body.page-help .help-hero__tag { font-family: var(--font-ar); letter-spacing: 0; }
body.page-help .help-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; animation: fadeUp 0.6s ease 0.1s both; }
[dir="rtl"] body.page-help .help-hero__title { font-family: var(--font-ar-disp); }
body.page-help .help-hero__sub { color: var(--text-secondary); font-size: 1.125rem; max-width: 520px; margin: 0 auto 2.5rem; animation: fadeUp 0.6s ease 0.2s both; }
[dir="rtl"] body.page-help .help-hero__sub { font-family: var(--font-ar); }

body.page-help .search-wrap { max-width: 560px; margin: 0 auto; position: relative; animation: fadeUp 0.6s ease 0.3s both; }
body.page-help .search-icon { position: absolute; left: 1.125rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: 1.125rem; pointer-events: none; }
[dir="rtl"] body.page-help .search-icon { left: auto; right: 1.125rem; }
body.page-help .search-input { width: 100%; height: 54px; padding: 0 1.25rem 0 3rem; background: var(--surface-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; outline: none; transition: var(--transition-normal); }
[dir="rtl"] body.page-help .search-input { font-family: var(--font-ar); padding: 0 3rem 0 1.25rem; text-align: right; }
body.page-help .search-input::placeholder { color: var(--text-tertiary); }
body.page-help .search-input:focus { border-color: var(--border-hover); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-gold) 8%, transparent); }
body.page-help .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 0.5rem; display: none; z-index: 50; box-shadow: 0 8px 32px color-mix(in srgb, black 40%, transparent); }
body.page-help .search-results.show { display: block; }
body.page-help .search-result-item { padding: 0.625rem 0.875rem; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-normal); }
body.page-help .search-result-item:hover { background: var(--surface-hover); }
body.page-help .search-result-item .result-title { font-size: 0.9375rem; color: var(--text-primary); }
[dir="rtl"] body.page-help .search-result-item .result-title { font-family: var(--font-ar); }
body.page-help .search-result-item .result-cat { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; }

body.page-help .onboard-section { padding: 4rem 0; position: relative; z-index: 1; }
body.page-help .onboard-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0.12em; color: var(--text-secondary); text-transform: uppercase; text-align: center; margin-bottom: 2rem; }
[dir="rtl"] body.page-help .onboard-title { font-family: var(--font-ar); letter-spacing: 0; }
body.page-help .onboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
body.page-help .onboard-card { background: var(--surface-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 2rem 1.75rem; cursor: pointer; transition: var(--transition-normal); position: relative; overflow: hidden; }
body.page-help .onboard-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-gold) 4%, transparent) 0%, transparent 60%); opacity: 0; transition: var(--transition-normal); }
body.page-help .onboard-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 12px 40px color-mix(in srgb, black 30%, transparent); }
body.page-help .onboard-card:hover::before { opacity: 1; }
body.page-help .onboard-card.active { border-color: color-mix(in srgb, var(--color-brand-gold) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-brand-gold) 20%, transparent), 0 12px 40px color-mix(in srgb, black 30%, transparent); }
body.page-help .onboard-icon { font-size: 2.25rem; margin-bottom: 1rem; display: block; }
body.page-help .onboard-card h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--color-bright-gold); margin-bottom: 0.5rem; }
[dir="rtl"] body.page-help .onboard-card h3 { font-family: var(--font-ar-disp); }
body.page-help .onboard-card p { font-size: 0.9375rem; color: var(--text-secondary); }
[dir="rtl"] body.page-help .onboard-card p { font-family: var(--font-ar); }
body.page-help .onboard-steps { display: none; margin-top: 2rem; animation: fadeUp 0.4s ease; }
body.page-help .onboard-steps.show { display: block; }
body.page-help .step-list { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
body.page-help .step-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-default); animation: fadeUp 0.4s ease both; }
body.page-help .step-item:last-child { border-bottom: none; }
body.page-help .step-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--color-brand-gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand-gold) 30%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; color: var(--color-bright-gold); counter-increment: step; }
body.page-help .step-content h4 { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
[dir="rtl"] body.page-help .step-content h4 { font-family: var(--font-ar); }
body.page-help .step-content p { font-size: 0.9375rem; color: var(--text-secondary); }
[dir="rtl"] body.page-help .step-content p { font-family: var(--font-ar); }
body.page-help .step-link { display: inline-block; margin-top: 0.375rem; color: var(--color-light-gold); font-size: 0.875rem; text-decoration: none; transition: var(--transition-normal); }
body.page-help .step-link:hover { color: var(--color-bright-gold); }

body.page-help .section-divider { height: 1px; background: linear-gradient(to right, transparent, var(--border-default), transparent); margin: 0; }

body.page-help .categories-section { padding: 4rem 0; position: relative; z-index: 1; }
body.page-help .section-label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 1.75rem; }
[dir="rtl"] body.page-help .section-label { font-family: var(--font-ar); letter-spacing: 0; }
body.page-help .categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
body.page-help .category-card { background: var(--surface-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
body.page-help .cat-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; cursor: pointer; transition: var(--transition-normal); gap: 1rem; }
body.page-help .cat-header:hover { background: var(--surface-hover); }
body.page-help .cat-header-left { display: flex; align-items: center; gap: 0.875rem; }
body.page-help .cat-emoji { font-size: 1.375rem; flex-shrink: 0; }
body.page-help .cat-title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
[dir="rtl"] body.page-help .cat-title { font-family: var(--font-ar); }
body.page-help .cat-count { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; }
body.page-help .cat-chevron { color: var(--text-tertiary); font-size: 0.75rem; transition: transform var(--transition-normal); flex-shrink: 0; }
body.page-help .cat-header.open .cat-chevron { transform: rotate(180deg); }
body.page-help .cat-body { display: none; padding: 0 1.5rem 1.25rem; border-top: 1px solid var(--border-default); }
body.page-help .cat-body.open { display: block; animation: fadeDown 0.25s ease; }
body.page-help .article-list { list-style: none; margin-top: 0.875rem; }
body.page-help .article-list li { padding: 0.5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-brand-gold) 6%, transparent); }
body.page-help .article-list li:last-child { border-bottom: none; }
body.page-help .article-list a { color: var(--text-secondary); text-decoration: none; font-size: 0.9375rem; transition: var(--transition-normal); display: flex; align-items: center; gap: 0.5rem; }
[dir="rtl"] body.page-help .article-list a { font-family: var(--font-ar); }
body.page-help .article-list a:hover { color: var(--color-light-gold); }
body.page-help .article-list a::before { content: '→'; font-size: 0.75rem; color: var(--text-tertiary); flex-shrink: 0; }
[dir="rtl"] body.page-help .article-list a::before { content: '←'; }

body.page-help .article-panel { position: fixed; inset: 0; z-index: 200; display: none; }
body.page-help .article-panel.open { display: flex; }
body.page-help .article-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-night-lapis) 85%, transparent); backdrop-filter: blur(8px); }
body.page-help .article-drawer { position: relative; margin-left: auto; width: min(600px, 100vw); height: 100%; background: var(--surface-elevated); border-left: 1px solid var(--border-default); overflow-y: auto; padding: 2rem; animation: slideIn 0.3s cubic-bezier(0.4,0,0.2,1); }
[dir="rtl"] body.page-help .article-drawer { margin-left: 0; margin-right: auto; border-left: none; border-right: 1px solid var(--border-default); animation: slideInRtl 0.3s cubic-bezier(0.4,0,0.2,1); }
body.page-help .drawer-close { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
body.page-help .drawer-close-btn { background: none; border: 1px solid var(--border-default); color: var(--text-secondary); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-normal); }
body.page-help .drawer-close-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
body.page-help .article-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-bright-gold); margin-bottom: 0.75rem; }
[dir="rtl"] body.page-help .article-content h2 { font-family: var(--font-ar-disp); }
body.page-help .article-content p { color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.9875rem; }
[dir="rtl"] body.page-help .article-content p { font-family: var(--font-ar); }
body.page-help .article-content h3 { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); margin: 1.5rem 0 0.5rem; }
[dir="rtl"] body.page-help .article-content h3 { font-family: var(--font-ar); }
body.page-help .article-content ol, body.page-help .article-content ul { padding-left: 1.5rem; margin-bottom: 1rem; color: var(--text-secondary); }
[dir="rtl"] body.page-help .article-content ol, [dir="rtl"] body.page-help .article-content ul { padding-left: 0; padding-right: 1.5rem; font-family: var(--font-ar); }
body.page-help .article-content li { margin-bottom: 0.375rem; font-size: 0.9875rem; }
body.page-help .note-box { background: color-mix(in srgb, var(--color-brand-gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand-gold) 25%, transparent); border-radius: var(--radius-md); padding: 0.875rem 1.125rem; margin: 1.25rem 0; font-size: 0.9rem; color: var(--text-secondary); }
[dir="rtl"] body.page-help .note-box { font-family: var(--font-ar); }

body.page-help .cta-section { padding: 4rem 0 6rem; position: relative; z-index: 1; text-align: center; }
body.page-help .cta-inner { max-width: 480px; margin: 0 auto; }
body.page-help .cta-inner h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.875rem; }
[dir="rtl"] body.page-help .cta-inner h2 { font-family: var(--font-ar-disp); }
body.page-help .cta-inner p { color: var(--text-secondary); font-size: 1rem; margin-bottom: 2rem; }
[dir="rtl"] body.page-help .cta-inner p { font-family: var(--font-ar); }
body.page-help .cta-btn { display: inline-block; background: var(--color-bright-gold); color: var(--color-night-lapis); text-decoration: none; padding: 14px 36px; border-radius: var(--radius-md); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; transition: var(--transition-normal); }
body.page-help .cta-btn:hover { background: var(--color-light-gold); }
[dir="rtl"] body.page-help .cta-btn { font-family: var(--font-ar-disp); }

@media (max-width: 640px) {
  body.page-help .help-hero { padding: 3rem 0 2rem; }
  body.page-help .onboard-cards { grid-template-columns: 1fr; }
  body.page-help .categories-grid { grid-template-columns: 1fr; }
  body.page-help .article-drawer { width: 100vw; }
}