/* ==========================================================
   «آموزش رایگان»: /free, /free/mask-course, /free/psychology, /free/qa, /free/library. Mobile-first. Brand D.
   No data on these pages, so no green or red; blue only for links and the main button.
   Loaded after pages.css. The plan cards repeat the /mts plan look (mts.css is not loaded here).
   ========================================================== */

.fr .ix a{color:inherit}
.fr .ix a:hover{color:var(--blue)}

/* ---------- hub doors ---------- */
.fr-doors{grid-template-columns:1fr}
@media(min-width:640px){.fr-doors{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.fr-doors{grid-template-columns:repeat(4,1fr)}}
.fr-doors .door{min-height:190px}
.fr-tag{display:inline-block;margin-inline-start:6px;padding:1px 9px;border-radius:999px;background:#ECEEF5;
  font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:0;font-weight:700;color:var(--ink2)}
.fr-ch{grid-template-columns:1fr}
@media(min-width:700px){.fr-ch{grid-template-columns:repeat(2,1fr)}}

/* ---------- numbered steps (hub path, course «how», qa «send») ---------- */
.fr-steps{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.fr-steps>li{display:flex;gap:14px;align-items:flex-start;padding:16px}
.fr-steps>li+li{border-top:1px solid var(--line2)}
.fr-steps .n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);
  border:1px solid var(--line);font-size:14px;font-weight:900;color:var(--ink)}
.fr-steps>li:first-child .n{background:var(--blue);border-color:var(--blue);color:#fff}
.fr-steps h3{font-size:15px;font-weight:900;line-height:1.6}
.fr-steps h3 a:hover{color:var(--blue)}
.fr-steps p{margin-top:4px;font-size:13.5px;line-height:1.85;color:var(--ink2)}
.fr-steps .more{margin-top:4px}
@media(min-width:760px){.fr-steps>li{padding:18px 22px}}

/* ---------- course: the one button to YouTube ---------- */
.fr-play{display:flex;flex-direction:column;gap:14px;margin-top:24px;padding:18px 16px;max-width:760px}
.fr-play .k{font-size:12px;letter-spacing:.08em;color:var(--ink3)}
.fr-play p{margin-top:4px;font-size:13.5px;color:var(--ink2)}
.fr-play .btn{width:100%}
@media(min-width:640px){.fr-play{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 22px}
  .fr-play .btn{width:auto}}
.fr-art{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink3)}

/* ---------- small notes ---------- */
.fr-note{margin-top:14px;max-width:70ch;font-size:13px;line-height:1.9;color:var(--ink3)}
.fr-note a{color:var(--blue)}
.fr-uses li{display:block;position:relative;padding-inline-start:40px!important}
.fr-uses li::before{content:"";position:absolute;inset-inline-start:16px;top:26px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.fr-uses p{margin:0!important;font-size:14px!important;color:var(--ink)!important}

/* ---------- qa plans ---------- */
.fr-plans{display:grid;gap:12px;margin-top:22px}
@media(min-width:900px){.fr-plans{grid-template-columns:repeat(3,1fr);gap:14px}}
.fr .plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.fr .plan .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 0;
  font-size:12px;letter-spacing:.06em;color:var(--ink3)}
.fr .plan .pb{padding:10px 16px 18px;display:flex;flex-direction:column;flex:1}
@media(min-width:760px){.fr .plan .ph{padding:18px 20px 0}.fr .plan .pb{padding:12px 20px 20px}}
.fr .plan h3{font-size:17px;font-weight:900;letter-spacing:-.01em}
.fr .price{margin-top:6px;font-size:clamp(26px,7.4vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
.fr .price small{font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:0}
.fr .plan .sub{margin-top:4px;font-size:12px;color:var(--ink3)}
.fr-for{margin-top:12px;font-size:13.5px;line-height:1.8;color:var(--ink2)}
.fr .plan ul{margin-top:14px;display:grid;gap:8px}
.fr .plan li{position:relative;padding-inline-start:24px;font-size:13.5px;line-height:1.7}
.fr .plan li::before{content:"";position:absolute;inset-inline-start:0;top:.3em;width:16px;height:16px;border-radius:50%;
  background:#ECEEF5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2312152B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.fr .plan .go{margin-top:auto;padding-top:20px}
.fr .plan .go .btn{display:flex;width:100%}
.fr .adm{margin-top:16px;padding:10px 12px;border:1px dashed var(--ink3);border-radius:var(--r-s);font-size:12px;line-height:1.8;color:var(--ink2)}

/* ---------- qa e-mail ---------- */
.fr-mail{display:inline-block;margin-top:6px;padding-block:4px;font-size:15px;font-weight:500;color:var(--blue)}
.fr-mail:hover{color:var(--blue-d)}
.fr-fmt{margin-top:14px;padding:16px;max-width:760px}
@media(min-width:760px){.fr-fmt{padding:20px 22px}}
.fr-fmt-k{font-size:12px;letter-spacing:.06em;color:var(--ink3)}
.fr-fmt dl{margin:10px 0 0}
.fr-fmt dl>div{display:flex;gap:14px;padding-block:10px}
.fr-fmt dl>div+div{border-top:1px solid var(--line2)}
.fr-fmt dt{flex:none;width:56px;font-size:13px;font-weight:900}
.fr-fmt dd{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink2)}