/* ============================================================
   گنج دانش — استایل مخصوص صفحه تماس با ما

   قواعد رعایت‌شده (مطابق Design_System/README.md):
     • هیچ رنگ یا فاصله‌ی خام — فقط var(--gd-*)
     • موبایل‌اول: پایه برای موبایل، بعد فقط min-width
     • خاصیت منطقی (inline/block) به‌جای چپ و راست
     • هدف لمسی حداقل ۴۴ پیکسل

   ⚠ ترتیب لود: gd-tokens ← gd-components ← Home_Page ← همین فایل.
     چون Home_Page.css بعد از gd-components می‌آید، هر کلاسی که در
     هر دو تعریف شده باشد نسخه‌ی Home_Page را می‌گیرد. یک مورد را
     همین‌جا برمی‌گردانیم (پایین را ببین).
   ============================================================ */

/* ════════ ۰ — برگرداندن چیزی که Home_Page.css خنثی کرده ════════
   .gd-container--narrow در gd-components.css تعریف شده، ولی
   .gd-container در Home_Page.css بعد از آن می‌آید و با همان
   specificity ‏(۰،۱،۰) مقدار max-width را پس می‌گیرد.
   پس اینجا دوباره و بعد از هر دو نوشته می‌شود. */
/* ⚠ کانتینر این صفحه عمداً از بقیه‌ی سایت باریک‌تر است.
   توکن --gd-container روی نمایشگر بزرگ ۱۴۴۰ می‌شود، و آن عرض برای
   صفحه‌ای که محتوایش متن و فرم است یعنی سطرهای خیلی بلند و حسِ
   «همه‌چیز ریز و پخش». ۱۲۰۰ سقف منطقی این صفحه است. */
.gd-contact .gd-container {
    max-width: min(var(--gd-container), 1200px);
}

.gd-contact .gd-container--narrow {
    max-width: min(var(--gd-container), 760px);
}

/* ریتم عمودی یکدست. پیش‌فرض سکشن تا ۷۲px بالا و پایین می‌رفت و با
   شش بخش، صفحه بی‌دلیل بلند می‌شد. */
.gd-contact .gd-section { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }

/* همه‌ی تیترهای بخش یک اندازه — قبلاً بعضی ۲۲ و بعضی ۱۶ پیکسل بودند */
.gd-contact .gd-section__head    { margin-block-end: var(--gd-space-6); }
.gd-contact .gd-section__head h2 { font-size: var(--gd-text-2xl); line-height: var(--gd-lh-tight); }
.gd-contact .gd-section__head p  { max-width: 60ch; margin-inline: auto; font-size: var(--gd-text-md); }

/* یک‌درمیان کردن پس‌زمینه — بدون این، بخش فرم و بخش نقشه هر دو
   surface-soft بودند و به هم می‌چسبیدند و مرزشان گم می‌شد.
   ترتیب: سربرگ روشن · کانال‌ها سفید · فرم روشن · نقشه سفید · سوالات روشن */
.gd-contact .gd-map { background: var(--gd-surface); }
.gd-contact .gd-faq { background: var(--gd-surface-soft); }

/* تله‌ی دوم از همان جنس: `.gd-home a { color: inherit }` در Home_Page.css
   با specificity ‏(۰،۲،۰) بعد از `.gd-body a` و `.gd-crumbs a` می‌آید و
   رنگ همه‌ی لینک‌ها را می‌خورد. لینک‌هایی که باید لینک به نظر برسند
   اینجا صریح رنگ می‌گیرند. */
.gd-contact .gd-crumbs a       { color: var(--gd-muted); }
.gd-contact .gd-crumbs a:hover { color: var(--gd-primary); }

.gd-facts dd a,
.gd-faq__answer a {
    color: var(--gd-primary);
    text-decoration: none;
}
.gd-facts dd a:hover,
.gd-faq__answer a:hover { text-decoration: underline; }

/* ════════ ۱ — سربرگ صفحه ════════ */
.gd-contact__top {
    padding-block: var(--gd-space-6) var(--gd-space-4);
    background: var(--gd-surface-soft);
    border-block-end: 1px solid var(--gd-line);
}

.gd-contact__title {
    margin: var(--gd-space-4) 0 var(--gd-space-2);
    font-size: var(--gd-text-3xl);
    line-height: var(--gd-lh-tight);
    color: var(--gd-ink-strong);
}

.gd-contact__lead {
    margin: 0;
    max-width: 60ch;
    color: var(--gd-muted);
    font-size: var(--gd-text-md);
    line-height: var(--gd-lh-relaxed);
}

/* ⭐ ۲۱ شهریور ۱۴۰۵ — سربرگ دیگر فقط یک تیتر روی خاکستری نیست.
   دو هاله‌ی کم‌رنگ از رنگِ برند، سه دکمه برای سه راهِ اصلی، و یک ورودِ
   کوتاه. همه از توکن‌اند؛ اگر مرورگر color-mix نشناسد، کلِ این declaration
   نامعتبر می‌شود و همان پس‌زمینه‌ی ساده‌ی بالا می‌ماند. */
.gd-contact__top {
    position: relative; isolation: isolate;
    background:
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--gd-primary) 11%, transparent) 0, transparent 40%),
        radial-gradient(circle at 92% 95%, color-mix(in srgb, var(--gd-primary) 7%, transparent) 0, transparent 36%),
        var(--gd-surface-soft);
}
.gd-contact__cta {
    display: flex; flex-wrap: wrap; gap: var(--gd-space-3);
    margin-block-start: var(--gd-space-5);
}
.gd-contact__cta .gd-btn { gap: var(--gd-space-2); min-height: 44px; }

/* ورودِ سربرگ — این بخش بالای صفحه است و ظاهرشدنِ اسکرولی به آن نمی‌رسد،
   پس CSS خودش. فقط در no-preference؛ کاهشِ حرکت یعنی بی‌حرکت. */
@media (prefers-reduced-motion: no-preference) {
    .gd-contact__top .gd-container > * { animation: gd-ct-rise .6s cubic-bezier(.2, 0, .2, 1) both; }
    .gd-contact__top .gd-container > :nth-child(2) { animation-delay: .07s; }
    .gd-contact__top .gd-container > :nth-child(3) { animation-delay: .14s; }
    .gd-contact__top .gd-container > :nth-child(4) { animation-delay: .21s; }
}
@keyframes gd-ct-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 767px) {
    /* دو ستون، و «ارسال پیام» تمام‌عرض — انگشت‌خور و بی‌شکستگی */
    .gd-contact__cta { display: grid; grid-template-columns: 1fr 1fr; }
    .gd-contact__cta .gd-btn { justify-content: center; }
    .gd-contact__cta .gd-btn--primary { grid-column: 1 / -1; }
}

/* لینک فعال در ناوبری */
.gd-nav__links a.is-active {
    color: var(--gd-primary);
    font-weight: var(--gd-fw-bold);
}
.gd-nav__links a.is-active i { color: var(--gd-primary); }

/* ════════ ۲ — کارت‌های راه ارتباطی ════════ */
.gd-channels {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-grid-gap);
}

.gd-channel {
    display: flex;
    align-items: center;
    gap: var(--gd-space-4);
    min-height: 44px;
    padding: var(--gd-space-4);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    background: var(--gd-surface);
    box-shadow: var(--gd-shadow-1);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                box-shadow var(--gd-dur-base) var(--gd-ease);
}

.gd-channel:hover {
    border-color: var(--gd-primary-border);
    box-shadow: var(--gd-shadow-2);
    text-decoration: none;
}

.gd-channel__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--gd-radius);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
    font-size: var(--gd-text-lg);
}

.gd-channel__body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-channel__label { font-size: var(--gd-text-xs); color: var(--gd-muted); }

.gd-channel__value {
    font-size: var(--gd-text-lg);
    font-weight: var(--gd-fw-bold);
    color: var(--gd-ink-strong);
    /* شماره و ایمیل نباید کارت را بشکنند */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: start;
}

/* ایمیل و اینستاگرام لاتین‌اند؛ در کارت راست‌چین بمانند */
.gd-channel__value:not(.gd-num) { unicode-bidi: plaintext; }

.gd-channel__hint { font-size: var(--gd-text-2xs); color: var(--gd-muted); }

/* ════════ ۳ — چیدمان فرم و ستون کناری ════════ */
.gd-contact__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-space-8);
    align-items: start;
}

.gd-contact__formhead h2 {
    margin: 0 0 var(--gd-space-2);
    font-size: var(--gd-text-2xl);
    color: var(--gd-ink-strong);
}
.gd-contact__formhead p {
    margin: 0 0 var(--gd-space-6);
    max-width: 58ch;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}

/* ════════ ۴ — فرم ════════ */
.gd-cform {
    padding: var(--gd-space-5);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    background: var(--gd-surface);
    box-shadow: var(--gd-shadow-1);
}

.gd-cform__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-space-5);
}

.gd-field--full { grid-column: 1 / -1; }
.gd-field[hidden] { display: none; }

.gd-field__label .gd-req {
    color: var(--gd-danger);
    font-style: normal;
    margin-inline-start: 2px;
}

/* ورودی نامعتبر — JS این کلاس را می‌گذارد و برمی‌دارد */
.gd-cform .is-invalid {
    border-color: var(--gd-danger);
    box-shadow: var(--gd-focus-ring-danger);
}

.gd-cform__consent {
    margin-block-start: var(--gd-space-5);
    padding: var(--gd-space-3);
    border-radius: var(--gd-radius);
    background: var(--gd-surface-soft);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-snug);
}

.gd-cform__foot {
    display: flex;
    flex-direction: column;
    gap: var(--gd-space-3);
    margin-block-start: var(--gd-space-5);
    padding-block-start: var(--gd-space-5);
    border-block-start: 1px solid var(--gd-line-subtle);
}

.gd-cform__foot .gd-btn { justify-content: center; width: 100%; }

.gd-cform__note {
    margin: 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
    line-height: var(--gd-lh-snug);
}
.gd-cform__note i { color: var(--gd-success); margin-inline-end: var(--gd-space-1); }

/* تله‌ی ربات — از دید کاربر و صفحه‌خوان پنهان، ولی ربات پرش می‌کند.
   display:none استفاده نشده چون بعضی ربات‌ها آن را تشخیص می‌دهند. */
.gd-hp {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ════════ ۵ — کارت‌های ستون کناری ════════ */
.gd-contact__side {
    display: flex;
    flex-direction: column;
    gap: var(--gd-space-5);
}

.gd-sidecard { padding: var(--gd-space-5); }

.gd-sidecard h3 {
    display: flex;
    align-items: center;
    gap: var(--gd-space-2);
    margin: 0 0 var(--gd-space-4);
    font-size: var(--gd-text-md);
    color: var(--gd-ink-strong);
}
.gd-sidecard h3 i { color: var(--gd-primary); }

.gd-sidecard__addr {
    margin: 0 0 var(--gd-space-4);
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}

.gd-sidecard__hint {
    margin: var(--gd-space-4) 0 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
    line-height: var(--gd-lh-normal);
}
.gd-sidecard__hint i { color: var(--gd-primary); margin-inline-end: var(--gd-space-1); }

.gd-sidecard--accent {
    border-color: var(--gd-accent-border);
    background: var(--gd-accent-soft);
}
.gd-sidecard--accent h3 i { color: var(--gd-accent-text); }
.gd-sidecard--accent p {
    margin: 0 0 var(--gd-space-4);
    color: var(--gd-ink);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}
.gd-sidecard--accent .gd-btn { justify-content: center; }

/* جدول کوچک اطلاعات تماس */
.gd-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--gd-space-2) var(--gd-space-4);
    margin: 0 0 var(--gd-space-5);
}
.gd-facts dt { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-facts dd {
    margin: 0;
    color: var(--gd-ink-strong);
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-medium);
    overflow-wrap: anywhere;
}

/* ════════ ۶ — ساعات کاری ════════ */
.gd-hours { margin: 0; padding: 0; list-style: none; }

.gd-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-space-3);
    padding-block: var(--gd-space-3);
    border-block-end: 1px solid var(--gd-line-subtle);
    font-size: var(--gd-text-sm);
}
.gd-hours li:last-child { border-block-end: 0; }
.gd-hours span   { color: var(--gd-muted); }
.gd-hours strong { color: var(--gd-ink-strong); font-weight: var(--gd-fw-bold); }
.gd-hours .is-closed strong { color: var(--gd-danger); }

/* ════════ ۶.۵ — انتخاب مسیریاب ════════ */
.gd-navapps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gd-space-3);
    margin-block-start: var(--gd-space-6);
}

.gd-navapps__label { color: var(--gd-muted); font-size: var(--gd-text-sm); }

.gd-navapps__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gd-space-3);
}

.gd-navapp {
    display: inline-flex;
    align-items: center;
    gap: var(--gd-space-2);
    min-height: 44px;
    padding: var(--gd-space-2) var(--gd-space-4);
    border: 1px solid var(--gd-line-strong);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface);
    color: var(--gd-ink);
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-medium);
    transition: border-color var(--gd-dur-base) var(--gd-ease),
                color var(--gd-dur-base) var(--gd-ease);
}
.gd-navapp:hover { border-color: var(--gd-primary); color: var(--gd-primary); text-decoration: none; }
.gd-navapp i     { font-size: var(--gd-text-md); color: var(--gd-primary); }

/* ════════ ۶.۶ — دسترسی با حمل و نقل عمومی ════════ */
.gd-transit__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-transit__item {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-space-4);
    padding: var(--gd-space-4);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-surface);
}

.gd-transit__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--gd-radius-sm);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
}

.gd-transit__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-space-2); min-width: 0; }
.gd-transit__body strong { color: var(--gd-ink-strong); font-size: var(--gd-text-md); }

.gd-transit__line {
    display: inline-block;
    padding: 2px var(--gd-space-2);
    border: 1px solid var(--gd-primary-border);
    border-radius: var(--gd-radius-full);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
    font-size: var(--gd-text-2xs);
    font-weight: var(--gd-fw-bold);
}
.gd-transit__body p {
    flex-basis: 100%;
    margin: 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-normal);
}

.gd-transit__note {
    margin: var(--gd-space-5) 0 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
    text-align: center;
}
.gd-transit__note i { color: var(--gd-primary); margin-inline-end: var(--gd-space-1); }

/* دو دکمه‌ی کارت نشانی */
.gd-sidecard__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gd-space-2);
}
.gd-sidecard__actions .gd-btn { justify-content: center; }

/* سه پیام‌رسان در فوتر — .gd-social خودش از Home_Page.css می‌آید */
.gd-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gd-space-2);
    margin-block-start: var(--gd-space-4);
}

/* ════════════════════════════════════════════════════════════
   ۶.۷ — نقشه‌ی متحرک مترو  (پورت MetroRoutes از Claude Design)

   نکته‌های پورت:
     • همه‌ی هگزهای فایل اصلی به توکن تبدیل شدند. خوشبختانه پالت
       طراحی از قبل همان دیزاین سیستم بود، پس نگاشت یک‌به‌یک شد:
       #2563eb→primary · #a16207→accent-text · #e2e8f0→line …
     • نام کیفریم‌ها با gdm- پیشوند گرفت تا با gd-up / gd-pop
       احتمالی در Home_Page.css قاطی نشود.
     • سرعت با --gdm-speed کنترل می‌شود (۱ = عادی).
   ════════════════════════════════════════════════════════════ */
.gd-metro {
    --gdm-speed: 1;
    --gdm-loop: calc(20s / var(--gdm-speed));
    --gdm-solo: calc(6s / var(--gdm-speed));

    /* زیربخشِ «چطور بیاییم» است، پس با یک جداکننده از نقشه‌ی گوگل
       بالای خودش فاصله می‌گیرد، نه با پدینگ یک سکشن کامل. */
    margin-block-start: var(--gd-space-10);
    padding-block-start: var(--gd-space-8);
    border-block-start: 1px solid var(--gd-line);
}

.gd-metro__title {
    margin: 0 0 var(--gd-space-2);
    font-size: var(--gd-text-xl);
    line-height: var(--gd-lh-snug);
    color: var(--gd-ink-strong);
    text-align: center;
}

.gd-metro__lead {
    margin: 0 auto var(--gd-space-6);
    max-width: 52ch;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    text-align: center;
}

/* ---------- فیلتر مسیرها ---------- */
.gd-metro__filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-2);
    flex-wrap: wrap;
    margin-block-end: var(--gd-space-6);
}

.gd-metro__arrow {
    display: none;              /* موبایل: پیمایش با خود تراشه‌ها */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface);
    color: var(--gd-muted);
    cursor: pointer;
}
.gd-metro__arrow:hover { background: var(--gd-surface-hover); color: var(--gd-ink-strong); }

.gd-metro__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-1);
    padding: var(--gd-space-1);
    border-radius: var(--gd-radius-full);
    background: var(--gd-surface-sunken);
}

.gd-metro__chip {
    min-height: 36px;
    padding: var(--gd-space-2) var(--gd-space-4);
    border: 0;
    border-radius: var(--gd-radius-full);
    background: transparent;
    color: var(--gd-muted);
    font: inherit;
    font-size: var(--gd-text-sm);
    font-weight: var(--gd-fw-medium);
    cursor: pointer;
}
.gd-metro__chip.is-active {
    background: var(--gd-surface);
    color: var(--gd-ink-strong);
    box-shadow: var(--gd-shadow-1);
}

/* ---------- چیدمان ----------
   Grid است نه flex. با flex، ستون نقشه به basis و grow وابسته بود و
   اگر یکی از آن‌ها اعمال نمی‌شد ستون تا نصف جمع می‌شد و متن داخل
   viewBox زیر ۱۰px می‌رفت. با minmax، حداقلِ ستون نقشه تضمین است. */
.gd-metro__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gd-space-4);
}

/* روی موبایل هیچ ترفند ترتیبی لازم نیست: در سورس اول نقشه است و
   بعد کارت‌ها، و یک ستونِ گرید همان را نگه می‌دارد. */

.gd-metro__cards {
    display: flex;
    flex-direction: column;
    gap: var(--gd-space-4);
    justify-content: center;
}

.gd-metro__panel {
    padding: var(--gd-space-3);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    background: var(--gd-surface-soft);
}

/* جابه‌جایی دو نقشه — در فایل اصلی این کار با setInterval هر ۴۰۰ms
   و ResizeObserver انجام می‌شد. یک @media همان کار را رایگان می‌کند.

   ⚠ سلکتور عمداً دوکلاسه است. gd-components.css این را دارد:
       .gd-body img, .gd-body svg, .gd-body video { … display: block }
   که specificity اش ‏(۰،۱،۱) است و از .gd-metro__svg ‏(۰،۱،۰) قوی‌تر —
   حتی وقتی مال ما داخل @media باشد، چون media به specificity اضافه
   نمی‌کند. نتیجه‌اش این بود که هر دو نقشه با هم نمایش داده می‌شدند.
   .gd-metro .gd-metro__svg یعنی ‏(۰،۲،۰) و برنده می‌شود. */
.gd-metro .gd-metro__svg      { width: 100%; height: auto; display: none; }
.gd-metro .gd-metro__svg--mob { display: block; }

/* ---------- کارت مسیر ---------- */
.gd-metro__card {
    display: flex;
    gap: var(--gd-space-3);
    width: 100%;
    padding: var(--gd-space-5);
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius-lg);
    background: var(--gd-surface);
    box-shadow: var(--gd-shadow-1);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: opacity var(--gd-dur-base) var(--gd-ease);
}

.gd-metro__card-icon {
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--gd-radius);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
    font-size: var(--gd-text-lg);
}
.gd-metro__card--l3 .gd-metro__card-icon { background: var(--gd-surface-sunken); color: var(--gd-ink-strong); }

.gd-metro__card-body { display: flex; flex: 1; flex-direction: column; gap: var(--gd-space-2); min-width: 0; }
.gd-metro__card-head { display: flex; align-items: center; gap: var(--gd-space-2); flex-wrap: wrap; }
.gd-metro__card-name { font-size: var(--gd-text-lg); font-weight: var(--gd-fw-bold); color: var(--gd-ink-strong); }

.gd-metro__card-line {
    padding: 3px var(--gd-space-3);
    border-radius: var(--gd-radius-full);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
    font-size: var(--gd-text-2xs);
    font-weight: var(--gd-fw-medium);
}
.gd-metro__card--l3 .gd-metro__card-line { background: var(--gd-surface-sunken); color: var(--gd-ink-strong); }

.gd-metro__card-how { color: var(--gd-muted); font-size: var(--gd-text-sm); line-height: var(--gd-lh-relaxed); }

/* ورود کارت‌ها و نوار فیلتر + روشن شدنشان هم‌زمان با مسیر روی نقشه */
.gd-metro__filter { animation: gdm-up .5s cubic-bezier(.2,0,.2,1) .1s both; }

.gd-metro__card[data-route="1"] { animation: gdm-up .5s cubic-bezier(.2,0,.2,1) .15s both, gdm-hl1 var(--gdm-loop) linear infinite; }
.gd-metro__card[data-route="2"] { animation: gdm-up .5s cubic-bezier(.2,0,.2,1) .25s both, gdm-hl2 var(--gdm-loop) linear infinite; }
.gd-metro__card[data-route="3"] { animation: gdm-up .5s cubic-bezier(.2,0,.2,1) .35s both, gdm-hl3 var(--gdm-loop) linear infinite; }

/* وقتی یک مسیر انتخاب شده، چرخه‌ی روشن‌شدن خاموش و کنترل با JS است */
.gd-metro.is-solo .gd-metro__card { animation: none; opacity: .55; }
.gd-metro.is-solo .gd-metro__card.is-active {
    opacity: 1;
    border-color: var(--gd-primary);
    background: var(--gd-primary-soft);
    box-shadow: var(--gd-shadow-2);
}

/* ---------- پانویس ---------- */
.gd-metro__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-2);
    margin: var(--gd-space-6) 0 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-normal);
    text-align: center;
}
.gd-metro__note i { color: var(--gd-primary); }

/* ════════ اجزای داخل SVG ════════ */
.gd-metro__svg text { font-family: var(--gd-font); }

.gd-metro__line { fill: none; stroke-width: 9; stroke-linecap: round; }
.gd-metro__line--m { stroke-width: 10; }
.gd-metro__line--1 { stroke: var(--gd-primary); }
.gd-metro__line--3 { stroke: var(--gd-ink-strong); }

.gd-metro__route {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 9 9;
}
.gd-metro__route--m    { stroke-width: 5; stroke-dasharray: 10 10; }
.gd-metro__route--walk { stroke: var(--gd-gray-600); }
.gd-metro__route--taxi { stroke: var(--gd-accent-text); }

.gd-metro__pill--1 { fill: var(--gd-primary); }
.gd-metro__pill--3 { fill: var(--gd-ink-strong); }
.gd-metro__pill-text {
    fill: var(--gd-gray-0);
    font-size: 17px;
    font-weight: var(--gd-fw-medium);
    text-anchor: middle;
}
.gd-metro__pill-text--m { font-size: 18px; }

.gd-metro__dot { fill: var(--gd-gray-0); stroke-width: 5; }
.gd-metro__dot--1, .gd-metro__dot--2 { stroke: var(--gd-primary); }
.gd-metro__dot--3 { stroke: var(--gd-ink-strong); }

.gd-metro__ping { fill: none; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.gd-metro__ping--1, .gd-metro__ping--2 { stroke: var(--gd-primary); }
.gd-metro__ping--3 { stroke: var(--gd-ink-strong); }

.gd-metro__label {
    fill: var(--gd-ink-strong);
    font-size: 20px;
    font-weight: var(--gd-fw-medium);
    text-anchor: middle;
}
.gd-metro__label--m { font-size: 23px; }

.gd-metro__train-body--1 { fill: var(--gd-primary); }
.gd-metro__train-body--3 { fill: var(--gd-ink-strong); }
.gd-metro__train-win     { fill: var(--gd-gray-0); opacity: .9; }
.gd-metro__train-win--dim{ opacity: .55; }

.gd-metro__taxi-body { fill: var(--gd-amber-500); }
.gd-metro__taxi-top  { fill: var(--gd-accent-text); }
.gd-metro__taxi-win  { fill: var(--gd-amber-100); }
.gd-metro__wheel     { fill: var(--gd-ink-strong); }

.gd-metro__body circle { fill: var(--gd-ink-strong); }
.gd-metro__body path   { stroke: var(--gd-ink-strong); stroke-linecap: round; fill: none; }
.gd-metro__leg         { transform-box: fill-box; transform-origin: top center; }

/* برچسب خالی باید همیشه پنهان بماند، حتی وقتی مسیرش انتخاب شده و
   قانون «نشان بده»ی بالا (۰،۴،۰) فعال است. */
.gd-metro__badge--off     { display: none !important; }
.gd-metro__badge-bg--walk { fill: var(--gd-ink-strong); }
.gd-metro__badge-bg--taxi { fill: var(--gd-accent-text); }
.gd-metro__badge-text {
    fill: var(--gd-gray-0);
    font-size: 16px;
    font-weight: var(--gd-fw-medium);
    text-anchor: middle;
}
.gd-metro__badge-text--m { font-size: 18px; }

.gd-metro__store       { fill: var(--gd-primary); }
.gd-metro__store-ring  { fill: none; stroke: var(--gd-primary); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.gd-metro__store-icon  { fill: var(--gd-gray-0); }
.gd-metro__store-icon--roof { opacity: .85; }

.gd-metro__dest {
    fill: var(--gd-ink-strong);
    font-size: 22px;
    font-weight: var(--gd-fw-bold);
    text-anchor: middle;
}
.gd-metro__dest--m { font-size: 26px; }

/* ════════ کیفریم‌ها ════════ */
@keyframes gdm-up   { from { opacity: 0; translate: 0 10px } to { opacity: 1; translate: 0 0 } }
@keyframes gdm-draw { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }

/* روشن شدن کارت هم‌زمان با کشیده شدن مسیرش روی نقشه.
   بازه‌ها عمداً با gdm-p1/p2/p3 هم‌تراز است: مسیر ۱ حوالی ۲۰–۳۴٪،
   مسیر ۲ حوالی ۴۰–۵۴٪، مسیر ۳ حوالی ۶۴–۸۹٪، و ۸۰–۸۹٪ که هر سه با
   هم دیده می‌شوند. اگر تایمینگ مسیرها را عوض کردی، این‌ها را هم عوض کن. */
@keyframes gdm-hl1 {
    0%, 18%   { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
    20%, 34%  { border-color: var(--gd-primary); background: var(--gd-primary-soft); box-shadow: var(--gd-shadow-2) }
    36%, 78%  { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
    80%, 89%  { border-color: var(--gd-primary); background: var(--gd-primary-soft); box-shadow: var(--gd-shadow-2) }
    92%, 100% { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
}
@keyframes gdm-hl2 {
    0%, 38%   { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
    40%, 54%  { border-color: var(--gd-primary); background: var(--gd-primary-soft); box-shadow: var(--gd-shadow-2) }
    56%, 80%  { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
    82%, 89%  { border-color: var(--gd-primary); background: var(--gd-primary-soft); box-shadow: var(--gd-shadow-2) }
    92%, 100% { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
}
@keyframes gdm-hl3 {
    0%, 62%   { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
    64%, 89%  { border-color: var(--gd-primary); background: var(--gd-primary-soft); box-shadow: var(--gd-shadow-2) }
    92%, 100% { border-color: var(--gd-line); background: var(--gd-surface); box-shadow: var(--gd-shadow-1) }
}
@keyframes gdm-pop  { from { opacity: 0; scale: .4 } to { opacity: 1; scale: 1 } }
@keyframes gdm-step { 0%, 100% { translate: 0 0 } 50% { translate: 0 -1.6px } }
@keyframes gdm-legs { 0%, 100% { rotate: 16deg } 50% { rotate: -16deg } }
@keyframes gdm-store{ 0% { scale: 1; opacity: .45 } 70%, 100% { scale: 2.4; opacity: 0 } }
@keyframes gdm-ssp  { 0%, 18% { scale: 1; opacity: 0 } 20% { opacity: .5 } 32%, 100% { scale: 2.8; opacity: 0 } }

@keyframes gdm-p1 { 0%,20%{stroke-dashoffset:100;opacity:0} 22%{opacity:1;stroke-dashoffset:100} 30%,89%{stroke-dashoffset:0;opacity:1} 94%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes gdm-p2 { 0%,40%{stroke-dashoffset:100;opacity:0} 42%{opacity:1;stroke-dashoffset:100} 50%,89%{stroke-dashoffset:0;opacity:1} 94%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes gdm-p3 { 0%,64%{stroke-dashoffset:100;opacity:0} 66%{opacity:1;stroke-dashoffset:100} 75%,89%{stroke-dashoffset:0;opacity:1} 94%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes gdm-sdraw { 0%,20%{stroke-dashoffset:100;opacity:1} 60%,100%{stroke-dashoffset:0;opacity:1} }

@keyframes gdm-w1 { 0%,21%{offset-distance:0%;opacity:0} 22%{offset-distance:0%;opacity:1} 30%{offset-distance:100%;opacity:1} 32%,100%{offset-distance:100%;opacity:0} }
@keyframes gdm-t2 { 0%,41%{offset-distance:0%;opacity:0} 42%{offset-distance:0%;opacity:1} 47.5%{offset-distance:74%;opacity:1} 49%,100%{offset-distance:74%;opacity:0} }
@keyframes gdm-w2 { 0%,47.4%{offset-distance:74%;opacity:0} 47.5%{offset-distance:74%;opacity:1} 50%{offset-distance:100%;opacity:1} 52%,100%{offset-distance:100%;opacity:0} }
@keyframes gdm-t3 { 0%,65%{offset-distance:0%;opacity:0} 66%{offset-distance:0%;opacity:1} 72.5%{offset-distance:87%;opacity:1} 74%,100%{offset-distance:87%;opacity:0} }
@keyframes gdm-w3 { 0%,72.4%{offset-distance:87%;opacity:0} 72.5%{offset-distance:87%;opacity:1} 75%{offset-distance:100%;opacity:1} 77%,100%{offset-distance:100%;opacity:0} }

@keyframes gdm-sw1 { 0%,23%{offset-distance:0%;opacity:0} 25%{offset-distance:0%;opacity:1} 80%{offset-distance:100%;opacity:1} 88%,100%{offset-distance:100%;opacity:0} }
@keyframes gdm-st2 { 0%,23%{offset-distance:0%;opacity:0} 25%{offset-distance:0%;opacity:1} 64%{offset-distance:74%;opacity:1} 66%,100%{offset-distance:74%;opacity:0} }
@keyframes gdm-sw2 { 0%,63%{offset-distance:74%;opacity:0} 64%{offset-distance:74%;opacity:1} 82%{offset-distance:100%;opacity:1} 90%,100%{offset-distance:100%;opacity:0} }
@keyframes gdm-st3 { 0%,23%{offset-distance:0%;opacity:0} 25%{offset-distance:0%;opacity:1} 68%{offset-distance:87%;opacity:1} 70%,100%{offset-distance:87%;opacity:0} }
@keyframes gdm-sw3 { 0%,67%{offset-distance:87%;opacity:0} 68%{offset-distance:87%;opacity:1} 84%{offset-distance:100%;opacity:1} 92%,100%{offset-distance:100%;opacity:0} }

@keyframes gdm-sp1 { 0%,17%{scale:1;opacity:0} 18%{opacity:.5} 24%,100%{scale:2.8;opacity:0} }
@keyframes gdm-sp2 { 0%,37%{scale:1;opacity:0} 38%{opacity:.5} 44%,100%{scale:2.8;opacity:0} }
@keyframes gdm-sp3 { 0%,61%{scale:1;opacity:0} 62%{opacity:.5} 68%,100%{scale:2.8;opacity:0} }

@keyframes gdm-train1 { 0%,9%{translate:255px 0;opacity:0} 10%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)} 18%,31%{translate:0 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)} 38%,54%{translate:-290px 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)} 60%{translate:-700px 0;opacity:1} 62%,99%{translate:-700px 0;opacity:0} 100%{translate:255px 0;opacity:0} }
@keyframes gdm-train3 { 0%,54%{translate:295px 0;opacity:0} 56%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)} 63%,89%{translate:0 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)} 95%{translate:-620px 0;opacity:1} 96%,99%{translate:-620px 0;opacity:0} 100%{translate:295px 0;opacity:0} }
@keyframes gdm-mtrain1{ 0%,9%{translate:150px 0;opacity:0} 10%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)} 18%,31%{translate:0 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)} 38%,54%{translate:-230px 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)} 60%{translate:-520px 0;opacity:1} 62%,99%{translate:-520px 0;opacity:0} 100%{translate:150px 0;opacity:0} }
@keyframes gdm-mtrain3{ 0%,54%{translate:180px 0;opacity:0} 56%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)} 63%,89%{translate:0 0;opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)} 95%{translate:-460px 0;opacity:1} 96%,99%{translate:-460px 0;opacity:0} 100%{translate:180px 0;opacity:0} }

@keyframes gdm-strain1 { 0%{translate:235px 0;opacity:0} 8%{opacity:1} 20%,100%{translate:0 0;opacity:1} }
@keyframes gdm-strain3 { 0%{translate:265px 0;opacity:0} 8%{opacity:1} 20%,100%{translate:0 0;opacity:1} }
@keyframes gdm-mstrain1{ 0%{translate:140px 0;opacity:0} 8%{opacity:1} 20%,100%{translate:0 0;opacity:1} }
@keyframes gdm-mstrain3{ 0%{translate:160px 0;opacity:0} 8%{opacity:1} 20%,100%{translate:0 0;opacity:1} }

/* ════════ حالت پیش‌فرض: چرخه‌ی ۲۰ ثانیه‌ای هر سه مسیر ════════ */
.gd-metro__route[data-r="1"], .gd-metro__badge[data-r="1"] { animation: gdm-p1 var(--gdm-loop) linear infinite; }
.gd-metro__route[data-r="2"], .gd-metro__badge[data-r="2"] { animation: gdm-p2 var(--gdm-loop) linear infinite; }
.gd-metro__route[data-r="3"], .gd-metro__badge[data-r="3"] { animation: gdm-p3 var(--gdm-loop) linear infinite; }

.gd-metro__ping--1 { animation: gdm-sp1 var(--gdm-loop) linear infinite; }
.gd-metro__ping--2 { animation: gdm-sp2 var(--gdm-loop) linear infinite; }
.gd-metro__ping--3 { animation: gdm-sp3 var(--gdm-loop) linear infinite; }

.gd-metro__walker           { animation: gdm-w1 var(--gdm-loop) linear infinite; offset-rotate: 0deg; }
.gd-metro__walker--2, .gd-metro__walker--m2 { animation-name: gdm-w2; }
.gd-metro__walker--3, .gd-metro__walker--m3 { animation-name: gdm-w3; }
.gd-metro__taxi             { animation: gdm-t2 var(--gdm-loop) linear infinite; offset-rotate: 0deg; }
.gd-metro__taxi--3, .gd-metro__taxi--m3 { animation-name: gdm-t3; }

.gd-metro__body { animation: gdm-step .5s ease-in-out infinite; }
.gd-metro__leg  { animation: gdm-legs .5s ease-in-out infinite; }
.gd-metro__leg--b { animation-direction: reverse; }

.gd-metro__train--1  { animation: gdm-train1  var(--gdm-loop) linear infinite; }
.gd-metro__train--3  { animation: gdm-train3  var(--gdm-loop) linear infinite; }
.gd-metro__train--m1 { animation: gdm-mtrain1 var(--gdm-loop) linear infinite; }
.gd-metro__train--m3 { animation: gdm-mtrain3 var(--gdm-loop) linear infinite; }

/* pathLength خاصیت CSS نیست — به‌عنوان attribute روی خود <path> است،
   تا stroke-dashoffset روی مقیاس ۰ تا ۱۰۰ کار کند نه واحد کاربری. */
.gd-metro__line       { stroke-dasharray: 100; animation: gdm-draw .9s cubic-bezier(.2,0,.2,1) both; }
.gd-metro__line--3    { animation-delay: .1s; }
.gd-metro__dot        { transform-box: fill-box; transform-origin: center; animation: gdm-pop .4s cubic-bezier(.2,0,.2,1) .7s both; }
.gd-metro__dot--3     { animation-delay: .8s; }
.gd-metro__dot--2     { animation-delay: .9s; }
.gd-metro__dot--static{ animation: none; }
.gd-metro__store-ring { animation: gdm-store 2.6s cubic-bezier(.2,0,.2,1) infinite; }

/* ════════ حالت تک‌مسیر: JS کلاس is-solo و data-active می‌گذارد ════════ */
/* ⚠ specificity اینجا حساس است. قانون «نشان بده» باید از قانون
   «پنهان کن» قوی‌تر باشد، وگرنه انتخاب یک مسیر کل نقشه را خالی
   می‌کند. برای همین is-solo در قانون دوم هم تکرار شده:
   پنهان‌کن (۰،۳،۰) < نشان‌بده (۰،۴،۰). */
.gd-metro.is-solo [data-r],
.gd-metro.is-solo [data-line] { display: none; }

.gd-metro.is-solo[data-active="1"] [data-r="1"],
.gd-metro.is-solo[data-active="2"] [data-r="2"],
.gd-metro.is-solo[data-active="3"] [data-r="3"],
.gd-metro.is-solo[data-active="1"] [data-line="1"],
.gd-metro.is-solo[data-active="2"] [data-line="1"],
.gd-metro.is-solo[data-active="3"] [data-line="3"] { display: inline; }

.gd-metro.is-solo .gd-metro__route  { animation: gdm-sdraw var(--gdm-solo) cubic-bezier(.4,0,.4,1) infinite; }
.gd-metro.is-solo .gd-metro__badge  { animation: gdm-sdraw var(--gdm-solo) cubic-bezier(.4,0,.4,1) infinite; }
.gd-metro.is-solo .gd-metro__ping   { animation: gdm-ssp   var(--gdm-solo) cubic-bezier(.2,0,.2,1) infinite; }
.gd-metro.is-solo .gd-metro__walker { animation: gdm-sw1 var(--gdm-solo) linear infinite; }
.gd-metro.is-solo .gd-metro__walker--2,
.gd-metro.is-solo .gd-metro__walker--m2 { animation-name: gdm-sw2; }
.gd-metro.is-solo .gd-metro__walker--3,
.gd-metro.is-solo .gd-metro__walker--m3 { animation-name: gdm-sw3; }
.gd-metro.is-solo .gd-metro__taxi   { animation: gdm-st2 var(--gdm-solo) linear infinite; }
.gd-metro.is-solo .gd-metro__taxi--3,
.gd-metro.is-solo .gd-metro__taxi--m3 { animation-name: gdm-st3; }
.gd-metro.is-solo .gd-metro__train--1  { animation: gdm-strain1  var(--gdm-solo) cubic-bezier(.3,0,.2,1) infinite; }
.gd-metro.is-solo .gd-metro__train--3  { animation: gdm-strain3  var(--gdm-solo) cubic-bezier(.3,0,.2,1) infinite; }
.gd-metro.is-solo .gd-metro__train--m1 { animation: gdm-mstrain1 var(--gdm-solo) cubic-bezier(.3,0,.2,1) infinite; }
.gd-metro.is-solo .gd-metro__train--m3 { animation: gdm-mstrain3 var(--gdm-solo) cubic-bezier(.3,0,.2,1) infinite; }

/* وقتی از دید خارج است، JS این کلاس را می‌گذارد و انیمیشن نفس می‌گیرد */
.gd-metro.is-paused * { animation-play-state: paused !important; }

/* offset-path در مرورگر قدیمی پشتیبانی نمی‌شود؛ آدمک و تاکسی
   بدون آن روی مبدأ گیر می‌کنند، پس اصلاً نشانشان نمی‌دهیم. */
@supports not (offset-path: path('M0 0 H1')) {
    .gd-metro__walker, .gd-metro__taxi { display: none; }
}

/* ════════ ۷ — سوالات متداول ════════ */
.gd-faq__item {
    border: 1px solid var(--gd-line);
    border-radius: var(--gd-radius);
    background: var(--gd-surface);
    margin-block-end: var(--gd-space-3);
    overflow: hidden;
}
.gd-faq__item[open] { border-color: var(--gd-primary-border); }

.gd-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-space-3);
    min-height: 44px;
    padding: var(--gd-space-4);
    cursor: pointer;
    color: var(--gd-ink-strong);
    font-size: var(--gd-text-md);
    font-weight: var(--gd-fw-medium);
    line-height: var(--gd-lh-snug);
    list-style: none;
}
.gd-faq__item summary::-webkit-details-marker { display: none; }

.gd-faq__item summary i {
    flex: 0 0 auto;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    transition: transform var(--gd-dur-base) var(--gd-ease);
}
.gd-faq__item[open] summary i { transform: rotate(180deg); color: var(--gd-primary); }

.gd-faq__answer {
    padding: 0 var(--gd-space-4) var(--gd-space-4);
    border-block-start: 1px solid var(--gd-line-subtle);
}
.gd-faq__answer p {
    margin: var(--gd-space-4) 0 0;
    color: var(--gd-muted);
    font-size: var(--gd-text-sm);
    line-height: var(--gd-lh-relaxed);
}

/* ════════ ۸ — پیام موفقیت ════════ */
.gd-done {
    padding: var(--gd-space-8) var(--gd-space-5);
    text-align: center;
}

.gd-done__icon {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-block-end: var(--gd-space-5);
    border-radius: var(--gd-radius-full);
    background: var(--gd-success-soft);
    color: var(--gd-success);
    font-size: var(--gd-text-3xl);
}

.gd-done__title { margin: 0 0 var(--gd-space-3); font-size: var(--gd-text-2xl); color: var(--gd-ink-strong); }

.gd-done__text {
    margin: 0 auto var(--gd-space-6);
    max-width: 52ch;
    color: var(--gd-muted);
    font-size: var(--gd-text-md);
    line-height: var(--gd-lh-relaxed);
}

.gd-done__ref {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gd-space-3);
    padding: var(--gd-space-4) var(--gd-space-5);
    border: 1px dashed var(--gd-primary-border);
    border-radius: var(--gd-radius);
    background: var(--gd-primary-soft);
}
.gd-done__reflabel { color: var(--gd-muted); font-size: var(--gd-text-xs); }
.gd-done__ref strong {
    color: var(--gd-primary);
    font-size: var(--gd-text-lg);
    letter-spacing: 1px;
    direction: ltr;
}

.gd-done__hint {
    margin: var(--gd-space-4) 0 var(--gd-space-6);
    color: var(--gd-muted);
    font-size: var(--gd-text-xs);
}

.gd-done__cta {
    display: flex;
    flex-direction: column;
    gap: var(--gd-space-3);
}
.gd-done__cta .gd-btn { justify-content: center; }

/* ════════ ۹ — ریسپانسیو (موبایل‌اول) ════════ */

/* گوشی بزرگ / افقی */
@media (min-width: 640px) {
    .gd-channels     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gd-cform__foot  { flex-direction: row; align-items: center; justify-content: space-between; }
    .gd-cform__foot .gd-btn { width: auto; }
    .gd-cform__note  { max-width: 34ch; text-align: start; }
    .gd-done__cta    { flex-direction: row; justify-content: center; }
}

/* تبلت */
@media (min-width: 768px) {
    .gd-contact__top { padding-block: var(--gd-space-8) var(--gd-space-6); }
    .gd-cform        { padding: var(--gd-space-8); }
    .gd-cform__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* از اینجا نقشه‌ی افقی جا می‌شود؛ نسخه‌ی عمودی موبایل کنار می‌رود.
       چیدمان هنوز عمودی است: نقشه بالا، کارت‌ها پایین. */
    .gd-metro .gd-metro__svg--mob { display: none; }
    .gd-metro .gd-metro__svg--web { display: block; }
    .gd-metro__arrow    { display: flex; }
    .gd-metro__cards    { flex-direction: row; flex-wrap: wrap; }
    .gd-metro__card     { flex: 1 1 260px; }
}

/* تبلت افقی / نت‌بوک — از اینجا ستون کناری کنار فرم می‌نشیند */
@media (min-width: 1024px) {
    /* شش کانال ارتباطی = دو ردیف سه‌تایی. چهار ستون ردیف دوم را لنگ می‌کرد. */
    .gd-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gd-transit__list { gap: var(--gd-space-4); }
    .gd-contact__layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: var(--gd-space-8);
    }
    .gd-contact__side { position: sticky; inset-block-start: var(--gd-space-5); }
}

/* لپ‌تاپ ۱۳-۱۴ اینچ به بالا — پله xl ۱۰۲۴ واقعی ≡ ۱۲۸۰ مجازی.
   قبلاً ۱۲۸۰ بود یعنی فاصله‌ی بازتر فقط روی مانیتور بزرگ دیده می‌شد. */
@media (min-width: 1024px) {
    .gd-contact__layout { gap: var(--gd-space-12); }

}

/* ⚠ کنارِ‌هم نشستن کارت‌ها و نقشه عمداً از ۱۴۰۰ شروع می‌شود، نه ۱۲۸۰.
   دلیلش اندازه‌گیری روی خود سایت است: در ۱۲۸۰، کانتینر هنوز ۹۶۰
   است (بریک‌پوینت توکن با عرضِ منهای نوار اسکرول سنجیده می‌شود)، و
   ستون نقشه به ۶۱۲px می‌افتد یعنی برچسب ایستگاه ۱۲.۸px — ناخوانا.
   تا ۱۴۰۰، نقشه تمام‌عرض کانتینر است و برچسب حدود ۱۹px می‌شود. */
/* ↑ آن استدلال از ۲۰۲۶-۰۸-۱۱ دیگر برقرار نیست و بریک‌پوینت به ۱۲۸۰ برگشت.
   کانتینر ۹۶۰ مربوط به پله‌ی lg بود که حذف شد؛ حالا در ۱۲۸۰ واقعی (≡۱۶۰۰ مجازی)
   کانتینر ۱۴۴۰ است و ستون نقشه حدود ۱۰۵۶ می‌شود. ۱۴۰۰ واقعی ≡ ۱۷۵۰ مجازی بود،
   یعنی پله‌ای که اصلاً طراحی نشده بود. */
@media (min-width: 1280px) {
    .gd-metro__row {
        grid-template-columns: minmax(280px, 360px) minmax(620px, 1fr);
        align-items: start;
        gap: var(--gd-space-6);
    }
    /* جای‌گذاری صریح به‌جای order — در RTL ستون ۱ سمت راست است،
       پس کارت‌ها راست و نقشه چپ می‌نشیند، مثل طرح اصلی. */
    .gd-metro__cards { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; }
    .gd-metro__panel { grid-column: 2; grid-row: 1; min-width: 0; }
}

/* ════════ ۱۰ — کاهش حرکت ════════
   یک نقشه‌ی متحرک با لوپ ۲۰ ثانیه‌ای برای کسی که حساسیت حرکتی دارد
   آزاردهنده است. اینجا انیمیشن‌ها خاموش و حالت پایانیِ «همه‌چیز
   دیده می‌شود» تثبیت می‌شود — نه حالت پایانیِ کیفریم که opacity صفر است. */
@media (prefers-reduced-motion: reduce) {
    .gd-metro__route,
    .gd-metro__badge,
    .gd-metro__line,
    .gd-metro__dot,
    .gd-metro__ping,
    .gd-metro__store-ring,
    .gd-metro__body,
    .gd-metro__leg,
    .gd-metro__filter,
    .gd-metro__card {
        animation: none !important;
    }
    .gd-metro__filter, .gd-metro__card { opacity: 1; translate: 0 0; }
    .gd-metro__route { opacity: 1; stroke-dashoffset: 0; }
    .gd-metro__badge { opacity: 1; }
    .gd-metro__line  { stroke-dasharray: none; }
    .gd-metro__dot   { opacity: 1; scale: 1; }
    .gd-metro__ping  { opacity: 0; }

    /* چیزهایی که ذاتاً «در حال حرکت»اند بدون انیمیشن معنی ندارند.
       ⚠ !important لازم است: قاعده‌ی «نشان بده»ی حالت تک‌مسیر
       ‏(.gd-metro.is-solo[data-active="۲"] [data-r="۲"]) specificity
       ‏(۰،۴،۰) دارد و بدون این، با انتخاب یک مسیر قطار و تاکسی
       دوباره ظاهر می‌شدند — حتی برای کسی که کاهش حرکت را روشن کرده. */
    .gd-metro__walker,
    .gd-metro__taxi,
    .gd-metro__train { display: none !important; }
}

/* ⭐ ۲۱ شهریور ۱۴۰۵ — هدف‌های لمسی زیرِ ۴۴ پیکسل روی موبایل.
   سنجشِ زنده روی ۳۹۰px: پیوندِ «صفحه اصلی» در مسیر ۶۳×۲۰، ردیفِ رضایت با
   چک‌باکسِ ۲۰×۲۰، و چیپ‌های مسیرِ مترو ۳۹ پیکسل. چک‌باکس خودش کوچک
   می‌ماند؛ کلِ ردیفِ برچسبش است که انگشت‌خور می‌شود. */
@media (max-width: 767px) {
    .gd-contact__top .gd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
    .gd-cform .gd-check { display: flex; align-items: center; gap: var(--gd-space-2); min-height: 44px; }
    .gd-metro .gd-metro__chip { min-height: 44px; }
}

/* مسیرِ بالای صفحه روی دسکتاپ هم — سنجش: پیوندِ «صفحه اصلی» ۵۰×۱۷ بود،
   زیرِ کفِ ۲۴ پیکسلیِ WCAG 2.2 حتی برای ماوس. */
.gd-contact__top .gd-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }