/* Страница для иностранцев: «Вас зовут на работу или учёбу в России?»
   Опирается на styles.css (шапка, кнопки, hero). Здесь только компоненты fx-*. */
.page-foreigners{--fx-red:#c0392b;--fx-ok:#2f7d4f;--fx-warn:#b8730b}
.page-foreigners [hidden]{display:none!important}
html[data-lang="ru"] [data-l="en"],html[data-lang="en"] [data-l="ru"]{display:none!important}

/* ---------- верхняя полоса: язык и быстрый выход ---------- */
.fx-tools{display:flex;align-items:center;gap:10px}
.fx-lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:3px}
.fx-lang button{border:0;background:none;padding:7px 14px;border-radius:999px;font:700 13px/1 inherit;color:var(--muted);cursor:pointer;min-height:34px}
.fx-lang button[aria-pressed=true]{background:var(--ink);color:#fff}
.fx-lang button:focus-visible,.fx-exit:focus-visible,.fx-route:focus-visible,.fx-acc summary:focus-visible,.fx-tabbar button:focus-visible,.fx-chip:focus-visible{outline:3px solid #f2660d88;outline-offset:2px}
.fx-exit{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:0;border-radius:999px;background:#171817;color:#fff;font:700 14px/1 inherit;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.fx-exit:hover{background:var(--fx-red)}
.fx-exit small{font-weight:500;opacity:.7}

/* ---------- hero ---------- */
.page-foreigners .hero-foreigners{background-image:linear-gradient(100deg,rgba(14,16,19,.97) 0%,rgba(16,18,21,.92) 42%,rgba(16,18,21,.45) 66%,rgba(16,18,21,.05) 100%),url('foreigners-hero.svg');background-position:72% center;background-size:cover}
.fx-hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.fx-hero-top .eyebrow{margin:0}
.page-foreigners .article-hero-copy h1{max-width:20ch}
.fx-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;position:relative;z-index:2}
.fx-route{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;backdrop-filter:blur(6px);transition:background .15s,transform .15s}
.fx-route:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.fx-route b{font-size:17px;line-height:1.25}
.fx-route span{font-size:13px;opacity:.8;line-height:1.4}
.fx-route i{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.1em;color:#ffb27a}

/* ---------- общий каркас блоков ---------- */
.fx-section{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3vw,38px);box-shadow:0 14px 35px rgba(20,20,18,.035)}
.fx-section .fx-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.fx-num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 15px/1 inherit}
.fx-head h2{margin:2px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em}
.fx-head .conscript-kicker,.fx-kicker{display:block;margin-bottom:4px;font:800 11px/1.3 inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.fx-section p{max-width:78ch}
.fx-lead{font-size:17px;color:#2b2e2a}

/* ---------- цифры ---------- */
.fx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.fx-stat{background:#171817;color:#fff;border-radius:20px;padding:18px 18px 16px}
.fx-stat b{display:block;font:900 clamp(30px,4vw,44px)/1 inherit;color:#ff8a3d;letter-spacing:-.03em}
.fx-stat span{display:block;margin-top:8px;font-size:14px;line-height:1.4}
.fx-stat small{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:#a9a79f}
.fx-note{margin-top:14px;font-size:13px;color:var(--muted)}

/* ---------- проверка предложения ---------- */
.fx-check{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:22px;align-items:start}
.fx-check ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fx-check li label{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;font-size:15px;line-height:1.4;transition:border-color .12s,background .12s}
.fx-check li label:hover{border-color:#bdbbb2}
.fx-check input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:#f2660d;cursor:pointer}
.fx-check li:has(input:checked) label{border-color:var(--accent);background:#fff4ec}
.fx-verdict{position:sticky;top:96px;border-radius:22px;padding:22px;background:#eef3ee;border:1px solid #cfdccf;transition:background .2s,border-color .2s}
.fx-verdict .fx-score{font:900 44px/1 inherit;letter-spacing:-.03em}
.fx-verdict .fx-score small{font-size:18px;font-weight:700;color:var(--muted)}
.fx-verdict h3{margin:8px 0 6px;font-size:20px;line-height:1.25}
.fx-verdict p{margin:0;font-size:14px;color:#2b2e2a}
.fx-verdict[data-level="1"]{background:#fff6e5;border-color:#ecd3a1}
.fx-verdict[data-level="2"]{background:#fdeceb;border-color:#efb8b2}
.fx-verdict[data-level="2"] .fx-score{color:var(--fx-red)}
.fx-do{margin-top:14px;display:grid;gap:8px}
.fx-do div{display:flex;gap:10px;font-size:14px;line-height:1.4}
.fx-do div::before{content:"→";font-weight:800;color:var(--accent-2)}

/* ---------- как это происходит ---------- */
.fx-steps{counter-reset:s;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:6px}
.fx-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px 16px}
.fx-step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font:800 14px/1 inherit;margin-bottom:10px}
.fx-step h3{margin:0 0 6px;font-size:16px;line-height:1.25}
.fx-step p{margin:0;font-size:13.5px;line-height:1.45;color:#3b3e39}
.fx-step em{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-style:normal;color:var(--muted);line-height:1.4}

/* ---------- аккордеоны ---------- */
.fx-acc{display:grid;gap:10px}
.fx-acc details{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.fx-acc summary{list-style:none;display:flex;gap:14px;align-items:center;padding:18px 20px;cursor:pointer;font-weight:750;font-size:17px;line-height:1.3}
.fx-acc summary::-webkit-details-marker{display:none}
.fx-acc summary .fx-ico{flex:none;width:38px;height:38px;border-radius:12px;background:#f1efe8;display:grid;place-items:center;font-size:19px}
.fx-acc summary::after{content:"+";margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--muted)}
.fx-acc details[open] summary::after{content:"−";background:var(--ink);color:#fff;border-color:var(--ink)}
.fx-acc details[open]{border-color:#bdbbb2;box-shadow:0 10px 26px rgba(20,20,18,.06)}
.fx-body{padding:2px 22px 22px 72px;font-size:15px;line-height:1.6}
.fx-body p{margin:0 0 10px}
.fx-body ul{margin:6px 0 10px;padding-left:20px}
.fx-body li{margin:4px 0}
.fx-body .fx-say{margin:12px 0;padding:14px 16px;border-left:4px solid var(--accent);background:#fff4ec;border-radius:0 12px 12px 0;font-size:14.5px}
.fx-body .fx-warn{margin:12px 0;padding:14px 16px;border-radius:12px;background:#fdeceb;border:1px solid #efb8b2;font-size:14.5px}
.fx-body .fx-info{margin:12px 0;padding:14px 16px;border-radius:12px;background:#eef3ee;border:1px solid #cfdccf;font-size:14.5px}
.fx-body a{color:var(--accent-2);font-weight:650}
.fx-src{font-size:12.5px;color:var(--muted)}

/* ---------- законы по странам ---------- */
.fx-tabbar{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:thin}
.fx-tabbar button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:700 14px/1 inherit;cursor:pointer;color:#2b2e2a;min-height:42px}
.fx-tabbar button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.fx-panel{border:1px solid var(--line);border-radius:20px;background:#fff;padding:22px 24px;margin-top:6px}
.fx-panel h3{margin:0 0 12px;font-size:22px}
.fx-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fx-cols>div{background:#f7f6f1;border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.5}
.fx-cols b{display:block;margin-bottom:6px;font:800 11px/1.3 inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.fx-cols ul{margin:0;padding-left:18px}
.fx-cols li{margin:4px 0}
.fx-panel .fx-src{margin-top:12px}
.fx-panel .fx-src a{color:var(--accent-2)}

/* ---------- истории ---------- */
.fx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fx-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font:700 13.5px/1 inherit;cursor:pointer;min-height:40px}
.fx-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.fx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px}
.fx-card .fx-tag{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fx-card .fx-tag span{font:800 11px/1 inherit;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#f1efe8;color:#4a4d47}
.fx-card .fx-tag span.is-back{background:#e3f1e8;color:#1f6b3f}
.fx-card .fx-tag span.is-bad{background:#fdeceb;color:#a3281c}
.fx-card h3{margin:0 0 8px;font-size:17px;line-height:1.3}
.fx-card p{margin:0;font-size:14px;line-height:1.5;color:#3b3e39}
.fx-card .fx-lesson{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--accent-2)}
.fx-more{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

/* ---------- контакты ---------- */
.fx-contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fx-contact{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.fx-contact span{font:800 11px/1.3 inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.fx-contact h3{margin:0;font-size:18px;line-height:1.3}
.fx-contact p{margin:0;font-size:14px;line-height:1.5;color:#3b3e39}
.fx-contact .button{margin-top:auto;align-self:flex-start;min-height:42px}
.fx-contact.is-main{background:#171817;color:#fff;border-color:#171817}
.fx-contact.is-main p{color:#d6d4cc}
.fx-contact.is-main span{color:#ffb27a}
.fx-contact.is-main .button{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- поделиться ---------- */
.fx-share{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px;padding:18px 20px;border-radius:20px;background:#eee4d5}
.fx-share p{margin:0;font-weight:700;flex:1 1 260px}
.fx-share .button{min-height:42px}

/* ---------- источники и дисклеймер ---------- */
.fx-sources ol{margin:8px 0 0;padding-left:22px;font-size:13.5px;line-height:1.55;columns:2;column-gap:36px}
.fx-sources li{break-inside:avoid;margin-bottom:6px}
.fx-sources a{color:var(--accent-2);overflow-wrap:anywhere}
.fx-disclaimer{margin-top:22px;padding:18px 20px;border-radius:18px;background:#171817;color:#e6e4dc;font-size:14px;line-height:1.55}
.fx-disclaimer b{color:#fff}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
 .fx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fx-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fx-cards,.fx-contacts,.fx-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fx-check{grid-template-columns:1fr}
 .fx-verdict{position:static}
}
@media (max-width:680px){
 .fx-routes,.fx-cards,.fx-contacts,.fx-cols,.fx-steps{grid-template-columns:1fr}
 .fx-stats{grid-template-columns:1fr 1fr;gap:10px}
 .fx-stat{padding:14px}
 .fx-body{padding:0 18px 20px}
 .fx-acc summary{padding:16px;font-size:16px}
 .fx-acc summary .fx-ico{display:none}
 .fx-sources ol{columns:1}
 .fx-section{border-radius:22px}
 .fx-head{gap:12px}
 .fx-num{width:38px;height:38px;font-size:13px}
 .fx-exit small{display:none}
 .fx-verdict{position:sticky;bottom:78px;top:auto;z-index:5;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:16px 18px}
 .fx-verdict .fx-score{font-size:32px}
 .fx-verdict h3{font-size:17px}
 .fx-verdict .fx-do{display:none}
}
@media (prefers-reduced-motion:reduce){.fx-route,.fx-verdict{transition:none}.fx-route:hover{transform:none}html{scroll-behavior:auto}}
@media print{
 .topbar,.fx-exit,.fx-lang,.fx-routes,.fx-share,.footer,.fx-tabbar,.fx-chips{display:none!important}
 .fx-section{box-shadow:none;break-inside:avoid;border:1px solid #bbb}
 .fx-acc details{break-inside:avoid}
 .fx-acc details:not([open]) .fx-body{display:block}
 .article-hero-panel{min-height:0;color:#000;background:#fff!important;box-shadow:none}
}
/* длинные ряды вкладок прокручиваются внутри блока и не расширяют страницу */
.page-foreigners .conscript-content>*,.fx-section,.fx-tabs,.fx-tabbar{min-width:0;max-width:100%}
.fx-tabbar{-webkit-overflow-scrolling:touch}
.fx-cols li strong{font-weight:800}