/* ==========================================================================
   workingcell.ru — страница статьи блога. Компоненты .ar-*
   Редакционный стиль: смешанный регистр, hairline-линии, воздух.
   Надстройка над base.css + site.css + blog.css. Бренд: navy + orange, Exo 2.
   ========================================================================== */

.ar-body,.ar-head,.ar-final{
  --ink:#213541;            /* основной текст статьи — темнее токена body для читаемости */
  --ink-soft:#4a5d6a;
  --line:#e7edf0;           /* тонкая линия-разделитель */
  --line-strong:#d5dee3;
  --tint:#f5f9fb;           /* очень светлая холодная подложка */
  --measure:704px;
}

/* ---------- Полоса прогресса чтения ---------- */
.ar-progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--color-orange-600);z-index:60;transition:width .1s linear;}

/* ---------- Шапка статьи ---------- */
.ar-head{background:#fff;border-bottom:1px solid var(--line);}
.ar-head__inner{padding-top:clamp(18px,2.2vw,28px);padding-bottom:clamp(28px,3.2vw,42px);max-width:1360px;}

/* Тёмный вариант первого экрана — тот же приём, что у героя на главной блога:
   navy-градиент + паттерн-плитка + оранжевое свечение + скошенная полоса. */
.ar-head--dark{position:relative;overflow:hidden;border-bottom:none;color:#fff;
  background:linear-gradient(135deg,#1a2d38 0%,#2f485c 62%,#3d5d74 100%);}
.ar-head__tile{position:absolute;inset:0;background:url(../img/tile-white.png) 0 0;background-size:118px 96px;
  opacity:.04;pointer-events:none;}
.ar-head__glow{position:absolute;right:-140px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,73,0,.28) 0%,rgba(255,73,0,0) 68%);pointer-events:none;}
.ar-head__slash{position:absolute;left:0;bottom:0;width:100%;height:6px;background:var(--color-orange-600);
  clip-path:polygon(0 0,58% 0,54% 100%,0 100%);}
.ar-head--dark .ar-head__inner{position:relative;z-index:1;
  padding-top:clamp(20px,2.6vw,32px);padding-bottom:clamp(34px,4.2vw,54px);}

.ar-head--dark .ar-crumbs{color:rgba(255,255,255,.55);}
.ar-head--dark .ar-crumbs a{color:rgba(255,255,255,.72);}
.ar-head--dark .ar-crumbs a:hover{color:var(--color-orange-500);}
.ar-head--dark .ar-crumbs span[aria-current]{color:#fff;}
.ar-head--dark .ar-crumbs svg{stroke:rgba(255,255,255,.35);}

.ar-head--dark .ar-cat{color:var(--color-orange-500);}
.ar-head--dark .ar-cat:hover{color:#fff;}
.ar-head--dark .ar-h1{color:#fff;}
.ar-head--dark .ar-lead{color:rgba(255,255,255,.76);}
.ar-head--dark .ar-meta{color:rgba(255,255,255,.6);}
.ar-head--dark .ar-meta b{color:#fff;}
.ar-head--dark .ar-meta__dot{background:rgba(255,255,255,.3);}
.ar-head--dark .ar-meta svg{stroke:rgba(255,255,255,.6);}
.ar-head--dark .ar-share button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
.ar-head--dark .ar-share button:hover{background:var(--color-orange-600);border-color:var(--color-orange-600);color:#fff;}
.ar-head--dark .ar-cover{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);
  box-shadow:0 18px 44px rgba(0,0,0,.3);}
.ar-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:var(--color-text-muted);margin-bottom:clamp(22px,2.6vw,32px);}

/* Компактный первый экран: текст слева + обложка справа (как у B2B-блогов) */
.ar-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:clamp(26px,4vw,52px);align-items:center;}
.ar-hero__text{min-width:0;}
@media(max-width:900px){.ar-hero{grid-template-columns:1fr;gap:22px;}}
.ar-crumbs a{color:var(--color-text-muted);text-decoration:none;transition:color .15s ease;}
.ar-crumbs a:hover{color:var(--color-orange-600);}
.ar-crumbs span[aria-current]{color:var(--ink);}

/* Категория — тонкий eyebrow вместо «таблетки» */
.ar-cat{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-brand);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-orange-700);text-decoration:none;margin-bottom:18px;}
.ar-cat::before{content:"";width:22px;height:2px;background:var(--color-orange-600);border-radius:2px;}
.ar-cat:hover{color:var(--color-orange-600);}

.ar-h1{font-family:var(--font-brand);font-weight:800;font-size:clamp(27px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  color:var(--color-navy-900);margin:0 0 18px;text-wrap:balance;}
.ar-lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;color:var(--ink-soft);margin:0 0 22px;max-width:none;font-weight:400;}
.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:13.5px;color:var(--color-text-muted);}
.ar-meta__dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);}
.ar-meta b{color:var(--ink);font-weight:700;}
.ar-share{display:flex;align-items:center;gap:7px;margin-left:auto;}
.ar-share button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--color-navy-800);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.ar-share button:hover{border-color:var(--color-orange-600);color:var(--color-orange-600);}
.ar-share button svg{stroke:currentColor;}
@media(max-width:620px){.ar-share{margin-left:0;width:100%;}}

.ar-cover{margin:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 1px 2px rgba(33,53,65,.08);
  aspect-ratio:4/3;width:100%;background:var(--color-neutral-100);}
.ar-cover img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){.ar-cover{aspect-ratio:16/9;}}
.ar-cover__cap{font-size:12.5px;color:var(--color-text-muted);margin:11px 2px 0;}

/* ---------- Раскладка «текст + боковая колонка» ---------- */
.ar-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(40px,5vw,72px);
  align-items:start;padding-top:clamp(30px,3.6vw,48px);padding-bottom:clamp(44px,5vw,72px);max-width:1360px;}
@media(max-width:1080px){.ar-wrap{grid-template-columns:minmax(0,1fr);}.ar-aside{display:none;}}

/* ---------- Типографика текста статьи ---------- */
.ar-body{max-width:none;min-width:0;font-size:18px;line-height:1.78;color:var(--ink);letter-spacing:-.002em;}
.ar-body h2{font-family:var(--font-brand);font-weight:800;font-size:clamp(23px,2.6vw,30px);line-height:1.18;
  letter-spacing:-.015em;color:var(--color-navy-900);margin:54px 0 16px;scroll-margin-top:104px;text-wrap:balance;}
.ar-body h2:first-child{margin-top:0;}
.ar-body h3{font-family:var(--font-brand);font-weight:700;font-size:19.5px;line-height:1.3;color:var(--color-navy-800);
  margin:34px 0 12px;scroll-margin-top:104px;}
.ar-body p{margin:0 0 20px;}
.ar-body a{color:var(--color-navy-900);text-decoration:underline;text-decoration-color:var(--color-orange-500);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s ease;}
.ar-body a:hover{color:var(--color-orange-700);}
.ar-body strong{color:var(--color-navy-900);font-weight:700;}
.ar-body ul,.ar-body ol{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.ar-body ul li{position:relative;padding-left:28px;}
.ar-body ul li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:2px;
  background:var(--color-orange-500);border-radius:2px;}
.ar-body ol{counter-reset:ar;}
.ar-body ol li{position:relative;padding-left:40px;counter-increment:ar;min-height:25px;}
.ar-body ol li::before{content:counter(ar);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  border:1.5px solid var(--color-navy-200,#cfdbe3);color:var(--color-navy-800);background:#fff;
  font-family:var(--font-brand);font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;}

/* Врезка «Коротко» — сводка в начале, её же цитируют ИИ-поисковики */
.ar-tldr{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:24px 28px;margin:0 0 36px;}
.ar-tldr h2,.ar-tldr b{font-family:var(--font-brand);font-weight:700;font-size:12px !important;text-transform:uppercase;
  letter-spacing:.14em;color:var(--color-orange-700);margin:0 0 15px !important;display:flex;align-items:center;gap:9px;}
.ar-tldr h2::before,.ar-tldr b::before{content:"";width:20px;height:2px;background:var(--color-orange-600);border-radius:2px;}
.ar-tldr ul{margin:0;gap:12px;}
.ar-tldr li{font-size:16px;line-height:1.6;color:var(--ink);}
.ar-tldr li::before{top:12px;}

/* Врезка «Важно» */
.ar-note{background:var(--color-orange-50);border:1px solid var(--color-orange-100);border-radius:var(--radius-xl);
  padding:20px 24px;margin:6px 0 28px;display:flex;gap:15px;align-items:flex-start;}
.ar-note__ic{flex-shrink:0;width:22px;height:22px;color:var(--color-orange-600);margin-top:1px;}
.ar-note__ic svg{width:22px;height:22px;display:block;}
.ar-note b{display:block;font-family:var(--font-brand);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-orange-700);margin-bottom:7px;}
.ar-note p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-soft);}

/* Таблица — редакционная: hairline-строки, без «коробки» */
.ar-tablewrap{overflow-x:auto;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;}
.ar-table{width:100%;border-collapse:collapse;font-size:15px;min-width:540px;}
.ar-table th,.ar-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;}
.ar-table thead th{background:var(--tint);color:var(--color-navy-900);font-family:var(--font-brand);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line-strong);}
.ar-table tbody td:first-child{color:var(--color-navy-800);font-weight:600;}
.ar-table tbody tr:last-child td{border-bottom:none;}
.ar-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:var(--color-navy-900);}
.ar-table tfoot td{background:var(--tint);font-weight:700;color:var(--color-navy-900);font-family:var(--font-brand);border-top:1px solid var(--line-strong);}
.ar-cap{font-size:13px;line-height:1.5;color:var(--color-text-muted);margin:0 0 28px;}

/* Определение для ИИ-ответов — тонкая навигационная линия слева, без «коробки» */
.ar-def{border-left:3px solid var(--color-navy-800);padding:4px 0 4px 22px;margin:6px 0 28px;}
.ar-def b{display:block;font-family:var(--font-brand);font-weight:700;font-size:16px;color:var(--color-navy-900);margin-bottom:8px;}
.ar-def p{margin:0;font-size:16px;line-height:1.62;color:var(--ink-soft);}

/* Чек-лист */
.ar-check{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px 28px;margin:6px 0 28px;}
.ar-check h3{margin:0 0 16px !important;font-size:16px !important;font-weight:700 !important;color:var(--color-navy-900);
  display:flex;align-items:center;gap:9px;}
.ar-check h3::before{content:"";width:20px;height:2px;background:var(--color-orange-600);border-radius:2px;}
.ar-check ul{margin:0;gap:13px;}
.ar-check li{font-size:16px;line-height:1.55;color:var(--ink);padding-left:30px;}
.ar-check li::before{content:"" !important;position:absolute;left:0;top:2px !important;width:19px !important;height:19px !important;
  border-radius:50% !important;background:#fff !important;border:1px solid var(--color-orange-200);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23e84500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:center !important;}

/* Картинка внутри статьи */
.ar-fig{margin:0 0 28px;}
.ar-fig img{width:100%;border-radius:var(--radius-lg);display:block;}
.ar-fig figcaption{font-size:13px;color:var(--color-text-muted);margin-top:10px;}

/* Источники — подтверждают факты для читателя и для ИИ-поисковиков */
.ar-sources{scroll-margin-top:104px;border-top:1px solid var(--line-strong);padding:32px 0 0;margin:44px 0 0;}
.ar-sources h2{font-family:var(--font-brand);font-weight:700;font-size:12px !important;text-transform:uppercase;
  letter-spacing:.14em;color:var(--color-navy-900);margin:0 0 8px !important;}
.ar-sources__note{font-size:14px;line-height:1.6;color:var(--color-text-muted);margin:0 0 20px;max-width:var(--measure);}
.ar-body .ar-sources__list{margin:0;gap:16px;counter-reset:src;}
.ar-body .ar-sources__list li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:4px;
  align-items:start;counter-increment:src;padding-left:0;min-height:0;}
.ar-body .ar-sources__list li::before{content:counter(src,decimal-leading-zero);position:static;grid-row:1 / span 2;
  font-family:var(--font-brand);font-weight:700;font-size:13px;color:var(--color-orange-600);margin-top:1px;
  width:auto;height:auto;background:none;border:none;}
.ar-body .ar-sources__list a{display:inline;font-family:var(--font-brand);font-weight:700;font-size:15.5px;line-height:1.4;
  color:var(--color-navy-900);text-decoration:underline;text-decoration-color:var(--color-orange-300,#ffbf9e);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .15s ease;}
.ar-body .ar-sources__list a:hover{text-decoration-color:var(--color-orange-600);}
.ar-body .ar-sources__list span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:5px;}

/* Хвост статьи: теги */
.ar-tail{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:28px;margin-top:36px;border-top:1px solid var(--line);}
.ar-tail > span:first-child{font-size:13px;color:var(--color-text-muted);margin-right:2px;}
.ar-tag{display:inline-flex;align-items:center;height:31px;padding:0 15px;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;color:var(--color-navy-700);font-size:13.5px;text-decoration:none;transition:all .15s ease;}
.ar-tag:hover{border-color:var(--color-orange-600);color:var(--color-orange-700);}

/* ---------- Боковая колонка ---------- */
.ar-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px;}
.ar-toc{padding:0;}
.ar-toc h2{font-family:var(--font-brand);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-text-muted);margin:0 0 14px;padding-left:15px;}
.ar-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  border-left:1px solid var(--line);}
.ar-toc a{display:block;padding:7px 0 7px 15px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;
  color:var(--ink-soft);text-decoration:none;transition:color .15s ease,border-color .15s ease;}
.ar-toc a:hover{color:var(--color-navy-900);}
.ar-toc a.is-active{color:var(--color-navy-900);border-left-color:var(--color-orange-600);font-weight:600;}

.ar-cta{background:var(--color-navy-900);border-radius:var(--radius-xl);padding:26px 24px;position:relative;overflow:hidden;}
.ar-cta__tile{position:absolute;inset:0;background:url(../img/tile-white.png) 0 0;background-size:118px 96px;opacity:.05;}
.ar-cta h3{position:relative;font-family:var(--font-brand);font-weight:800;font-size:19px;line-height:1.2;
  color:#fff;margin:0 0 10px;letter-spacing:-.01em;}
.ar-cta p{position:relative;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 18px;}
.ar-cta .wc-btn{position:relative;width:100%;text-decoration:none;}
.ar-cta__phone{position:relative;display:block;text-align:center;margin-top:12px;font-family:var(--font-brand);font-weight:700;
  font-size:15px;color:#fff;text-decoration:none;}
.ar-cta__phone:hover{color:var(--color-orange-500);}

.ar-side-sub{border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px;}
.ar-side-sub b{display:block;font-family:var(--font-brand);font-weight:700;font-size:14.5px;color:var(--color-navy-900);margin-bottom:8px;}
.ar-side-sub p{margin:0 0 15px;font-size:13.5px;line-height:1.5;color:var(--color-text-muted);}
.ar-side-sub input{width:100%;height:44px;margin-bottom:10px;}
.ar-side-sub .wc-btn{width:100%;}

.ar-side-more{padding:0;}
.ar-side-more h2{font-family:var(--font-brand);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-text-muted);margin:0 0 14px;}

/* ---------- Финальный CTA во всю ширину ---------- */
.ar-final{background:var(--color-navy-900);position:relative;overflow:hidden;}
.ar-final__tile{position:absolute;inset:0;background:url(../img/tile-white.png) 0 0;background-size:118px 96px;opacity:.05;}
.ar-final__inner{position:relative;display:grid;grid-template-columns:1fr 420px;gap:clamp(28px,4vw,56px);align-items:center;
  padding-top:clamp(40px,4.6vw,60px);padding-bottom:clamp(40px,4.6vw,60px);}
.ar-final h2{font-family:var(--font-brand);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.015em;
  color:#fff;margin:14px 0 14px;text-wrap:balance;}
.ar-final p{margin:0 0 20px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:560px;}
.ar-final__card{background:#fff;border-radius:var(--radius-2xl);padding:28px;box-shadow:var(--shadow-2xl);}
@media(max-width:900px){.ar-final__inner{grid-template-columns:1fr;}}

/* ---------- FAQ статьи ---------- */
.ar-faq{display:flex;flex-direction:column;gap:0;margin:6px 0 8px;border-top:1px solid var(--line);}
.ar-faq .wc-faq-item{border-bottom:1px solid var(--line);}
.ar-faq .wc-faq-q{font-family:var(--font-brand);font-weight:700;font-size:16.5px;color:var(--color-navy-900);}