/* ==========================================================================
   فتحینو — CSS مشترک همهٔ صفحه‌ها (بند ۹-۳ بریف)
   ========================================================================== */

/* ==========================================================================
   فتحینو — سبک «ادیتوریال بولد»
   قاعده‌ها: بدون گردی · قاب ضخیم جوهری · سایهٔ سخت (بدون بلور)
             تایپ سنگین · بلوک تخت طلایی · حرکت آرام و کم
   ========================================================================== */

:root{
  /* --- تم روشن --- */
  --page:#FFFDF6;   --page-rgb:255 253 246;
  --paper:#FFFFFF;  --paper-rgb:255 255 255;
  --sand:#F4EFE1;   --sand-rgb:244 239 225;
  --ink:#0B0B0C;    --ink-rgb:11 11 12;
  --ink-2:#26262A;  --muted:#4E4E56;  --faint:#5F5F6B;

  --gold:#F5C21B;   --gold-2:#FFDA5C;  --gold-3:#6B4E00;  --gold-rgb:245 194 27;
  --ongold:#140F00;                 /* متن روی سطح طلایی — در هر دو تم تیره */
  --ongold-2:#54400A;               /* متن دوم روی سطح طلایی */
  --inkbg:#0B0B0C;                  /* سطحِ وارونه (نوار خبری، دکمهٔ تیره، سربرگ رسید) */
  --onink:#FFFDF6;                  /* متن روی سطح وارونه */
  --onink-2:#C8C5BD;                /* متن دوم روی سطح وارونه */
  --inkacc:#F5C21B;                 /* لهجهٔ طلایی روی سطح وارونه */
  --ok:#0B7A4D;    --ok-tint:#EAF7F0;  --on-ok:#FFFFFF;
  --bad:#B3261E;   --bad-tint:#FCECEA;
  --scrim:11 11 12;                 /* پردهٔ کشو — در هر دو تم تیره می‌ماند */

  --bc:#0B0B0C;                     /* رنگ قاب‌ها */
  --shc:#0B0B0C;                    /* رنگ سایهٔ سخت */
  --bw:2.5px;
  --b:var(--bw) solid var(--bc);
  --b-thin:1.5px solid var(--bc);
  --sh:5px 5px 0 var(--shc);
  --sh-lg:11px 11px 0 var(--shc);
  --e:cubic-bezier(.22,1,.36,1);
  --gut:clamp(18px,3vw,34px);
}

/* --- تم تیره ---
   قاعده: در تم تیره هیچ سطحِ روشنِ بزرگی ساخته نمی‌شود.
   `--inkbg` به‌جای اینکه برعکس شود، فقط یک پله روشن‌تر از کاغذ می‌شود،
   قاب‌ها خاکستریِ ملایم‌اند و سایه‌ها تیره‌اند — تا چشم را نزند. */
html[data-theme="dark"]{
  --page:#141417;   --page-rgb:20 20 23;
  --paper:#1C1C20;  --paper-rgb:28 28 32;
  --sand:#232329;   --sand-rgb:35 35 41;
  --ink:#E9E6DE;    --ink-rgb:233 230 222;
  --ink-2:#CFCBC1;  --muted:#A29D93;  --faint:#98938A;
  --gold:#E9B91C;   --gold-2:#F7D250;  --gold-3:#FFE7A0;  --gold-rgb:233 185 28;
  --inkbg:#2C2C33;  --onink:#E9E6DE;   --onink-2:#A6A197;  --inkacc:#F2C63A;
  --bc:#5C5B56;     --shc:#0A0A0C;  --dots:.16;
  --ok:#37BE82;     --ok-tint:#16261F;  --on-ok:#03150C;
  --bad:#F2857A;    --bad-tint:#2A1512;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--gold) var(--sand);scrollbar-width:thin;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{font-family:Vazirmatn,system-ui,sans-serif;background:var(--page);color:var(--ink);
  line-height:1.72;font-size:15.5px;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block;flex:0 0 auto}
img{max-width:100%;display:block}
ul{list-style:none}
.num{font-variant-numeric:tabular-nums}
.wrap{width:min(1240px,calc(100% - 2*var(--gut)));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* اسکرول‌بار برند */
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--sand);border-inline-start:var(--b-thin)}
::-webkit-scrollbar-thumb{background:var(--gold);border:2px solid var(--bc)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-2)}

/* پرش با لینک لنگر زیر هدر چسبان نرود */
section[id]{scroll-margin-top:96px}

/* ---------- پرش به محتوا ---------- */
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:200;background:var(--inkbg);color:var(--onink);
  padding:10px 16px;font-weight:800;transform:translateY(-160%);transition:transform .3s var(--e)}
.skip:focus{transform:none}

/* ---------- نوار پیشرفت ---------- */
.prog{position:fixed;top:0;inset-inline:0;height:4px;z-index:90;background:transparent;pointer-events:none}
.prog i{display:block;height:100%;width:0%;background:var(--gold);
  border-inline-end:2px solid var(--bc)}

/* ---------- فوکوس ---------- */
/* حلقهٔ فوکوس: جوهری، چون طلایی روی کاغذِ روشن کنتراست کافی ندارد.
   هرجا دورِ عنصر سطحِ وارونه است، به طلایی برمی‌گردد. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink);outline-offset:2px}
:where(.end,.faqside,.tick,.phead,.stage) :where(a,button,input,select):focus-visible{outline-color:var(--gold)}
/* ولی کارتِ روشنِ فرم داخلِ صحنه، دوباره حلقهٔ جوهری می‌خواهد */
.stage .qbox :where(a,button,input,select,[tabindex]):focus-visible{outline-color:var(--ink)}
/* پلاک در هر دو تم سفید می‌ماند (پلاک واقعی سفید است)، پس حلقه‌اش هم باید تیره بماند */
.qbox .plate :focus-visible,
.plate :focus-visible{outline-offset:-3px;outline-color:#0B0B0C}


/* ==========================================================================
   لهجهٔ مخصوص هر صفحه
   طلایی همیشه رنگِ برند و رنگِ دکمهٔ اصلی می‌ماند. لهجه فقط برای
   موتیف، نوار بالای صفحه، برچسب‌ها و نشانه‌های همان محصول است — تا هر صفحه
   حال‌وهوای خودش را داشته باشد بدون اینکه برند عوض شود.
   ========================================================================== */
:root{
  --acc:#7A5A00;  --acc-2:#F5C21B;  --acc-tint:#FFF6DC;  --on-acc:#FFFFFF;
  --acc-rgb:122 90 0;
}
html[data-page="car"]{
  --acc:#15628F;  --acc-2:#2E90CC;  --acc-tint:#E7F2F9;  --on-acc:#FFFFFF;
  --acc-rgb:21 98 143;
}
html[data-page="moto"]{
  --acc:#B33718;  --acc-2:#E2603C;  --acc-tint:#FCEDE8;  --on-acc:#FFFFFF;
  --acc-rgb:179 55 24;
}
html[data-theme="dark"][data-page="car"]{
  --acc:#6FBCE8;  --acc-2:#8FCFF2;  --acc-tint:#12222C;  --on-acc:#07161F;
  --acc-rgb:111 188 232;
}
html[data-theme="dark"][data-page="moto"]{
  --acc:#F5906F;  --acc-2:#FFA98C;  --acc-tint:#2A1610;  --on-acc:#210A03;
  --acc-rgb:245 144 111;
}
html[data-theme="dark"]{
  --acc:#F2C63A;  --acc-2:#FFDA5C;  --acc-tint:#2A2415;  --on-acc:#140F00;
  --acc-rgb:242 198 58;
}

/* ابزارهای لهجه — «.acc» نگذار، با آکاردئونِ کشوی موبایل تصادم می‌کند */
.btn.a{background:var(--acc);color:var(--on-acc);border-color:var(--acc);box-shadow:5px 5px 0 var(--shc)}
.btn.a:hover{box-shadow:8px 8px 0 var(--shc)}

/* نوار باریکِ لهجه بالای صفحه‌های محصول */
.accbar{height:6px;background:var(--acc);border-bottom:var(--b)}

/* ==========================================================================
   فرم‌ها — بند ۹-۷ بریف: هر فیلد label واقعی دارد، نه فقط placeholder
   ========================================================================== */
.form{display:grid;gap:0}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.field{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border-inline-start:var(--b);border-bottom:var(--b);padding:12px 16px 13px;min-width:0}
.field > label{font-size:11.5px;font-weight:900;color:var(--muted);letter-spacing:.01em;
  display:flex;align-items:center;gap:6px;margin-bottom:2px}
.field > label .req{color:var(--acc)}
.field .ctl{display:flex;align-items:center;gap:8px}
.field .ctl svg{width:17px;height:17px;stroke:var(--faint);fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.field input,.field select,.field textarea{width:100%;min-width:0;border:0;background:none;
  font:inherit;font-size:16px;font-weight:800;color:var(--ink);padding:9px 0;min-height:44px;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);font-weight:600}
/* حلقهٔ فوکوس را برنمی‌داریم — فقط وقتی با ماوس کلیک شده پنهانش می‌کنیم */
.field :focus:not(:focus-visible){outline:none}
.field:focus-within{background:var(--acc-tint)}
.field:focus-within > label{color:var(--acc)}
.field select{cursor:pointer;padding-inline-end:22px}
.field .caret{position:absolute;inset-inline-start:16px;bottom:22px;pointer-events:none}
.field .caret svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2.6}
.field .err{display:none;font-size:11.5px;font-weight:800;color:var(--on-acc);
  background:var(--bad);margin:8px -16px -13px;padding:6px 16px}
.field.bad{background:var(--bad-tint)}
.field.bad > label{color:var(--bad)}
.field.bad .err{display:block}
.field .hint{font-size:11px;font-weight:700;color:var(--faint);margin-top:4px}

/* پلاک ایرانی — سه خانه و یک حرف، از راست به چپ */
/* پلاک واقعی از چپ به راست خوانده می‌شود: نوار آبی، دو رقم، حرف، سه رقم، ایران+استان */
.plate{direction:ltr;display:flex;align-items:stretch;border:var(--b);background:#FFFFFF;color:#0B0B0C;
  width:max-content;max-width:100%;overflow:hidden}
.plate .flag{width:34px;background:#0B3E8F;color:#fff;display:grid;place-items:center;
  font-size:8.5px;font-weight:900;line-height:1.1;text-align:center;padding:4px 2px}
.plate .cell{border-left:var(--b-thin);display:flex;align-items:center;justify-content:center}
.plate input,.plate select{border:0;background:none;font:inherit;font-weight:900;font-size:20px;
  text-align:center;color:#0B0B0C;padding:10px 6px;appearance:none;
  font-variant-numeric:tabular-nums;min-width:0}
.plate input:focus,.plate select:focus{background:#FFF3C4}
.plate :focus:not(:focus-visible){outline:none}
.plate .w2 input{width:60px}
.plate .w3 input{width:76px}
.plate .wl select{width:64px;cursor:pointer;text-align:center;text-align-last:center}
.plate .wi{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 8px;border-left:var(--b-thin);background:#F4EFE1}
.plate .wi b{font-size:9px;font-weight:900;letter-spacing:.02em}
.plate .wi input{font-size:16px;width:44px;padding:2px 0;min-height:40px}
.plateWrap{display:flex;flex-direction:column;gap:8px}

/* دکمهٔ ارسال فرم — تمام‌عرض و طلایی */
.fsubmit{border-inline-start:var(--b);border-bottom:var(--b);padding:0}
.fsubmit .btn{width:100%;height:100%;min-height:64px;box-shadow:none;border:0;font-size:17px}
.fsubmit .btn:hover{transform:none;box-shadow:none;background:var(--gold-2)}
.fsubmit .btn:disabled{opacity:.55;cursor:not-allowed}
.fnote{grid-column:1 / -1;border-inline-start:var(--b);border-bottom:var(--b);
  background:var(--sand);padding:11px 16px;font-size:12.2px;font-weight:700;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.fnote svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* گزینه‌های دوحالته (پلاک / برند و مدل) */
.tabs{display:flex;border-bottom:var(--b)}
.tabs button{flex:1 1 0;padding:14px 12px;font-size:14.5px;font-weight:900;position:relative;
  border-inline-start:var(--b);transition:background .3s var(--e),color .3s var(--e)}
.tabs button:first-child{border-inline-start:0}
.tabs button[aria-selected="true"]{background:var(--acc);color:var(--on-acc)}
.tabs button:not([aria-selected="true"]):hover{background:var(--acc-tint);color:var(--acc)}
.tabpanel[hidden]{display:none}

/* پیام سراسری فرم */
.fmsg{display:none;align-items:flex-start;gap:11px;padding:14px 16px;border:var(--b);
  font-size:14px;font-weight:800;margin-bottom:0}
.fmsg.on{display:flex}
.fmsg svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.fmsg.ok{background:var(--ok-tint);color:var(--ok);border-color:var(--ok)}
.fmsg.no{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}

@media (max-width:720px){
  .frow3{grid-template-columns:1fr 1fr}
  .field input,.field select{font-size:16px}
}
@media (max-width:480px){
  .frow2,.frow3{grid-template-columns:1fr}
  .plate .w3 input{width:64px}
  .plate .w2 input{width:50px}
  .plate .wl select{width:56px}
}

/* پلاک موتورسیکلت — دو ردیف عدد */
.plate.mplate .mstack{flex-direction:column;padding:4px 10px;gap:2px}
.plate.mplate .mstack input{font-size:18px;width:110px;padding:5px 0;min-height:34px}
.plate.mplate .mstack input:first-child{border-bottom:var(--b-thin)}


/* ==========================================================================
   دکمه‌ها
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  padding:12px 22px;font-size:15.5px;border:var(--b);position:relative;background:var(--paper);
  color:var(--ink);box-shadow:var(--sh);
  transition:transform .42s var(--e),box-shadow .42s var(--e),background .32s var(--e),color .32s var(--e)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--shc)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shc)}
.btn.p{background:var(--gold);color:var(--ongold)}
.btn.p:hover{box-shadow:8px 8px 0 var(--shc)}
.btn.d{background:var(--inkbg);color:var(--onink);box-shadow:5px 5px 0 var(--gold)}
.btn.d:hover{box-shadow:8px 8px 0 var(--gold)}
.btn.sm{padding:9px 16px;font-size:14px;box-shadow:4px 4px 0 var(--shc)}
.btn.sm:hover{box-shadow:6px 6px 0 var(--shc)}
.btn.sm.d{box-shadow:4px 4px 0 var(--gold)}
.btn.sm.d:hover{box-shadow:6px 6px 0 var(--gold)}

/* ==========================================================================
   هدر
   ========================================================================== */
.hd{position:sticky;top:0;z-index:80;background:var(--page);border-bottom:var(--b)}
.hd .bar{display:flex;align-items:center;gap:20px;height:76px}

.lock{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-height:44px}
.mk{width:var(--ms,40px);height:var(--ms,40px);display:grid;place-items:center;flex:0 0 auto;
  background:var(--gold);color:var(--ongold);border:var(--b);
  transition:transform .5s var(--e),background .4s var(--e),color .4s var(--e)}
.mk svg{width:calc(var(--ms,40px) * .55);height:calc(var(--ms,40px) * .55);
  stroke:currentColor;fill:none;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
.mk.ink{background:var(--inkbg);color:var(--inkacc)}
.mk.hollow{background:transparent;color:var(--ink)}
.lock:hover .mk,a:hover > .mk{transform:rotate(-10deg);background:var(--inkbg);color:var(--inkacc)}
.wm{font-size:22px;font-weight:900;letter-spacing:-.025em;line-height:1}
.wsub{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);
  letter-spacing:0;margin-top:2px}

.nav{display:flex;align-items:center;gap:0;margin-inline-start:6px}
.nav .it{position:relative}
/* پلِ ۱۲ پیکسلی زیر آیتم — بدون این، نشانگر که وارد فاصله می‌شود کشو بسته می‌شود */
.nav .it[data-i]::after{content:"";position:absolute;top:100%;inset-inline:0;height:14px}
.nav .it > a,.nav .it > button{position:relative;display:block;padding:9px 13px;font-size:14.5px;
  font-weight:700;overflow:hidden;white-space:nowrap}
.nav .it > a > span,.nav .it > button > span{position:relative;z-index:2;display:inline-flex;
  align-items:center;gap:5px;transition:color .3s var(--e)}
.nav .it > a::before,.nav .it > button::before{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .42s var(--e)}
.nav .it:hover > a::before,.nav .it:hover > button::before,
.nav .it.open > button::before{transform:none}
.nav .it:hover > a > span,.nav .it:hover > button > span,
.nav .it.open > button > span{color:var(--ongold)}
.nav .it svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .38s var(--e)}
.nav .it.open svg,.nav .it:hover svg{transform:rotate(180deg)}

/* کشوی «بیمه‌ها» */
.drop{display:none;position:absolute;top:calc(100% + 12px);inset-inline-start:0;z-index:90;
  min-width:430px;background:var(--paper);border:var(--b);box-shadow:var(--sh-lg);
  grid-template-columns:1fr 1fr;padding:0}
.nav .it.open .drop{display:grid;animation:dropIn .34s var(--e) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drop a{display:flex;align-items:center;gap:9px;padding:12px 14px;font-size:14px;font-weight:700;
  border-block-end:var(--b-thin);transition:background .3s var(--e)}
.drop a:nth-child(odd){border-inline-end:var(--b-thin)}
.drop a:hover{background:var(--gold);color:var(--ongold)}
.drop a .di{width:26px;height:26px;display:grid;place-items:center;border:var(--b-thin);flex:0 0 auto}
.drop a .di svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop a .soon{margin-inline-start:auto;font-size:10px;font-weight:900;padding:2px 7px;
  background:var(--muted);color:var(--page)}
.drop a.all{grid-column:1 / -1;justify-content:center;background:var(--sand);border-block-end:0;
  border-inline-end:0;font-weight:900}
.drop a.all:hover{background:var(--gold)}

.hd .sp{margin-inline-start:auto}
.tel{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;padding:8px 10px;
  border-bottom:var(--bw) solid transparent;transition:border-color .34s var(--e);white-space:nowrap}
.tel:hover{border-bottom-color:var(--gold)}
.tel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.icb{width:44px;height:44px;display:grid;place-items:center;border:var(--b);background:var(--paper);
  flex:0 0 auto;transition:background .32s var(--e),color .32s var(--e),transform .4s var(--e)}
.icb:hover{background:var(--gold);color:var(--ongold);transform:rotate(-8deg)}
.icb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none}

/* کشوی موبایل */
.scrim{position:fixed;inset:0;z-index:95;background:rgb(var(--scrim)/.6);
  opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility .4s}
.scrim.on{opacity:1;visibility:visible}
.dr{position:fixed;top:0;inset-inline-end:0;z-index:96;width:min(340px,90vw);height:100dvh;
  background:var(--page);border-inline-start:var(--b);display:flex;flex-direction:column;
  transform:translateX(105%);visibility:hidden;
  transition:transform .45s var(--e),visibility .45s;
  overflow-y:auto;overscroll-behavior:contain}
html[dir="rtl"] .dr{transform:translateX(-105%)}
.dr.on{transform:none!important;visibility:visible}
.dr .dtop{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:var(--b);
  position:sticky;top:0;background:var(--page);z-index:2}
.dr .dtop .icb{margin-inline-start:auto}
.dr nav{padding:6px 0}
.dr nav > a,.dr .acc > button{display:flex;align-items:center;gap:9px;width:100%;padding:14px 18px;
  font-size:15px;font-weight:800;border-bottom:var(--b-thin);text-align:start}
.dr .acc > button svg{margin-inline-start:auto;width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.6;stroke-linecap:round;transition:transform .38s var(--e)}
.dr .acc.on > button svg{transform:rotate(180deg)}
.dr .acc .kids{display:none;background:var(--sand)}
.dr .acc.on .kids{display:block}
.dr .acc .kids a{display:flex;align-items:center;gap:8px;padding:14px 30px;font-size:14px;min-height:48px;
  font-weight:700;border-bottom:var(--b-thin)}
.dr .acc .kids a .soon{margin-inline-start:auto;font-size:10px;font-weight:900;padding:2px 7px;
  background:var(--muted);color:var(--page)}
.dr .dfoot{margin-top:auto;padding:18px;border-top:var(--b);display:grid;gap:10px}

/* ==========================================================================
   نوار خبری متحرک
   ========================================================================== */
.tick{background:var(--inkbg);color:var(--onink);border-bottom:var(--b);overflow:hidden;padding:9px 0}
.tick .run{display:flex;gap:32px;white-space:nowrap;width:max-content;animation:run 34s linear infinite}
.tick:hover .run{animation-play-state:paused}
.tick b{font-size:12.5px;font-weight:700;letter-spacing:.015em;display:inline-flex;align-items:center;gap:32px}
.tick i{font-style:normal;color:var(--inkacc)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ==========================================================================
   افزوده‌های بند ۳ بریف — دکمهٔ اصلی، صفحهٔ فعال، موبایل
   ========================================================================== */
.btn.o{background:rgb(var(--page-rgb)/0);color:var(--ink);border-color:var(--bc)}
.btn.o:hover{background:var(--ink);color:var(--page)}

/* حالت اسکرول‌شده */
.hd{transition:box-shadow .4s var(--e)}
.hd.stuck{box-shadow:0 4px 0 rgb(var(--ink-rgb)/.06),0 10px 24px rgb(var(--ink-rgb)/.08)}

/* صفحهٔ فعال در منو */
.nav .it > a[aria-current="page"],
.nav .it > button[aria-current="page"]{color:var(--ink)}
.nav .it > a[aria-current="page"]::after,
.nav .it > button[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:6px;bottom:0;height:4px;background:var(--acc);z-index:3}
.dr nav a[aria-current="page"],.dr .acc.cur > button{background:var(--acc-tint);color:var(--acc)}
.dr nav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--acc)}
.drop a[aria-current="page"]{background:var(--acc-tint);color:var(--acc);font-weight:900}

/* نمایش بر اساس اندازه */
.only-mob{display:none}
.icb.only-mob{width:44px;height:44px}

/* دکمهٔ شناور پایین صفحه — بند ۳ بریف */
.fab{position:fixed;z-index:70;inset-inline:12px;bottom:12px;display:none;align-items:center;gap:12px;
  padding:11px 16px;background:var(--gold);color:var(--ongold);border:var(--b);
  box-shadow:0 -2px 0 rgb(var(--ink-rgb)/.08),5px 5px 0 var(--shc);
  transition:transform .4s var(--e),opacity .35s var(--e)}
.fab b{display:block;font-size:15.5px;font-weight:900;line-height:1.25}
.fab i{display:block;font-size:11.5px;font-style:normal;font-weight:700;color:var(--ongold-2)}
.fab .fi,.fab .fa{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center}
.fab .fi{border:var(--bw) solid var(--ongold)}
.fab .fa{margin-inline-start:auto}
.fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fab:active{transform:translateY(2px)}
.fab.hide{opacity:0;transform:translateY(140%);pointer-events:none}

@media (max-width:720px){
  .only-desk{display:none!important}
  .only-mob{display:grid}
  .fab{display:flex}
  body{padding-bottom:82px}
  .hd .bar{gap:8px}
  .mk{--ms:34px}
  .wm{font-size:19px}
}
@media print{.fab{display:none}}

.btn > span{white-space:nowrap}

/* ===== اسکلت بخش‌ها ===== */
.sec{padding:78px 0;border-bottom:var(--b);position:relative}
.sec.sand{background:var(--sand)}
.sec.paper{background:var(--paper)}
.shead{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-bottom:40px}
.snum{font-size:clamp(44px,6vw,80px);font-weight:900;line-height:.92;letter-spacing:0;
  color:var(--ink);text-shadow:5px 5px 0 var(--gold);display:block;padding-inline-end:8px}
h2{font-size:clamp(24px,3.3vw,40px);line-height:1.24;font-weight:900;letter-spacing:-.028em}
.shead p{margin-top:10px;color:var(--muted);font-size:16px;max-width:58ch;font-weight:500}
.shead .tools{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}


/* ===== شبکهٔ انواع بیمه ===== */
.kinds{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--b);border-inline-end:var(--b)}
.kind{padding:24px 20px;position:relative;overflow:hidden;background:var(--paper);
  border-inline-start:var(--b);border-bottom:var(--b);
  transition:background .38s var(--e),color .38s var(--e)}
.kind:hover{background:var(--gold);color:var(--ongold)}
.kind .ic{width:46px;height:46px;display:grid;place-items:center;border:var(--b);background:var(--page);
  transition:transform .5s var(--e),background .38s var(--e),color .38s var(--e)}
.kind:hover .ic{transform:rotate(-9deg);background:var(--ongold);color:var(--gold)}
.kind .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kind h3{font-size:16px;font-weight:900;margin-top:16px}
.kind p{font-size:12.8px;color:var(--muted);font-weight:700;margin-top:3px}
.kind:hover p{color:var(--ongold-2)}
.kind .st{position:absolute;top:0;inset-inline-start:0;font-size:10.5px;font-weight:900;padding:3px 10px}
.kind .st.on{background:var(--ok);color:var(--on-ok)}
.kind .st.soon{background:var(--muted);color:var(--page)}
.kind.cur{background:var(--acc-tint)}
.kind.cur .ic{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.kind.dim .ic{opacity:.55}
.kind.dim:hover .ic{opacity:1}
.kind .go{position:absolute;bottom:16px;inset-inline-start:20px;width:24px;height:24px;
  opacity:0;transform:translateX(8px);transition:opacity .4s var(--e),transform .4s var(--e)}
.kind:hover .go{opacity:1;transform:none}
.kind .go svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}


/* ===== شبکهٔ بندهای شماره‌دار ===== */
.whys{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--b);border-inline-end:var(--b)}
.why{padding:30px 26px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--paper);border-inline-start:var(--b);border-bottom:var(--b);
  transition:background .4s var(--e)}
.why:hover{background:var(--sand)}
.why .n{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;font-size:24px;
  font-weight:900;line-height:1;border:var(--b);background:var(--page);
  transition:background .45s var(--e),transform .45s var(--e),color .45s var(--e)}
.why:hover .n{background:var(--gold);color:var(--ongold);transform:rotate(-6deg)}
.why h3{font-size:18.5px;font-weight:900}
.why p{font-size:14.5px;color:var(--muted);margin-top:6px;font-weight:500}
.why p em{font-style:normal;font-weight:800;color:var(--ink);
  box-shadow:inset 0 -.38em 0 rgb(var(--gold-rgb)/.45)}


/* ===== نوار گردان شرکت‌ها ===== */
.mq{position:relative;border-block:var(--b);background:var(--paper);overflow:hidden;padding:22px 0}
.mq .lane{display:flex;gap:0;width:max-content;will-change:transform}
.mq .fade{position:absolute;top:0;bottom:0;width:clamp(56px,9vw,140px);z-index:3;pointer-events:none}
/* بدون هیچ پلهٔ توپر — از همان اولین پیکسل شروع به محوشدن می‌کند،
   وگرنه یک بلوکِ سفیدِ تخت کنار لبه دیده می‌شود. */
.mq .fade.s{left:0;background:linear-gradient(to right,
  rgb(var(--paper-rgb)) 0%, rgb(var(--paper-rgb)/.82) 34%,
  rgb(var(--paper-rgb)/.42) 64%, rgb(var(--paper-rgb)/0) 100%)}
.mq .fade.e{right:0;background:linear-gradient(to left,
  rgb(var(--paper-rgb)) 0%, rgb(var(--paper-rgb)/.82) 34%,
  rgb(var(--paper-rgb)/.42) 64%, rgb(var(--paper-rgb)/0) 100%)}
.ins{display:flex;align-items:center;gap:13px;padding:0 22px;flex:0 0 auto;min-width:236px}
.ins + .ins,.lane .copy > .ins:first-child{border-inline-start:var(--b-thin)}
.ins .lg{width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;
  border:2px dashed var(--bc);background:var(--page);opacity:.7}
.ins .lg svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ins .lg img{width:100%;height:100%;object-fit:contain;padding:6px}
.ins .lg.has{border-style:solid;opacity:1}
.ins b{display:block;font-size:14.5px;font-weight:900;white-space:nowrap}
.ins span{display:block;font-size:11.8px;color:var(--faint);font-weight:700;white-space:nowrap}
.notice{margin-top:26px;border:2px dashed var(--bc);background:var(--page);padding:16px 18px;
  display:flex;gap:12px;align-items:flex-start}
.notice svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.notice b{display:block;font-size:14px;font-weight:900}
.notice p{font-size:13.5px;color:var(--muted);font-weight:500;margin-top:3px}
.notice code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--gold);color:var(--ongold);padding:1px 6px;direction:ltr;display:inline-block}


/* ===== مراحل ===== */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--b);border-inline-end:var(--b)}
.step{position:relative;padding:28px 22px 26px;background:var(--paper);
  border-inline-start:var(--b);border-bottom:var(--b);
  transition:background .4s var(--e)}
.step:hover{background:var(--sand)}
.step .cap{display:flex;align-items:center;gap:12px}
.step .n{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center;font-size:21px;
  font-weight:900;border:var(--b);background:var(--page);
  transition:background .45s var(--e),color .45s var(--e),transform .45s var(--e)}
.step.lit .n{background:var(--gold);color:var(--ongold)}
.step:hover .n{transform:rotate(-6deg)}
.step .ic{width:36px;height:36px;display:grid;place-items:center;border:var(--b-thin);
  margin-inline-start:auto;transition:background .4s var(--e),color .4s var(--e)}
.step:hover .ic{background:var(--inkbg);color:var(--onink)}
.step .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step h3{font-size:17.5px;font-weight:900;margin-top:18px}
.step p{font-size:14px;color:var(--muted);font-weight:500;margin-top:6px}
.step .pill{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:900;padding:4px 10px;
  border:var(--b-thin);background:var(--page)}
.step.lit .pill{background:var(--gold);color:var(--ongold);border-color:var(--bc)}
/* ریل پیشرفت */
.rail{margin-top:0;height:34px;border:var(--b);border-top:0;background:var(--paper);
  position:relative;overflow:hidden;display:flex;align-items:center}
.rail .fill{position:absolute;inset-block:0;inset-inline-start:0;width:0%;background:var(--gold);
  border-inline-end:var(--bw) solid var(--bc)}
.rail .lbl{position:relative;z-index:2;font-size:11.5px;font-weight:900;padding-inline:14px;
  display:flex;align-items:center;gap:7px}
.rail .lbl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}


/* ===== سؤالات متداول ===== */
.faqwrap{display:grid;grid-template-columns:1fr minmax(280px,.5fr);gap:0;align-items:start}
.faq{border-top:var(--b);border-inline-start:var(--b);background:var(--paper)}
.qa{border-bottom:var(--b)}
.qa > button{display:flex;align-items:center;gap:14px;width:100%;padding:20px 22px;text-align:start;
  font-size:16.5px;font-weight:800;transition:background .34s var(--e)}
.qa > button:hover{background:var(--sand)}
.qa.on > button{background:var(--gold);color:var(--ongold)}
.qa > button .pm{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border:var(--b);
  margin-inline-start:auto;transition:transform .42s var(--e)}
.qa.on > button .pm{transform:rotate(135deg);border-color:var(--ongold)}
.qa > button .pm svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s var(--e)}
.qa.on .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden;visibility:hidden;transition:visibility .46s}
.qa.on .ans > div{visibility:visible}
.qa .ans p{padding:0 22px 22px;font-size:15px;color:var(--muted);font-weight:500;max-width:70ch}
.qa .ans p b{color:var(--ink);font-weight:800}

/* کارت کمکی کنار سؤالات — همان فضای خالیِ سمت چپ را پر می‌کند */
.faqside{position:sticky;top:100px;border:var(--b);background:var(--inkbg);color:var(--onink);
  box-shadow:var(--sh-lg);margin-inline-start:26px}
.faqside .fh{padding:20px 20px 0}
.faqside .fh .mk{margin-bottom:14px}
.faqside h3{font-size:19px;font-weight:900;letter-spacing:-.02em;line-height:1.35}
.faqside > .fh > p{font-size:14px;color:var(--onink-2);font-weight:500;margin-top:8px;padding-bottom:20px}
.faqside .frow{display:flex;align-items:center;gap:12px;padding:15px 20px;border-top:var(--bw) solid var(--onink);
  transition:background .34s var(--e),color .34s var(--e)}
.faqside a.frow:hover{background:var(--gold);color:var(--ongold)}
.faqside .frow .ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:var(--bw) solid currentColor}
.faqside .frow .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faqside .frow b{display:block;font-size:15px;font-weight:900}
.faqside .frow span{display:block;font-size:12px;font-weight:600;color:var(--onink-2)}
.faqside a.frow:hover span{color:var(--ongold-2)}
.faqside .fcta{padding:18px 20px;border-top:var(--bw) solid var(--onink);display:grid;gap:10px}
.faqside .fcta .btn{box-shadow:none;width:100%}
.faqside .fcta .btn.p:hover{transform:translateY(-2px);box-shadow:none;background:var(--gold-2)}
.faqside .fcta .btn.o2{background:rgb(var(--ink-rgb)/0);color:var(--onink);border-color:var(--onink)}
.faqside .fcta .btn.o2:hover{transform:translateY(-2px);background:var(--onink);color:var(--inkbg)}


/* ===== نوار پایانی ===== */
.end{--endfg:var(--onink);padding:56px 0;background:var(--inkbg);color:var(--onink);border-bottom:var(--b)}
.end .in{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.end h3{font-size:clamp(21px,2.9vw,34px);font-weight:900;letter-spacing:-.025em;line-height:1.3}
.end h3 em{font-style:normal;color:var(--gold)}
.end p{font-size:15px;color:var(--onink-2);margin-top:7px;font-weight:500}
.end .cta{margin-inline-start:auto;margin-top:0}
.end .btn:not(.p){background:rgb(var(--ink-rgb)/0);color:var(--endfg);border-color:var(--endfg);
  box-shadow:5px 5px 0 var(--gold)}
.end .btn:not(.p):hover{background:var(--gold);color:var(--ongold);border-color:var(--endfg);
  box-shadow:8px 8px 0 var(--endfg)}


/* ===== ظهور با اسکرول ===== */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--e),transform .95s var(--e)}
.rv.on{opacity:1;transform:none}



/* ==========================================================================
   صفحه‌های محصول (/car و /motorcycle)
   اسکلت مشترک است؛ چیزی که هر صفحه را متفاوت می‌کند فقط لهجهٔ رنگ و
   «صحنه»ی داخلِ نوارِ بالای صفحه است که در CSS خودِ آن صفحه تعریف می‌شود.
   ========================================================================== */

/* ---------- نوارِ صحنه ---------- */
.stage{position:relative;background:var(--inkbg);color:var(--onink);
  border-bottom:var(--b);overflow:hidden}
.stage .art{position:absolute;inset:0;z-index:0;pointer-events:none}
.stage .in{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:0;align-items:stretch;min-height:min(520px,66vh)}
/* نوارِ صحنه زیر محتوا می‌نشیند تا هیچ‌وقت روی متن نیفتد */
.strip{position:relative;z-index:1;height:184px}
.stage .l{padding:44px 0 48px;padding-inline-end:40px;display:flex;flex-direction:column;
  justify-content:center}
.stage .r{display:flex;align-items:center;padding:34px 0 40px;padding-inline-start:40px}

.pk{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  background:var(--acc);color:var(--on-acc);padding:7px 14px;font-size:12.5px;font-weight:900}
.pk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

.stage h1{font-size:clamp(30px,4.4vw,58px);line-height:1.15;font-weight:900;
  letter-spacing:-.035em;margin:20px 0 0;color:var(--onink)}
/* زمینهٔ طلایی واقعی است (نه شبه‌المان) تا در تست کنتراست هم دیده شود؛
   ::before فقط یک «پوشش» است که با انیمیشن کنار می‌رود و بلوک را باز می‌کند. */
.stage h1 em{font-style:normal;position:relative;display:inline-block;padding:.02em .09em .06em;
  color:var(--ongold);background-color:var(--gold)}
.stage h1 em::before{content:"";position:absolute;inset:0;background:var(--inkbg);
  transform-origin:left;animation:sw 1s var(--e) .4s forwards}
@keyframes sw{to{transform:scaleX(0)}}
.stage .lede{margin-top:18px;font-size:16.5px;color:var(--onink-2);max-width:46ch;font-weight:500}
.stage .lede b{color:var(--onink);font-weight:800}

.pchips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:26px;
  border:var(--bw) solid var(--onink);align-self:stretch;max-width:100%}
.pchip{padding:12px 14px;font-size:12.8px;font-weight:800;display:flex;align-items:center;
  justify-content:center;gap:8px;text-align:center;min-width:0;
  transition:background .34s var(--e),color .34s var(--e)}
.pchip + .pchip{border-inline-start:var(--bw) solid var(--onink)}
.pchip:hover{background:var(--onink);color:var(--inkbg)}
.pchip svg{width:16px;height:16px;stroke:var(--inkacc);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.pchip:hover svg{stroke:currentColor}

/* ---------- کارت فرم استعلام ---------- */
.qbox{width:100%;background:var(--page);color:var(--ink);border:var(--b);box-shadow:var(--sh-lg)}
.qbox .qh{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--gold);
  color:var(--ongold);border-bottom:var(--b)}
.qbox .qh .ic{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--ongold);color:var(--gold)}
.qbox .qh .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.qbox .qh b{display:block;font-size:16px;font-weight:900}
.qbox .qh span{display:block;font-size:11.8px;font-weight:700;color:var(--ongold-2)}
.qbox .qh .free{margin-inline-start:auto;font-size:11.5px;font-weight:900;padding:4px 10px;
  background:var(--ongold);color:var(--gold);white-space:nowrap}
.qbox .form{margin-inline-start:calc(-1 * var(--bw));margin-bottom:calc(-1 * var(--bw))}
.qbox .fsubmit{grid-column:1 / -1}

/* ---------- پوشش‌ها: چه چیزی هست، چه چیزی نیست ---------- */
.cov{display:grid;grid-template-columns:1fr 1fr;border-top:var(--b);border-inline-end:var(--b)}
.covcol{border-inline-start:var(--b);border-bottom:var(--b);background:var(--paper)}
.covcol > h3{display:flex;align-items:center;gap:11px;padding:16px 20px;font-size:16.5px;font-weight:900;
  border-bottom:var(--b)}
.covcol > h3 .ic{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border:var(--bw) solid currentColor}
.covcol > h3 .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.covcol.yes > h3{background:var(--ok-tint);color:var(--ok)}
.covcol.no  > h3{background:var(--bad-tint);color:var(--bad)}
.covcol li{display:flex;align-items:flex-start;gap:11px;padding:14px 20px;font-size:14.5px;font-weight:600;
  transition:background .32s var(--e)}
.covcol li + li{border-top:var(--b-thin)}
.covcol li:hover{background:var(--sand)}
.covcol li b{font-weight:900}
.covcol li .m{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;margin-top:1px}
.covcol li .m svg{width:16px;height:16px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.covcol.yes li .m svg{stroke:var(--ok)}
.covcol.no  li .m svg{stroke:var(--bad)}

/* ---------- تعهدات: کارت‌های عددی به سبک تابلوی راه ---------- */
.limits{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--b);border-inline-end:var(--b)}
.lim{border-inline-start:var(--b);border-bottom:var(--b);background:var(--paper);padding:0;
  display:flex;flex-direction:column}
.lim .lh{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--acc);
  color:var(--on-acc);font-size:13.5px;font-weight:900;border-bottom:var(--b)}
.lim .lh svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.lim .lb{padding:20px 18px 22px;flex:1 1 auto;display:flex;flex-direction:column}
.lim .big{font-size:clamp(26px,3.2vw,38px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.lim .unit{font-size:14px;font-weight:800;color:var(--muted);margin-inline-start:6px}
.lim .sub{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:10px}
.lim .rule{margin-top:auto;padding-top:14px;font-size:12px;font-weight:800;color:var(--acc);
  display:flex;align-items:center;gap:7px}
.lim .rule svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.tiers{margin-top:26px;border:var(--b);background:var(--paper)}
.tiers > h3{padding:15px 20px;font-size:15.5px;font-weight:900;border-bottom:var(--b);
  display:flex;align-items:center;gap:10px}
.tiers > h3 svg{width:18px;height:18px;stroke:var(--acc);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.tierrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 20px;
  transition:background .32s var(--e)}
.tierrow + .tierrow{border-top:var(--b-thin)}
.tierrow:hover{background:var(--acc-tint)}
.tierrow .x{width:46px;height:36px;display:grid;place-items:center;border:var(--b);
  font-size:15px;font-weight:900;background:var(--page)}
.tierrow.on .x{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.tierrow .nm{font-size:14.5px;font-weight:800}
.tierrow .nm span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.tierrow .v{font-size:16.5px;font-weight:900;white-space:nowrap}

/* ---------- تخفیف عدم خسارت: عقربه + جدول ---------- */
.disc{display:grid;grid-template-columns:.85fr 1.15fr;border-top:var(--b);border-inline-end:var(--b)}
.disc > *{border-inline-start:var(--b);border-bottom:var(--b)}
.gauge{background:var(--paper);padding:26px 22px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center}
.gauge svg{width:min(100%,270px);height:auto}
.gauge .gv{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1}
.gauge .gl{font-size:13.5px;font-weight:800;color:var(--muted)}
.gauge .gh{font-size:12.5px;font-weight:700;color:var(--faint);margin-top:6px;max-width:30ch}
.dtable{background:var(--paper)}
.dtable .dline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:0 20px;height:46px;cursor:pointer;transition:background .3s var(--e)}
.dtable .dline + .dline{border-top:var(--b-thin)}
.dtable .dline:hover,.dtable .dline.on{background:var(--acc-tint)}
.dtable .dline .y{font-size:14px;font-weight:900;min-width:74px}
.dtable .dline .bar{height:14px;background:var(--sand);border:var(--b-thin);position:relative;overflow:hidden}
.dtable .dline .bar i{display:block;height:100%;background:var(--acc);width:0;
  transition:width .9s var(--e)}
.dtable .dline .p{font-size:15px;font-weight:900;min-width:52px;text-align:left}
.dtable .dline.on .p{color:var(--acc)}

/* ---------- مدارک ---------- */
.docs{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--b);border-inline-end:var(--b)}
.doc{border-inline-start:var(--b);border-bottom:var(--b);background:var(--paper);padding:20px;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  transition:background .34s var(--e)}
.doc:hover{background:var(--acc-tint)}
.doc .ic{width:46px;height:46px;display:grid;place-items:center;border:var(--b);background:var(--page)}
.doc:hover .ic{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.doc .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc h3{font-size:15.5px;font-weight:900}
.doc p{font-size:13.5px;color:var(--muted);font-weight:600;margin-top:4px}
.doc .tag{display:inline-block;margin-top:9px;font-size:11px;font-weight:900;padding:3px 9px;
  border:var(--b-thin)}
.doc .tag.opt{color:var(--muted)}
.doc .tag.need{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}

/* ---------- واکنش‌گرایی ---------- */
@media (max-width:1080px){
  .stage .in{grid-template-columns:1fr;min-height:0}
  .stage .l{padding-inline-end:0;padding-bottom:8px}
  .stage .r{padding-inline-start:0;padding-top:8px;padding-bottom:44px}
  .limits{grid-template-columns:1fr}
  .disc{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cov{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .pchips{grid-auto-flow:row;grid-auto-columns:auto}
  .pchip{justify-content:flex-start;text-align:start}
  .pchip + .pchip{border-inline-start:0;border-top:var(--bw) solid var(--onink)}
  .qbox{box-shadow:7px 7px 0 var(--shc)}
  .tierrow{grid-template-columns:auto 1fr;row-gap:6px}
  .tierrow .v{grid-column:2;text-align:start}
}
@media (max-width:480px){
  .covcol li,.doc,.lim .lb{padding-inline:16px}
  .dtable .dline{padding-inline:14px;gap:10px}
  .dtable .dline .y{min-width:62px;font-size:13px}
}


/* ==========================================================================
   صفحه‌های محتوایی (اقساط، خسارت، سؤالات، تماس، و صفحه‌های ساده)
   ========================================================================== */

/* ---------- سرصفحهٔ سادهٔ صفحه ---------- */
.phead{position:relative;background:var(--inkbg);color:var(--onink);border-bottom:var(--b);
  padding:52px 0 56px;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;opacity:.06;
  background-image:repeating-linear-gradient(64deg,
    rgb(var(--page-rgb)/1) 0 2px, rgb(var(--page-rgb)/0) 2px 22px)}
.phead .in{position:relative;z-index:2;max-width:62ch}
.phead h1{font-size:clamp(30px,4.2vw,54px);line-height:1.16;font-weight:900;
  letter-spacing:-.035em;margin:18px 0 0;color:var(--onink)}
.phead h1 em{font-style:normal;display:inline-block;padding:.02em .09em .06em;
  color:var(--ongold);background-color:var(--gold)}
.phead .lede{margin-top:16px;font-size:16.5px;color:var(--onink-2);font-weight:500}
.phead .lede b{color:var(--onink);font-weight:800}
.phead .cta{margin-top:26px}
.phead .cta .btn:not(.p){background:rgb(var(--ink-rgb)/0);color:var(--onink);
  border-color:var(--onink);box-shadow:5px 5px 0 var(--gold)}
.phead .cta .btn:not(.p):hover{background:var(--gold);color:var(--ongold);box-shadow:8px 8px 0 var(--onink)}

/* خرده‌نان */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--onink-2)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid rgb(var(--page-rgb)/.35)}
.crumb a:hover{color:var(--onink);border-bottom-color:var(--gold)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ماشین‌حساب اقساط ---------- */
.calc{display:grid;grid-template-columns:1fr .9fr;border-top:var(--b);border-inline-end:var(--b)}
.calc > *{border-inline-start:var(--b);border-bottom:var(--b);min-width:0}
.calcform{background:var(--paper);padding:26px 24px}
.calcform h3{font-size:17px;font-weight:900;display:flex;align-items:center;gap:10px}
.calcform h3 svg{width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.calcform .row{margin-top:22px}
.calcform label{display:block;font-size:12.5px;font-weight:900;color:var(--muted);margin-bottom:9px}
.amt{display:flex;align-items:center;border:var(--b);background:var(--page)}
.amt input{flex:1 1 auto;width:100%;min-width:0;border:0;background:none;font:inherit;font-size:22px;
  font-weight:900;color:var(--ink);padding:12px 14px;text-align:start;
  font-variant-numeric:tabular-nums;appearance:none}
.amt .u{padding:0 14px;font-size:13px;font-weight:800;color:var(--muted);border-inline-start:var(--b-thin);
  align-self:stretch;display:grid;place-items:center;white-space:nowrap}
.amt input:focus{background:var(--acc-tint)}
.amt :focus:not(:focus-visible){outline:none}
.amt:focus-within{box-shadow:inset 0 0 0 2px var(--acc)}
.quick{display:flex;flex-wrap:wrap;gap:0;margin-top:12px;border:var(--b);width:max-content;max-width:100%;min-width:0}
.quick button{padding:9px 14px;font-size:12.8px;font-weight:900;transition:background .3s var(--e),color .3s var(--e)}
.quick button + button{border-inline-start:var(--b)}
.quick button:hover{background:var(--acc-tint);color:var(--acc)}
.quick button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.calcout{background:var(--sand);padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
.oline{display:flex;align-items:baseline;gap:12px;padding:14px 0}
.oline + .oline{border-top:var(--b-thin)}
.oline .k{font-size:14px;font-weight:800;color:var(--muted)}
.oline .v{margin-inline-start:auto;font-size:20px;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.oline.hero{background:var(--gold);color:var(--ongold);margin:0 -24px;padding:16px 24px;border:0}
.oline.hero .k{color:var(--ongold-2)}
.oline.hero .v{font-size:26px}
.calcout .note{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--muted);
  display:flex;align-items:flex-start;gap:8px}
.calcout .note svg{width:15px;height:15px;stroke:var(--acc);fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px;flex:0 0 auto}

/* ---------- خط زمانی خسارت ---------- */
.tl{border-top:var(--b);border-inline:var(--b);background:var(--paper);min-width:0}
.tlrow{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 22px;position:relative;
  border-bottom:var(--b);transition:background .34s var(--e)}
.tlrow:hover{background:var(--sand)}
.tlrow .n{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border:var(--b);
  background:var(--page);font-size:22px;font-weight:900;position:relative;z-index:2;
  transition:background .4s var(--e),color .4s var(--e),transform .4s var(--e)}
.tlrow:hover .n{background:var(--acc);color:var(--on-acc);border-color:var(--acc);transform:rotate(-6deg)}
.tlrow h3{font-size:17.5px;font-weight:900}
.tlrow p{font-size:14.5px;color:var(--muted);font-weight:500;margin-top:6px;max-width:64ch}
.tlrow .when{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12px;
  font-weight:900;padding:5px 11px;border:var(--b-thin);background:var(--page)}
.tlrow .when svg{width:14px;height:14px;stroke:var(--acc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tlrow .warn{margin-top:12px;display:flex;gap:9px;align-items:flex-start;padding:11px 13px;
  background:var(--bad-tint);color:var(--bad);font-size:13px;font-weight:800}
.tlrow .warn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px;flex:0 0 auto}

/* ---------- سؤالات متداول دسته‌بندی‌شده ---------- */
.searchbar{display:flex;align-items:center;gap:12px;border:var(--b);background:var(--paper);
  padding:0 16px;box-shadow:var(--sh)}
.searchbar svg{width:20px;height:20px;stroke:var(--faint);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.searchbar input{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:16.5px;
  font-weight:700;color:var(--ink);padding:16px 0;appearance:none}
.searchbar :focus:not(:focus-visible){outline:none}
.searchbar:focus-within{box-shadow:var(--sh),inset 0 0 0 2px var(--acc)}
.searchbar .clr{flex:0 0 auto;width:34px;height:34px;display:none;place-items:center;border:var(--b-thin)}
.searchbar .clr svg{width:15px;height:15px;stroke:var(--ink)}
.searchbar.has .clr{display:grid}
.chips{display:flex;flex-wrap:wrap;gap:0;margin-top:18px;border:var(--b);width:max-content;max-width:100%}
.chips button{padding:11px 16px;font-size:13.5px;font-weight:900;white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e)}
.chips button + button{border-inline-start:var(--b)}
.chips button:hover{background:var(--acc-tint);color:var(--acc)}
.chips button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.faqcat{margin-top:30px}
.faqcat > h3{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:900;margin-bottom:12px}
.faqcat > h3 .ic{width:36px;height:36px;display:grid;place-items:center;border:var(--b);
  background:var(--acc);color:var(--on-acc)}
.faqcat > h3 .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faqcat > h3 .cnt{margin-inline-start:auto;font-size:12.5px;font-weight:800;color:var(--muted)}
.faqcat .box{border-top:var(--b);border-inline:var(--b);background:var(--paper)}
.faqcat[hidden]{display:none}
.empty{border:2px dashed var(--bc);background:var(--paper);padding:34px 24px;text-align:center;margin-top:24px}
.empty .ic{width:56px;height:56px;margin:0 auto 14px;display:grid;place-items:center;border:var(--b);background:var(--page)}
.empty .ic svg{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.empty b{display:block;font-size:17px;font-weight:900}
.empty p{font-size:14px;color:var(--muted);font-weight:600;margin-top:6px}
.empty .cta{margin-top:18px;justify-content:center;display:flex;gap:12px;flex-wrap:wrap}
.mark{background:var(--gold);color:var(--ongold);padding:0 2px;font-weight:900}

/* ---------- تماس ---------- */
.ctwrap{display:grid;grid-template-columns:1.15fr .85fr;border-top:var(--b);border-inline-end:var(--b)}
.ctwrap > *{border-inline-start:var(--b);border-bottom:var(--b);min-width:0}
.ctform{background:var(--paper)}
.ctform > h3{display:flex;align-items:center;gap:11px;padding:17px 20px;font-size:17px;font-weight:900;
  border-bottom:var(--b);background:var(--gold);color:var(--ongold)}
.ctform > h3 svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ctside{background:var(--sand)}
.ctcard{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
  transition:background .34s var(--e)}
.ctcard + .ctcard{border-top:var(--b-thin)}
a.ctcard:hover{background:var(--acc-tint)}
.ctcard .ic{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border:var(--b);background:var(--paper)}
a.ctcard:hover .ic{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.ctcard .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ctcard b{display:block;font-size:15.5px;font-weight:900}
.ctcard span{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}
.mapbox{border-top:var(--b);position:relative;background:var(--paper);aspect-ratio:16/9;overflow:hidden}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.mapbox .pin{position:absolute;top:44%;inset-inline-start:46%;transform:translate(50%,-100%);
  display:flex;flex-direction:column;align-items:center;z-index:2}
.mapbox .pin .b{background:var(--acc);color:var(--on-acc);border:var(--b);padding:7px 12px;
  font-size:12.5px;font-weight:900;white-space:nowrap;box-shadow:4px 4px 0 var(--shc)}
.mapbox .pin .t{width:3px;height:20px;background:var(--bc)}
.mapbox .cap{position:absolute;inset-inline:0;bottom:0;z-index:2;background:var(--inkbg);
  color:var(--onink);padding:11px 16px;font-size:12.8px;font-weight:700;
  display:flex;align-items:center;gap:9px}
.mapbox .cap svg{position:static;width:16px;height:16px;stroke:var(--inkacc);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hours{border:var(--b);background:var(--paper);margin-top:0}
.hours .hrow{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:14px;font-weight:700}
.hours .hrow + .hrow{border-top:var(--b-thin)}
.hours .hrow .d{font-weight:900}
.hours .hrow .h{margin-inline-start:auto;font-weight:900}
.hours .hrow.off{color:var(--muted)}
.hours .hrow.now{background:var(--ok-tint);color:var(--ok)}

/* ---------- صفحه‌های ساده / به‌زودی / ۴۰۴ ---------- */
.simple{padding:70px 0 78px}
.simple .in{max-width:70ch}
.bigmark{width:96px;height:96px;display:grid;place-items:center;border:var(--b);
  background:var(--gold);color:var(--ongold);box-shadow:var(--sh-lg);margin-bottom:26px}
.bigmark svg{width:46px;height:46px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.prose h2{font-size:clamp(20px,2.4vw,26px);margin-top:34px}
.prose h3{font-size:17.5px;font-weight:900;margin-top:24px}
.prose p{font-size:15.5px;color:var(--muted);font-weight:500;margin-top:10px;max-width:68ch}
.prose ul{margin-top:12px;display:grid;gap:8px}
.prose li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted);font-weight:500}
.prose li::before{content:"";width:9px;height:9px;background:var(--acc);flex:0 0 auto;margin-top:8px}
.prose b{color:var(--ink);font-weight:800}
.soonlist{display:grid;grid-template-columns:repeat(2,1fr);border-top:var(--b);border-inline-end:var(--b);margin-top:30px}

@media (max-width:1080px){
  .calc,.ctwrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .oline.hero{margin-inline:-24px}
  .quick,.chips{width:100%}
  .quick button,.chips button{flex:1 1 auto;text-align:center}
  .tlrow{grid-template-columns:auto 1fr;gap:14px;padding:20px 16px}
  .soonlist{grid-template-columns:1fr}
  .phead{padding:40px 0 44px}
}
@media (max-width:480px){
  .calcform,.calcout{padding:22px 16px}
  .oline.hero{margin-inline:-16px;padding-inline:16px}
  .ctcard{padding:16px}
  .amt input{font-size:19px;padding:11px 12px}
}

/* ==========================================================================
   حالت‌های اتصال به سرور
   ========================================================================== */
.sk{position:relative;min-height:120px;border:2px dashed var(--bc);background:var(--paper);
  overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgb(var(--ink-rgb)/0) 0%, rgb(var(--ink-rgb)/.055) 50%, rgb(var(--ink-rgb)/0) 100%);
  transform:translateX(-100%);animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk > *{visibility:hidden}

.loaderr{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;margin-bottom:22px;
  border:var(--b);background:var(--bad-tint);color:var(--bad);box-shadow:var(--sh)}
.loaderr .ic{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:var(--bw) solid currentColor}
.loaderr .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.loaderr b{display:block;font-size:15px;font-weight:900}
.loaderr p{font-size:13.5px;font-weight:600;margin-top:3px}
.loaderr .btn{margin-inline-start:auto;flex:0 0 auto;background:var(--paper);color:var(--ink)}

@media (prefers-reduced-motion:reduce){ .sk::after{animation:none} }

/* نوار باریکِ «در حال گرفتن داده» — بالای همان صفحه‌ای که منتظر است */
[data-busy]{position:relative}
[data-busy]::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  z-index:6;background:var(--gold);transform-origin:0 50%;animation:busybar 1.1s ease-in-out infinite}
@keyframes busybar{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){ [data-busy]::before{animation:none;opacity:.6} }

.ft{background:var(--page);padding:56px 0 0}
.ft .top{display:grid;grid-template-columns:1.25fr .82fr .82fr .82fr 1.1fr;gap:30px}
.ft .about p{font-size:14px;color:var(--muted);font-weight:500;margin-top:16px;max-width:38ch}
.ft .social{display:flex;gap:0;margin-top:20px;border:var(--b);width:max-content}
.ft .social a{width:44px;height:44px;display:grid;place-items:center;transition:background .32s var(--e),color .32s var(--e)}
.ft .social a + a{border-inline-start:var(--b)}
.ft .social a:hover{background:var(--gold);color:var(--ongold)}
.ft .social svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft h4{font-size:14px;font-weight:900;padding-bottom:10px;border-bottom:var(--b);
  display:flex;align-items:center;gap:8px}
.ft ul{margin-top:12px;display:grid;gap:2px}
.ft ul a{display:inline-flex;align-items:center;gap:7px;font-size:13.8px;color:var(--muted);
  font-weight:600;padding:10px 0;min-height:44px;transition:color .3s var(--e),transform .34s var(--e)}
.ft ul a:hover{color:var(--ink);transform:translateX(-5px)}
.ft ul a .soon{font-size:10px;font-weight:900;padding:1px 6px;background:var(--sand);border:var(--b-thin)}
.ft .cont{display:grid;gap:12px;margin-top:12px}
.ft .cont a,.ft .cont div{display:flex;align-items:flex-start;gap:9px;font-size:13.8px;
  color:var(--muted);font-weight:600;transition:color .3s var(--e);padding:5px 0}
.ft .cont a{min-height:44px;align-items:center}
.ft .cont a svg{margin-top:0}
.ft .cont a:hover{color:var(--ink)}
.ft .cont svg{width:16px;height:16px;stroke:var(--gold-3);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.badges{margin-top:44px;display:grid;grid-template-columns:repeat(2,max-content);gap:0;
  border:var(--b);width:max-content;max-width:100%}
.badge{display:flex;align-items:center;gap:12px;padding:15px 20px}
.badge + .badge{border-inline-start:var(--b)}
.badge b{display:block;font-size:13.5px;font-weight:900}
.badge span{display:block;font-size:11.8px;color:var(--faint);font-weight:700}
.ft .base{margin-top:34px;border-top:var(--b);padding:20px 0;display:flex;gap:16px;
  flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint);font-weight:600}
.ft .base .sp{margin-inline-start:auto}


/* هدر پنج آیتم منو + تلفن + دو دکمه دارد؛ از این عرض به پایین پله‌پله فشرده می‌شود */
@media (max-width:1560px){
  .hd .bar{gap:12px}
  .nav{margin-inline-start:0}
  .nav .it > a,.nav .it > button{padding:9px 9px;font-size:13.8px}
}
@media (max-width:1430px){
  .tel span{display:none}          /* فقط آیکون تلفن می‌ماند تا هدر جا شود */
  .tel{padding:10px 7px}
  .hd .bar{gap:9px}
  .btn.sm{padding:9px 13px;font-size:13.5px}
}
@media (max-width:1180px){
  .wsub{display:none}
  .hd .bar > .btn.o{display:none}  /* «ورود» می‌ماند برای کشو و آیکون کاربر */
}
@media (max-width:1080px){
  .kinds{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .faqwrap{grid-template-columns:1fr}
  .faq{border-inline-end:var(--b)}
  .faqside{position:static;margin-inline-start:0;margin-top:26px;box-shadow:var(--sh)}
  .ft .top{grid-template-columns:1fr 1fr;gap:28px}
  .ft .about{grid-column:1 / -1}
  .nav,.tel{display:none}
  .burger{display:grid}

}

@media (max-width:720px){
  .kinds{grid-template-columns:repeat(2,1fr)}
  .whys{grid-template-columns:1fr}
  .hd .bar{height:56px;gap:12px}   /* بند ۳ بریف: ارتفاع هدر در موبایل حداکثر ۵۶ */
  .sec{padding:52px 0}
  .shead{grid-template-columns:1fr;gap:10px}
  .ft .top{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr}
  .badge + .badge{border-inline-start:0;border-top:var(--b)}
  h1{font-size:clamp(31px,8.4vw,44px)}
  .end .cta{margin-inline-start:0;width:100%}

}

@media (max-width:560px){
  .wsub{display:none}
  .hd .bar{gap:10px}
  .why{padding:24px 18px;gap:14px}
  .kind{padding:20px 16px}
  .step{padding:24px 16px 22px}

}

@media (max-width:560px){
  .faqside .fh,.faqside .frow,.faqside .fcta{padding-inline:16px}

}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  h1 em::before{transform:scaleX(1)}

}

@media print{
  .hd,.tick,.prog,.scrim,.dr,.end{display:none}
  .sec{break-inside:avoid;border:0}

}

@media (max-width:420px){
  .steps{grid-template-columns:1fr}
  .kinds{grid-template-columns:1fr}
}