/* ===== کارت‌های بروشور و راهنما =====
   یک‌جا جمع شد چون سه صفحه از آن استفاده می‌کنند: بروشورِ وب،
   راهنمای تصویری، و فایلِ PDF. سه نسخهٔ دستی یعنی سه‌جا برای
   جاافتادنِ یک تغییر. */

        /* کارت‌ها دقیقاً ۱۰۸۰×۱۰۸۰ و ۱۰۸۰×۱۹۲۰ هستند — همان اندازه‌ای که
           اینستاگرام و استوری می‌خواهند. با ‎zoom‎ کوچک نمایش داده می‌شوند تا
           روی صفحه جا شوند، ولی موقع اسکرین‌شات اندازهٔ واقعی‌شان همان است. */
        body { background: #e9ebf2; padding: 1.2rem; }
        .wrap { max-width: 1180px; margin: 0 auto; }
        h1.page { font-size: 1.4rem; margin-bottom: .3rem; }
        .lead { color: var(--muted); font-size: .92rem; margin-bottom: 1.2rem; line-height: 2; }

        .shot { position: relative; margin: 0 0 2.2rem; }
        .shot > .cap {
            font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem;
            display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
        }
        .shot > .cap .dim { font-weight: 600; color: var(--muted); font-size: .74rem; }

        /* قابِ کارت — رنگ‌ها از متغیرهای برند می‌آیند، نه دستی، تا بروشور با
           تغییرِ رنگ‌بندیِ برنامه از آن جا نماند. */
        .card1080 {
            width: 1080px; height: 1080px; transform-origin: top right;
            background: linear-gradient(150deg, #ffffff 0%, #f5faf7 55%, var(--brand-soft) 100%);
            border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
            display: flex; flex-direction: column; padding: 58px 62px;
            font-family: 'Vazirmatn', Tahoma, sans-serif; position: relative;
        }
        .card1080.story { height: 1920px; }
        .card1080.dark {
            background: var(--grad-dark);
            color: #fff; border-color: var(--charcoal);
        }
        /* روی صفحه کوچک می‌شود؛ خروجیِ اسکرین‌شات همان ۱۰۸۰ است */
        .scaled { zoom: .46; }

        .c-head { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
        .c-head .mark { width: 84px; height: 84px; border-radius: 20px; }
        .c-head .bn { font-size: 44px; font-weight: 800; letter-spacing: .02em; }
        .c-head .bn i { color: var(--brand); font-style: normal; }
        .dark .c-head .bn i { color: #57d69b; }
        .c-head .sl { font-size: 21px; color: var(--muted); font-weight: 600; }
        .dark .c-head .sl { color: #a9b4bd; }

        .c-title { font-size: 62px; font-weight: 800; line-height: 1.3; margin-bottom: 12px; }
        .c-title em { font-style: normal; color: var(--brand); }
        .dark .c-title em { color: #57d69b; }
        .c-sub { font-size: 28px; color: #4a5165; line-height: 1.75; margin-bottom: 30px; }
        .dark .c-sub { color: #b9c4cd; }

        .c-list { display: flex; flex-direction: column; gap: 22px; flex: 1; }
        .c-item { display: flex; gap: 18px; align-items: flex-start; }
        .c-item .ico {
            width: 58px; height: 58px; border-radius: 15px; background: var(--brand-soft);
            display: grid; place-items: center; flex: 0 0 auto; color: var(--brand);
        }
        .dark .c-item .ico { background: rgba(87,214,155,.14); color: #57d69b; }
        .c-item .ico svg { width: 32px; height: 32px; }
        .c-item .tx b { display: block; font-size: 30px; font-weight: 800; margin-bottom: 3px; }
        .c-item .tx span { font-size: 24px; color: var(--muted); line-height: 1.65; }
        .dark .c-item .tx span { color: #aab5bf; }

        .c-foot {
            margin-top: 26px; padding-top: 22px; border-top: 2px dashed var(--line);
            display: flex; align-items: center; gap: 18px; font-size: 26px; font-weight: 700;
        }
        .dark .c-foot { border-top-color: rgba(255,255,255,.16); }
        .c-foot .url { color: var(--brand); font-weight: 800; direction: ltr; }
        .dark .c-foot .url { color: #57d69b; }
        .c-foot .sp { flex: 1; }
        .c-foot .qr { background: #fff; padding: 10px; border-radius: 14px; }

        .stat-row { display: flex; gap: 18px; margin-bottom: 36px; }
        .stat-box {
            flex: 1; background: rgba(47,158,104,.09); border-radius: 20px; padding: 22px 20px;
            text-align: center;
        }
        .dark .stat-box { background: rgba(87,214,155,.12); }
        .stat-box .n { font-size: 46px; font-weight: 800; color: var(--brand); }
        .dark .stat-box .n { color: #57d69b; }
        .stat-box .k { font-size: 22px; color: var(--muted); font-weight: 600; }
        .dark .stat-box .k { color: #aab5bf; }

        /* متن‌های آمادهٔ کپی */
        .copybox { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
        .copybox h3 { font-size: .95rem; margin-bottom: .5rem; }
        .copybox pre {
            white-space: pre-wrap; font-family: inherit; font-size: .86rem; line-height: 2.1;
            background: #f7f8fb; border-radius: 12px; padding: .8rem .9rem; margin-bottom: .6rem;
        }
        .toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
        @media print { .toolbar, .copybox, .lead, h1.page { display: none !important; } .scaled { zoom: 1; } }

/* ---------- گام‌های راهنما ---------- */
        body { background: #e9ebf2; padding: 1.2rem; }
        .wrap { max-width: 1180px; margin: 0 auto; }
        h1.page { font-size: 1.4rem; margin-bottom: .3rem; }
        .lead { color: var(--muted); font-size: .92rem; margin-bottom: 1.2rem; line-height: 2; }
        .toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

        .shot { margin: 0 0 2.2rem; }
        .shot > .cap {
            font-size: .82rem; font-weight: 800; color: var(--ink); margin-bottom: .5rem;
            display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
        }
        .shot > .cap .dim { font-weight: 600; color: var(--muted); font-size: .74rem; }

        /* هر گام یک کارتِ ۱۰۸۰×۱۰۸۰ است — همان اندازهٔ پستِ اینستاگرام،
           تا اسکرین‌شات مستقیم قابلِ گذاشتن باشد. */
        .step {
            width: 1080px; height: 1080px; position: relative; overflow: hidden;
            background: linear-gradient(150deg, #ffffff 0%, #f5faf7 55%, var(--brand-soft) 100%);
            border: 1px solid var(--line); border-radius: 28px;
            padding: 52px 58px; display: flex; flex-direction: column;
            font-family: 'Vazirmatn', Tahoma, sans-serif;
            transform-origin: top right;
        }
        .scaled { zoom: .46; }

        .s-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
        .s-head .num {
            width: 62px; height: 62px; border-radius: 50%; background: var(--brand); color: #fff;
            display: grid; place-items: center; font-size: 32px; font-weight: 800; flex: 0 0 auto;
        }
        .s-head .t { font-size: 44px; font-weight: 800; line-height: 1.3; }
        .s-head .u { font-size: 23px; color: var(--muted); font-weight: 600; direction: ltr; text-align: right; }

        .s-body { display: flex; gap: 34px; flex: 1; min-height: 0; }

        /* ستونِ توضیح‌ها سمتِ راست می‌افتد و گوشی سمتِ چپ: در ‎rtl‎ اولین فرزندِ
           ‎flex‎ سمتِ راست می‌نشیند و ‎.s-notes‎ اول آمده. فلش‌ها هم بر همین
           اساس از لبهٔ چپِ توضیح به لبهٔ راستِ نشانه می‌روند. */
        .s-notes { flex: 1; display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
        .s-note {
            display: flex; gap: 16px; align-items: flex-start;
            background: rgba(255,255,255,.72); border: 1px solid var(--line);
            border-radius: 18px; padding: 18px 20px;
        }
        .s-note .b {
            width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
            background: var(--danger); color: #fff; display: grid; place-items: center;
            font-size: 24px; font-weight: 800;
        }
        .s-note.calm .b { background: var(--brand); }
        .s-note .tx b { display: block; font-size: 28px; font-weight: 800; margin-bottom: 3px; }
        .s-note .tx span { display: block; font-size: 23px; color: var(--muted); line-height: 1.6; }

        /* قابِ گوشی */
        .s-phone { flex: 0 0 auto; position: relative; }
        .s-phone .bezel {
            background: var(--charcoal); border-radius: 42px; padding: 14px;
            box-shadow: 0 24px 48px -16px rgba(25,28,33,.35);
        }
        .s-phone iframe {
            display: block; width: 390px; height: 800px; border: 0; border-radius: 28px;
            background: #fff; transform-origin: top right;
            /* قاب برای دیدن است نه کارکردن: کلیک داخلش کاربر را وسطِ یک فرمِ
               نیمه‌کاره می‌انداخت. برای ثبت‌نام باید دکمهٔ زیرِ صفحه را بزند. */
            pointer-events: none;
        }

        /* لایهٔ فلش‌ها — روی کلِ کارت، تا فلش بتواند از توضیح تا داخلِ گوشی برود */
        /* ‎width/height‎ از CSS می‌آید و نه از صفت، وگرنه SVG به اندازهٔ
           border-box کشیده می‌شود و ۴ پیکسل از کارت بیرون می‌زند. */
        .s-arrows { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }

        @media print { .toolbar, .lead, h1.page, .cap { display: none !important; } .scaled { zoom: 1; } }

/* ---------- پست‌های اینستاگرام ----------
   ساده‌تر از کارت‌های بروشور: در شبکهٔ اینستاگرام تصویرِ کوچک دیده می‌شود و
   کارتِ پرمتن آنجا فقط یک لکه است. یک جملهٔ درشت، یک زیرنویس، تمام. */
.post1080 {
    width: 1080px; height: 1080px; transform-origin: top right;
    background: linear-gradient(155deg, #ffffff 0%, #f4faf7 50%, var(--brand-soft) 100%);
    border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
    display: flex; flex-direction: column; padding: 70px 72px;
    font-family: 'Vazirmatn', Tahoma, sans-serif; position: relative;
}
.post1080.dark { background: var(--grad-dark); color: #fff; border-color: var(--charcoal); }

.post1080 .sp { flex: 1; }
.p-top { display: flex; align-items: center; gap: 18px; }
.p-top .mark { width: 66px; height: 66px; border-radius: 17px; }
.p-top .bn { font-size: 33px; font-weight: 800; letter-spacing: .02em; }
.p-top .bn i { color: var(--brand); font-style: normal; }
.dark .p-top .bn i { color: #57d69b; }
.p-top .tag {
    font-size: 22px; font-weight: 700; color: var(--brand);
    background: rgba(47,158,104,.12); border-radius: 999px; padding: 9px 22px;
}
.dark .p-top .tag { color: #57d69b; background: rgba(87,214,155,.16); }

.p-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.p-ico {
    width: 96px; height: 96px; border-radius: 26px; background: var(--brand-soft);
    display: grid; place-items: center; color: var(--brand); margin-bottom: 34px;
}
.dark .p-ico { background: rgba(87,214,155,.14); color: #57d69b; }
.p-ico svg { width: 54px; height: 54px; }

.p-title { font-size: 82px; font-weight: 800; line-height: 1.28; margin-bottom: 22px; }
.p-title em { font-style: normal; color: var(--brand); }
.dark .p-title em { color: #57d69b; }
.p-sub { font-size: 32px; line-height: 1.7; color: #4a5165; }
.dark .p-sub { color: #b9c4cd; }

.p-foot {
    display: flex; align-items: center; gap: 18px;
    border-top: 2px dashed var(--line); padding-top: 26px;
    font-size: 28px; font-weight: 700;
}
.dark .p-foot { border-top-color: rgba(255,255,255,.16); }
.p-foot .url { color: var(--brand); font-weight: 800; direction: ltr; }
.dark .p-foot .url { color: #57d69b; }
.p-foot .hint { color: var(--muted); font-weight: 600; }
.dark .p-foot .hint { color: #a9b4bd; }

/* ---------- جعبهٔ اشتراک‌گذاری ---------- */
.share { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
         padding: 1rem 1.1rem; margin-bottom: 1.6rem; }
.share h3 { font-size: .98rem; margin-bottom: .3rem; display: flex; align-items: center; gap: .4rem; }
.share .share-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 .6rem; }
.share .share-pre {
    white-space: pre-wrap; font-family: inherit; font-size: .84rem; line-height: 2;
    background: #f7f8fb; border-radius: 12px; padding: .8rem .9rem;
}


/* ---- گام‌های راهنما روی گوشی ----
   هر گام یک کارتِ ثابتِ ۱۰۸۰×۱۰۸۰ است (اندازهٔ پستِ اینستاگرام) که با
   ‎zoom: .46‎ کوچک می‌شود — یعنی ۴۹۷ پیکسل، که در گوشیِ ۳۷۵ پیکسلی جا
   نمی‌شود و صفحه را ۱۴۱ پیکسل به پهنا می‌کشد. چون صفحه ‎rtl‎ است، این
   سرریز به سمتِ چپ می‌رود و در نگاهِ اول هم دیده نمی‌شود؛ فقط صفحه
   بی‌دلیل کشیده می‌شود.

   ‎screen‎ گفته شده تا با ‎@media print‎ بالاتر که ‎zoom: 1‎ می‌گذارد
   تصادم نکند. فلش‌ها هم مشکلی ندارند: ضریب را در زمان اجرا از نسبتِ
   ‎stepBox.width / step.offsetWidth‎ می‌گیرند، نه از عددِ ثابت. */
@media screen and (max-width: 560px) { .scaled { zoom: .3; } }