/* ═══ Новый стиль статьи — как главная в стиле gitelman.team ═══ */
:root{
  --logo:url('/journal-logo-black.png');
  --bg-page:#efefef; --bg-card:#fff; --text-main:#000; --text-body:#1f1f1f; --text-muted:#797979;
  --border-subtle:#e4e4e4; --gold:#d8b981; --gold-bright:#d8b981;
  --crimson:#8f7240; --crimson-bright:#7a6036; --crimson2:#151616; --crimson2-bright:#000;
  --shadow-soft:none; --shadow-strong:0 40px 80px -20px rgba(0,0,0,.45);
  --n-gold:#d8b981; --n-gold-ink:#3e2b0b; --n-tag:#b6a996; --n-dark:#151616; --n-gray:#f3f3f3;
}
html body{font-family:'TikTok Sans',Arial,sans-serif;background:#efefef;font-size:18px;line-height:1.6}
body::before{display:none}
body,body *:not(svg):not(path){font-family:'TikTok Sans',Arial,sans-serif!important}
body .comic-img,body img{font-family:initial}

/* верхняя плашка и подвал — с главной */
.topbar{position:sticky;top:12px;z-index:50;margin:12px auto 0;max-width:1100px;padding:0 20px}
.topbar-in{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:8px 22px 8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap;color:#000;text-decoration:none}
.nlogo{width:40px;height:40px;border-radius:50%;background:#000 var(--logo) center/cover no-repeat;display:block;flex:none}
.top-link{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#000;white-space:nowrap;text-decoration:none;border-bottom:1px solid transparent}
.top-link:hover{border-color:var(--n-gold);color:var(--n-gold-ink)}
.soc{display:flex;gap:22px}
.soc a{width:30px;height:30px;display:block;transition:transform .2s;
  background:linear-gradient(110deg,#9a9a9a 0%,#9a9a9a 35%,#e9e9e9 45%,#d8b981 52%,#9a9a9a 62%,#9a9a9a 100%);
  background-size:300% 100%;animation:shimmer 3.8s ease-in-out infinite;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.soc a:nth-child(2){animation-delay:.25s}.soc a:nth-child(3){animation-delay:.5s}
.soc a:hover{transform:translateY(-2px)}
@keyframes shimmer{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.soc--top{justify-self:end;gap:18px}.soc--top a{width:22px;height:22px}
.nfoot .soc a{background-image:linear-gradient(110deg,#b8975c 0%,#d8b981 35%,#fff3d6 45%,#e9cf9c 52%,#d8b981 62%,#b8975c 100%)}
.soc .tg{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E")}
.soc .ig{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.soc .yt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.5a3 3 0 0 0-2.1-2.1C19 5 12 5 12 5s-7 0-8.9.4A3 3 0 0 0 1 7.5 31 31 0 0 0 .6 12 31 31 0 0 0 1 16.5a3 3 0 0 0 2.1 2.1C5 19 12 19 12 19s7 0 8.9-.4a3 3 0 0 0 2.1-2.1A31 31 0 0 0 23.4 12 31 31 0 0 0 23 7.5zM9.8 15.3V8.7l6 3.3z'/%3E%3C/svg%3E")}
.nfoot{margin:80px 6px 6px;background:var(--n-dark);color:#a6a6a6;border-radius:30px;padding:44px 0;font-size:14px;line-height:1.4}
.nfoot .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.f-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.f-brand{display:flex;align-items:center;gap:14px}
.f-brand .name{color:#fff;font-weight:800;font-size:22px;letter-spacing:.01em}
.f-sub{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.f-meta{margin-top:30px;font-size:12px}.f-meta a{color:#d9d9d9;text-decoration:none}

/* статья — белый лист со скруглением на сером фоне */
.article{max-width:880px;margin:22px auto 0;background:#fff;border-radius:30px;padding:56px 0 60px}
.article .article-meta-strip{margin-top:0}
.ncover{margin:0 14px 40px;border-radius:22px;aspect-ratio:16/8;background:#ddd var(--cover) center 30%/cover no-repeat;position:relative}
.ncover .no{position:absolute;left:16px;top:16px;background:var(--n-gold);color:var(--n-gold-ink);font-size:13px;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:7px 13px}
.article-meta-strip{margin:0 auto 16px;color:var(--n-tag);font-weight:700;letter-spacing:.06em}
.article-meta-strip .genre{color:var(--n-tag)}
.article-h1-plain{font-weight:800;font-size:clamp(30px,4.6vw,48px);line-height:1.06;letter-spacing:-.025em;color:#000}
.byline-author{font-weight:700}
.byline-time{border-radius:999px;background:var(--n-gray);padding:4px 12px;color:#575757}

/* текст */
.article-content p{color:#1f1f1f}
.article h2{font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#000}
.lnk,a.lnk{color:#000;border-bottom:2px solid var(--n-gold)}
.lnk:hover,a.lnk:hover{background:#f6eedd}
.cross-list li::before{filter:none}

/* шаг: золотая таблетка с галочкой, как «ШАГ 1» на gitelman.team */
.step-head{background:none;border:0;border-radius:0;box-shadow:none;padding:0;font-size:clamp(24px,3.4vw,32px);text-transform:none}
.step-head .step-no,.step-no{display:inline-flex;align-items:center;gap:8px;background:var(--n-gold);color:var(--n-gold-ink);border-radius:999px;padding:6px 14px 6px 8px;font-size:14px;font-weight:800;letter-spacing:.02em;margin-bottom:14px}
.step-head .step-no::before,.step-no::before{content:"✓";width:20px;height:20px;border-radius:50%;background:var(--n-gold-ink);color:var(--n-gold);display:grid;place-items:center;font-size:12px}

/* примеры компаний — серые карточки */
.example-card{background:var(--n-gray);border:0;border-radius:22px;padding:26px 30px}
.example-title{font-weight:800;color:#000;letter-spacing:-.01em}
.example-list li::before{background:var(--n-gold)!important;border-radius:50%}

/* цитаты — пузыри как в чатах, без чёрной рамки */
.dialogue-bubble{background:var(--n-gray);border:0;border-radius:24px 24px 24px 6px;box-shadow:none;font-style:normal;font-weight:500;color:#000}
.dialogue-bubble::before{display:none}
.dialogue-attr-name{font-weight:800}
.dialogue-avatar{border-radius:50%}

/* вывод — тёмная плашка с золотым текстом */
.insight-line{background:var(--n-dark);color:#fff;border:0;border-radius:22px;padding:26px 30px;font-weight:700}
.insight-line a.lnk{color:#fff}

/* чек-листы и вопросы */
.track-check{background:var(--n-gold);border-radius:50%}
.track-check svg,.track-check path{stroke:var(--n-gold-ink);color:var(--n-gold-ink)}
.q-list li::before{background:var(--n-gold);color:var(--n-gold-ink)}

/* «что можно забрать себе» */
.myth-card{background:var(--n-gray);border:0;border-radius:22px}
.myth-q{border-left:0;padding-left:0;font-weight:800;color:#000}
.myth-q::before{content:"";display:block;width:28px;height:4px;border-radius:2px;background:var(--n-gold);margin-bottom:12px}

/* главный вывод и CTA — тёмные блоки, как форма на главной */
.main-hook{background:var(--n-dark);border:0;border-radius:30px;box-shadow:none;color:#fff;padding:34px 36px}
.main-hook-text,.main-hook li{color:#fff}
.main-hook-text b,.main-hook-text strong{color:var(--n-gold)}
.cta-block{background:var(--n-dark);border:0;border-radius:30px;box-shadow:0 40px 60px -30px rgba(0,0,0,.35);color:#fff;padding:40px}
.cta-block p,.cta-block li{color:#e9e9e9}
.cta-block a.lnk{color:#fff}
.cta-block .comic-img{border-radius:18px}
.cta-button{background:var(--n-gold)!important;color:var(--n-gold-ink)!important;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:14px;padding:15px 26px;box-shadow:none}
.cta-button:hover{filter:brightness(1.06);transform:none}
.comic-img{border-radius:20px;box-shadow:none}

/* «читайте также» — карточки с главной */
.related-head{font-weight:800;letter-spacing:.02em;color:#000}
.related-card{border:0;border-radius:20px;box-shadow:none;background:var(--n-gray)}
.related-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.related-media img{border-radius:14px}
.related-kicker{color:var(--n-tag);font-weight:700;font-size:11px;letter-spacing:.06em}
.related-title{font-weight:800;color:#000}

@media (max-width:900px){
  .topbar-in{grid-template-columns:auto 1fr auto;padding-right:14px;gap:10px}
  .brand .word{display:none}
  .top-link{font-size:12px;justify-self:center}
  .soc--top{gap:12px}.soc--top a{width:19px;height:19px}
  .article{margin:16px 8px 0;border-radius:24px;padding-top:36px}
  .ncover{margin:0 8px 28px;border-radius:18px;aspect-ratio:16/10}
  .cta-block,.main-hook{padding:28px 22px}
}

/* уточнения: перебить более сильные правила статьи */
.article .article-content h2.step-head{background:none;border:0;border-radius:0;box-shadow:none;padding:0;font-size:clamp(26px,3.4vw,34px);line-height:1.1}
.article .step-head .step-no{display:flex;width:fit-content;font-size:14px;letter-spacing:.02em;color:var(--n-gold-ink);margin-bottom:14px}
.article .article-content a.lnk,.article a.lnk,.article .dialogue-attr-meta a.lnk{color:#000;border-bottom:2px solid var(--n-gold)}
.article .article-content a.lnk:hover,.article a.lnk:hover{background:#f6eedd;color:#000;border-bottom-color:var(--n-gold);box-shadow:0 0 0 3px #f6eedd}
.article .insight-line a.lnk,.article .cta-block a.lnk,.article .main-hook a.lnk{color:#fff}
.article .insight-line a.lnk:hover,.article .cta-block a.lnk:hover{background:rgba(216,185,129,.2);box-shadow:none}
.article .main-hook .main-hook-text,.article .main-hook li,.article .main-hook p{color:#fff!important}
.article .main-hook b,.article .main-hook strong{color:var(--n-gold)!important}
.article .main-hook .hook-list li::marker{color:var(--n-gold)}
@media (max-width:600px){.article .article-content h2.step-head{font-size:23px;overflow-wrap:break-word;hyphens:auto}}
/* мобильная: правки 07.10 */
@media (max-width:600px){
  .article .cta-button,.nfoot .cta-button{white-space:normal;max-width:100%;text-align:center;justify-content:center;font-size:12px;letter-spacing:.01em;padding:12px 16px;line-height:1.3}
  .article .article-content,.article .cta-block{overflow-wrap:break-word}
  .article .cta-block{padding:24px 18px}
  .nfoot .f-brand .name{font-size:19px}
  .nfoot .f-sub{font-size:10px;letter-spacing:.03em;white-space:nowrap}
}

/* подвал: кнопка диагностики сохранена из старого подвала (та же ссылка и метка) */
.nfoot .f-brand{color:inherit;text-decoration:none}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.f-bottom .f-meta{margin-top:0}
.f-meta a{border-bottom:1px solid var(--n-gold)}
.nfoot .cta-button{display:inline-flex;align-items:center}
@media (max-width:600px){.f-bottom .cta-button{width:100%;justify-content:center}}
/* пункты списков — флекс: неразрывные ссылки внутри должны уметь переноситься на узком экране */
.article .track-list li a,.article .track-list li span:not(.track-check){overflow-wrap:anywhere}

/* тёмные блоки (вывод, запись на диагностику): в старых выпусках часть текста была жёстко чёрной */
.article :is(.main-hook,.cta-block) :is(h1,h2,h3,h4,p,li,div,span,strong,b,em,i,label){color:#fff}
.article :is(.main-hook,.cta-block) :is(.line-black,.accent,mark){color:var(--n-gold)!important;background:none}
.article :is(.main-hook,.cta-block) a:not(.cta-button){color:#fff!important}
.article .cta-block .cta-button,.article .cta-block .cta-button *{color:var(--n-gold-ink)!important}
.article .cta-block .track-check{color:var(--n-gold-ink)}
/* мелкие бежевые подписи в статье — чуть темнее, чтобы читались на белом */
.article .article-meta-strip,.article .article-meta-strip .genre,.related-kicker{color:#8a7a60}