/* SLFS/web-v2 · بخشِ growth
   منتقل‌شده از <style>ِ قالب (2026-10-02) — RULES §۳.۵ */

/* ══════════ growth ══════════ */
/* ══ SLFS · نقاط قوت و مسیر رشد (growth) — از growth-section.html؛ اجزای مشترک در common.css ══ */
.slfs-gr { --gr-teal: #12B886; --gr-teal-d: #0D9488; --gr-teal-l: #E6FCF5; --gr-teal-m: #B2F2DB; --gr-amber: #C27803; --gr-amber-l: #FFF8EB; --gr-amber-m: #FDE68A; --gr-navy: #1E3A5F; --gr-text: #343A40; --gr-slate: #334155; --gr-sec: #64748B; --gr-border: #E5E7EB }

/* ══ مرحله رشد (مراقبت پله‌ای) ══ */
.slfs-gr .gr-stages { display: grid; grid-template-columns: repeat(3,1fr); position: relative }
.slfs-gr .gr-stages::before { content: ''; position: absolute; top: 52px; right: 16.66%; left: 16.66%; height: 3px; background: #E5E7EB; border-radius: 2px }
.slfs-gr .gr-stage { position: relative; text-align: center; padding: 26px 8px 0 }
.slfs-gr .gr-stage__dot { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; background: #F1F5F9; border: 3px solid #fff; box-shadow: 0 0 0 1px #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #94A3B8; position: relative; z-index: 1 }
.slfs-gr .gr-stage__title { font-size: 15px; font-weight: 800; color: #94A3B8 }
.slfs-gr .gr-stage__support { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #F3F4F6; color: #94A3B8 }
.slfs-gr .gr-stage__you { display: none; position: absolute; top: -10px; left: 0; right: 0; margin: auto; width: max-content; font-size: 10px; font-weight: 800; color: var(--gr-navy); background: #E7F1FF; padding: 1px 9px; border-radius: 20px; line-height: 1.8 }
.slfs-gr .gr-stage.is-active .gr-stage__you { display: block }
.slfs-gr .gr-stage.is-active .gr-stage__dot { background: var(--gr-teal); color: #fff; box-shadow: 0 0 0 6px rgba(18,184,134,.15) }
.slfs-gr .gr-stage.is-active .gr-stage__title { color: var(--gr-teal-d) }
.slfs-gr .gr-stage.is-active .gr-stage__support { background: var(--gr-teal-l); color: var(--gr-teal-d) }
.slfs-gr .gr-stage-note { margin-top: 22px; padding: 14px 16px; background: #F8FAFC; border-radius: 12px; font-size: 14px; line-height: 26px; color: #4B5563; text-align: justify }

/* ══ نقاط قوت و نقاط رشد ══ */
.slfs-gr .gr-sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px }
.slfs-gr .gr-sg-card { border: 1px solid var(--gr-border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.04) }
.slfs-gr .gr-sg-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 3px solid }
.slfs-gr .gr-sg-card--s .gr-sg-head { border-color: var(--gr-teal-d); background: linear-gradient(0deg,#fff,var(--gr-teal-l)) }
.slfs-gr .gr-sg-card--g .gr-sg-head { border-color: var(--gr-amber); background: linear-gradient(0deg,#fff,var(--gr-amber-l)) }
.slfs-gr .gr-sg-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-gr .gr-sg-icon svg { width: 22px; height: 22px }
.slfs-gr .gr-sg-card--s .gr-sg-icon { background: var(--gr-teal-d) }
.slfs-gr .gr-sg-card--g .gr-sg-icon { background: var(--gr-amber) }
.slfs-gr .gr-sg-head h3 { font-size: 16px; font-weight: 800; line-height: 1.5 }
.slfs-gr .gr-sg-card--s .gr-sg-head h3 { color: var(--gr-teal-d) }
.slfs-gr .gr-sg-card--g .gr-sg-head h3 { color: var(--gr-amber) }
.slfs-gr .gr-sg-head span { font-size: 12px; color: var(--gr-sec) }
.slfs-gr .gr-sg-body { padding: 6px 20px 16px }
.slfs-gr .gr-item { padding: 12px 0; display: flex; gap: 10px }
.slfs-gr .gr-item + .gr-item { border-top: 1px solid #F1F5F9 }
.slfs-gr .gr-item__num { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px }
.slfs-gr .gr-sg-card--s .gr-item__num { background: var(--gr-teal-l); color: var(--gr-teal-d) }
.slfs-gr .gr-sg-card--g .gr-item__num { background: var(--gr-amber-l); color: var(--gr-amber) }
.slfs-gr .gr-item__title { font-size: 14px; font-weight: 700; line-height: 1.6 }
.slfs-gr .gr-item__desc { font-size: 13px; color: var(--gr-sec); line-height: 2; text-align: justify }

/* ══ مسیر EASE ══ */
.slfs-gr .gr-path { display: grid; grid-template-columns: repeat(4,1fr); position: relative; margin: 40px 0 6px }
.slfs-gr .gr-path::before { content: ''; position: absolute; top: 30px; right: 12.5%; left: 12.5%; height: 4px; background: linear-gradient(to left,#96F2D7,#0CA678); border-radius: 4px }
.slfs-gr .gr-node { position: relative; z-index: 1; text-align: center; text-decoration: none; cursor: pointer; display: block }
.slfs-gr .gr-node__circle { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; color: #fff; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .2s }
.slfs-gr .gr-node:hover .gr-node__circle { transform: translateY(-3px) }
.slfs-gr .gr-node.is-key .gr-node__circle { box-shadow: 0 0 0 5px rgba(194,120,3,.22),0 4px 14px rgba(0,0,0,.1) }
.slfs-gr .gr-node__key { position: absolute; top: -24px; left: 0; right: 0; margin: auto; width: max-content; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--gr-amber) }
.slfs-gr .gr-node__key svg, .slfs-gr .gr-step__badge svg { width: 14px; height: 14px; flex-shrink: 0 }
.slfs-gr .gr-node__name { display: block; font-size: 13px; font-weight: 800; color: #343A40; line-height: 1.6; padding: 0 4px }
.slfs-gr .gr-node__en { display: block; font-size: 10px; color: #94A3B8; font-weight: 600; direction: ltr }

/* کارت گام */
.slfs-gr .gr-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 28px }
.slfs-gr .gr-step { border: 1px solid var(--gr-border); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.04); transition: box-shadow .3s }
.slfs-gr .gr-step.is-flash { box-shadow: 0 0 0 4px rgba(18,184,134,.18) }
.slfs-gr .gr-step__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 20px 10px }
.slfs-gr .gr-step__letter { width: 46px; height: 46px; border-radius: 12px; background: var(--step-c); color: #fff; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-gr .gr-step__titles { display: flex; flex-direction: column; gap: 1px }
.slfs-gr .gr-step__num { font-size: 11px; color: #94A3B8; font-weight: 700 }
.slfs-gr .gr-step__title { font-size: 17px; font-weight: 800; color: #343A40; line-height: 1.5 }
.slfs-gr .gr-step__en { font-size: 11px; color: #94A3B8; font-weight: 600; direction: ltr; text-align: right }
.slfs-gr .gr-step__badge { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--gr-amber) }
.slfs-gr .gr-step__focus { padding: 0 20px 18px; font-size: 14px; line-height: 28px; color: #4B5563; text-align: justify }

/* حرف انگلیسی دقیقاً وسط دایره‌های مسیر و مربع‌های گام
   طراحی برای وزیرمتن translateY(.111em) و برای E جابه‌جایی افقیِ -.02em داشت؛ اینجا حرف کلاسِ en دارد
   (فونتِ لاتینِ پایه: Segoe UI) و با اندازه‌گیریِ پیکسلی، این مقدار حرف را وسط می‌نشاند */
.slfs-gr .gr-letter { display: block; line-height: 1; transform: translateY(-.055em) }

/* کارت تمرین (هم‌خانواده برنامه توسعه) */
.slfs-gr .gr-ex { margin: 0 20px 20px; border: 1px solid var(--gr-border); border-radius: 16px; overflow: hidden; background: #fff }
.slfs-gr .gr-ex__head { padding: 14px 18px; background: #F3F4F6; border-bottom: 1px solid var(--gr-border) }
.slfs-gr .gr-ex__label { font-size: 11px; color: var(--gr-sec); font-weight: 600; margin-bottom: 2px }
.slfs-gr .gr-ex__name { font-size: 16px; font-weight: 800; color: var(--gr-slate) }
.slfs-gr .gr-ex__grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--gr-border) }
.slfs-gr .gr-ex__cell { padding: 16px 10px; text-align: center; border-left: 1px solid var(--gr-border) }
.slfs-gr .gr-ex__cell:last-child { border-left: none }
.slfs-gr .gr-ex__icon { width: 34px; height: 34px; border-radius: 10px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; color: #94A3B8 }
.slfs-gr .gr-ex__icon svg { width: 18px; height: 18px; fill: currentColor }
.slfs-gr .gr-ex__k { font-size: 11px; color: var(--gr-sec); font-weight: 600; margin-bottom: 3px }
.slfs-gr .gr-ex__v { font-size: 13px; font-weight: 700; color: var(--gr-slate); line-height: 1.5 }
.slfs-gr .gr-ex__steps { padding: 20px 18px }
.slfs-gr .gr-ex__steps-title { font-size: 14px; font-weight: 800; color: var(--gr-slate); margin-bottom: 18px; display: flex; align-items: center; gap: 8px }
.slfs-gr .gr-ex__steps-title::before { content: ''; width: 4px; height: 18px; background: #334155; border-radius: 2px }
.slfs-gr .gr-tl { position: relative; padding-right: 40px }
.slfs-gr .gr-tl::before { content: ''; position: absolute; right: 15px; top: 0; bottom: 0; width: 3px; background: #334155; opacity: .15; border-radius: 2px }
.slfs-gr .gr-tl__step { position: relative; padding-bottom: 16px }
.slfs-gr .gr-tl__step:last-child { padding-bottom: 0 }
.slfs-gr .gr-tl__marker { position: absolute; right: -40px; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #334155; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; z-index: 1; box-shadow: 0 4px 12px rgba(51,65,85,.25) }
.slfs-gr .gr-tl__body { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 16px; transition: all .25s }
.slfs-gr .gr-tl__body:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateX(-4px) }
.slfs-gr .gr-tl__title { font-size: 14px; font-weight: 800; color: var(--gr-slate); margin-bottom: 4px }
.slfs-gr .gr-tl__desc { font-size: 13px; color: #5A6C7D; line-height: 1.9; text-align: justify }

/* ══ کادر پایانی: همراهی تخصصی (سطوح بالا) یا نقش شما برای دیگران (سطوح پایین) ══ */
.slfs-gr .gr-box { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(135deg,#F0FDF9,#fff); border: 1.5px solid var(--gr-teal-m) }
.slfs-gr .gr-box__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--gr-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-gr .gr-box__icon svg { width: 22px; height: 22px }
.slfs-gr .gr-box__title { font-size: 15px; font-weight: 800; color: var(--gr-teal-d); margin-bottom: 6px }
.slfs-gr .gr-box__text { font-size: 14px; line-height: 26px; color: #374151; text-align: justify }
.slfs-gr .gr-box__hotline { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gr-teal-d); background: #fff; border: 1px solid var(--gr-teal-m); border-radius: 10px; padding: 6px 12px }
.slfs-gr .gr-box__hotline b { font-size: 16px; font-weight: 900 }
.slfs-gr .gr-box__signs-title { font-size: 12px; font-weight: 800; color: var(--gr-slate); margin-top: 12px }
.slfs-gr .gr-box__signs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.slfs-gr .gr-box__sign { font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--gr-teal-m); border-radius: 20px; padding: 4px 12px; color: var(--gr-teal-d) }

/* ══ ریسپانسیو ══ */
@media (max-width: 768px) {
    .slfs-gr .gr-sg-grid { grid-template-columns: 1fr }
    .slfs-gr .gr-ex__grid { grid-template-columns: repeat(2,1fr) }
    .slfs-gr .gr-ex__cell { border-bottom: 1px solid var(--gr-border) }
    .slfs-gr .gr-ex__cell:nth-child(odd) { border-left: 1px solid var(--gr-border) }
    .slfs-gr .gr-ex__cell:nth-child(even) { border-left: none }
    .slfs-gr .gr-ex__cell:nth-last-child(-n+2) { border-bottom: none }
}
@media (max-width: 576px) {
    /* مراحل رشد در موبایل: فهرست عمودی فشرده، عدد و نوشته در یک ردیف */
    .slfs-gr .gr-stages { grid-template-columns: 1fr }
    .slfs-gr .gr-stages::before { display: none }
    .slfs-gr .gr-stage { display: flex; align-items: flex-start; gap: 12px; text-align: right; padding: 0 0 32px }
    .slfs-gr .gr-stage:last-child { padding-bottom: 0 }
    .slfs-gr .gr-stage:not(:last-child)::after { content: ''; position: absolute; right: 15px; top: 42px; bottom: 10px; width: 2px; background: #E5E7EB; border-radius: 2px }
    .slfs-gr .gr-stage__dot { margin: 0; flex-shrink: 0; width: 32px; height: 32px; font-size: 13px; border-width: 2px }
    .slfs-gr .gr-stage.is-active .gr-stage__dot { box-shadow: 0 0 0 4px rgba(18,184,134,.15) }
    .slfs-gr .gr-stage__info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 4px }
    .slfs-gr .gr-stage__title { font-size: 14px; line-height: 1.6 }
    .slfs-gr .gr-stage__support { margin: 0; padding: 0; background: none !important; font-size: 11px; font-weight: 600; color: #94A3B8 }
    .slfs-gr .gr-stage.is-active .gr-stage__support { color: var(--gr-sec) }
    .slfs-gr .gr-stage__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
    .slfs-gr .gr-stage__you { position: static; margin: 0; width: auto }
    .slfs-gr .gr-stage.is-active .gr-stage__you { display: inline-block; font-size: 9.5px; padding: 0 8px; white-space: nowrap }

    .slfs-gr .gr-path { margin-top: 36px }
    .slfs-gr .gr-path::before { top: 20px; height: 3px }
    .slfs-gr .gr-node__circle { width: 40px; height: 40px; font-size: 17px; border-width: 3px; margin-bottom: 8px }
    .slfs-gr .gr-node__name { font-size: 10.5px; line-height: 1.5 }
    .slfs-gr .gr-node__en { display: none }
    .slfs-gr .gr-node__key { top: -20px; font-size: 10px }
    .slfs-gr .gr-node__key svg { width: 12px; height: 12px }
    .slfs-gr .gr-step__head { padding: 14px 16px 8px }
    .slfs-gr .gr-step__focus { padding: 0 16px 14px }
    .slfs-gr .gr-ex { margin: 0 12px 14px }
    .slfs-gr .gr-ex__cell { padding: 12px 8px }
    .slfs-gr .gr-ex__k { font-size: 10px }
    .slfs-gr .gr-ex__v { font-size: 12px }
    .slfs-gr .gr-ex__steps { padding: 16px 12px }
    .slfs-gr .gr-tl { padding-right: 0 }
    .slfs-gr .gr-tl::before { display: none }
    .slfs-gr .gr-tl__step { padding-bottom: 12px }
    .slfs-gr .gr-tl__marker { position: static; width: auto; height: auto; border-radius: 20px; display: inline-flex; padding: 3px 12px; margin-bottom: 6px; box-shadow: none; font-size: 12px }
    .slfs-gr .gr-tl__body:hover { transform: none }
    .slfs-gr .gr-box { flex-direction: column }
    .slfs-gr .card__body { padding: 18px 16px }   /* طراحیِ همین بخش ۱۶px (بقیه‌ی بخش‌ها ۱۴px) */
}