/* ============================================================
   РФ-БУХ — карандашная тема (04.09.2026)
   Все надписи — рукописные шрифты с полной кириллицей:
   Neucha (печатный «от руки», основной) + Caveat (курсив, акценты).
   Буквы разноцветные — как набор цветных карандашей.
   ============================================================ */

:root{
  --pen-graphite:#3a2415;
  --pen-brown:#2d1200;
  --pen-amber:#d97000;
  --pen-terra:#b5522a;
  --pen-olive:#6f7b3a;
  --pen-teal:#3f7f80;
  --pen-plum:#7a4a63;
  --pen-paper:#fdf6ee;
  --pen-line:#d9c3a5;
}

/* ---------- бумага под всем сайтом ---------- */
body{
  background-color:var(--pen-paper);
  background-image:url('/assets/img/paper-texture.jpg');
  background-size:900px auto;
  background-repeat:repeat;
  background-attachment:fixed;
  font-family:'Neucha',system-ui,sans-serif;
  color:var(--pen-graphite);
}
/* секции просвечивают бумагу, а не закрашивают её наглухо */
section,header,footer{background-color:transparent !important}
#why[style]{background:transparent !important}

/* ---------- вся типографика от руки ---------- */
h1,h2,h3,h4,h5,h6,
.hero-h1,.hero-badge,.hero-price-num,.hero-price-from,.hero-price-unit,
nav a,.btn-primary,.btn-outline,button,
.calc-label,.calc-price-num,.calc-result-label,.calc-hint,
.comp-table th,.comp-table td,
summary,label,input,select,textarea,
.stat-num,.stat-label,.card h3,.card p,p,li,a,span,div,td,th{
  font-family:'Neucha','Comic Sans MS',cursive,system-ui,sans-serif !important;
  letter-spacing:.005em;
}
body{font-size:18.5px;line-height:1.78;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:.01em}

/* заголовки — цветными карандашами, по очереди разные цвета */
h1{color:var(--pen-brown)}
h2{color:var(--pen-terra)}
section:nth-of-type(2n) h2{color:var(--pen-teal)}
section:nth-of-type(3n) h2{color:var(--pen-olive)}
h3{color:var(--pen-amber)}
section:nth-of-type(2n) h3{color:var(--pen-plum)}

/* подчерк «от руки» под заголовками второго уровня */
h2::after{
  content:"";display:block;width:clamp(56px,12%,120px);height:0;
  margin-top:8px;
  border-bottom:2.5px solid currentColor;
  border-radius:60% 40% 55% 45%/100% 100% 100% 100%;
  opacity:.55;transform:rotate(-.5deg);
}

/* ---------- меню: пункты как карандашные пометки ---------- */
.art-top,header nav,.nav-links{font-family:'Neucha',cursive !important}
nav a,.nav-links a{
  position:relative;color:var(--pen-graphite) !important;
  text-decoration:none;padding:2px 2px 4px;
}
nav a:nth-child(4n+1){color:var(--pen-terra) !important}
nav a:nth-child(4n+2){color:var(--pen-teal) !important}
nav a:nth-child(4n+3){color:var(--pen-olive) !important}
nav a:nth-child(4n+4){color:var(--pen-plum) !important}
/* волнистое подчёркивание карандашом при наведении */
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:radial-gradient(circle at 3px 3px,currentColor 1.4px,transparent 1.6px) 0 0/7px 6px repeat-x;
  opacity:0;transition:opacity .18s ease;
}
nav a:hover::after,nav a:focus-visible::after{opacity:.85}

/* ---------- кнопки: набросок карандашом ---------- */
.btn-primary,.btn-outline,button.btn-primary,button.btn-outline{
  font-family:'Neucha',cursive !important;
  font-size:18px;letter-spacing:.01em;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px; /* «кривая» рамка от руки */
  border:2.5px solid var(--pen-brown);
  box-shadow:1.5px 2px 0 rgba(58,36,21,.30);
  transition:transform .13s ease,box-shadow .13s ease;
}
.btn-primary{background:var(--pen-amber);color:#fff8f0;border-color:#a85400}
.btn-outline{background:transparent;color:var(--pen-brown)}
.btn-primary:hover,.btn-outline:hover{transform:translateY(-2px) rotate(-.35deg);
  box-shadow:2.5px 4px 0 rgba(58,36,21,.34)}
.btn-primary:active,.btn-outline:active{transform:translateY(1px);
  box-shadow:0.5px 1px 0 rgba(58,36,21,.3)}
.btn-primary:focus-visible,.btn-outline:focus-visible{
  outline:3px dashed var(--pen-amber);outline-offset:3px}

/* ---------- карточки и блоки: рамка «нарисована от руки» ---------- */
.card,.calc-card,.comp-table-wrap,.art-toc,.art-faq,.hub-card,.calc-wrap,.contact-form{
  background:rgba(255,248,240,.72) !important;
  border:2px solid var(--pen-line) !important;
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.13);
}
.card:hover,.hub-card:hover{transform:translateY(-2px) rotate(-.25deg)}

/* ---------- слоган на геро ---------- */
.hero-slogan-line,.hero-slogan-brand{font-family:'Caveat',cursive !important}
.hero-slogan-line{font-size:clamp(19px,2.6vw,32px);color:var(--pen-brown)}
.hero-slogan-brand{font-size:clamp(22px,3.2vw,40px);color:var(--pen-amber)}

/* бейдж «Отчётность сдаётся в срок» теперь нарисован внутри картинки */
.hero-photo-badge{display:none !important}

/* ---------- логотип ---------- */
.logo-pencil{height:clamp(40px,5vw,58px);width:auto;display:block}
.logo-text-fallback{font-family:'Caveat',cursive;font-weight:700;
  font-size:28px;color:var(--pen-brown)}

/* ---------- таблица: тетрадная разлиновка ---------- */
.comp-table th,.comp-table td{border-color:var(--pen-line) !important}
.comp-table th{color:var(--pen-terra)}

/* ---------- мелочи ---------- */
hr{border:0;border-top:2px solid var(--pen-line);
   border-radius:60% 40% 55% 45%/100% 100% 100% 100%}
::selection{background:rgba(217,112,0,.24)}
@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn-outline,.card,.hub-card{transition:none}
}


/* ---------- «Учительский» классический почерк ---------- */
h1,h2,h3,h4,.hero-h1,.hero-badge,
.btn-primary,.btn-outline,button,
nav a,.nav-links a,
.stat-num,.stat-label,.calc-price-num,.calc-result-label,
.comp-table th,summary,.card h3{
  font-family:'Caveat',cursive !important;
  font-weight:700 !important;
  letter-spacing:.012em;
}
/* Caveat мельче по кеглю — компенсируем размером, чтобы читалось чётко */
h1,.hero-h1{font-size:clamp(38px,6.4vw,68px);line-height:1.1}
h2{font-size:clamp(30px,4.4vw,46px);line-height:1.15}
h3,.card h3{font-size:clamp(24px,3vw,32px);line-height:1.2}
nav a,.nav-links a{font-size:clamp(20px,2.1vw,25px)}
.btn-primary,.btn-outline,button{font-size:clamp(20px,2.1vw,24px) !important}
.stat-num,.calc-price-num{font-size:clamp(34px,5vw,54px)}
.stat-label{font-size:clamp(17px,2vw,21px)}
.comp-table th{font-size:19px}
summary{font-size:21px}
/* тело — печатный «от руки», максимально разборчиво */
p,li,td,label,input,select,textarea,.hero-sub,.calc-hint,.art-lead{
  font-family:'Neucha',system-ui,sans-serif !important;font-weight:400 !important}

/* ---------- карандашный логотип в шапке и подвале ---------- */
.nav-logo{display:inline-flex;align-items:center;text-decoration:none}
.logo-pencil{height:clamp(38px,4.6vw,54px);width:auto;display:block;
  mix-blend-mode:multiply}
.logo-pencil--sm{height:40px}
.footer-logo{display:flex;justify-content:center}
@media (max-width:640px){.logo-pencil{height:34px}}

/* ---------- карандашные иконки в калькуляторе ---------- */
.ic-pencil{width:clamp(46px,7vw,64px);height:auto;display:block;margin:0 auto 6px;
  mix-blend-mode:multiply;filter:saturate(1.02)}
.calc-card label,.calc-cards label{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:2px}

/* ---------- калькулятор: иконки не должны распирать карточки ---------- */
.calc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;width:100%}
.calc-cards>*{min-width:0}
.calc-card{min-width:0;overflow:hidden;padding:12px 10px}
.calc-card label{min-width:0;width:100%;word-break:break-word;hyphens:auto;
  font-size:clamp(14px,1.7vw,17px);line-height:1.25}
.calc-card small{font-size:clamp(11px,1.3vw,13px);line-height:1.2;display:block}
.ic-pencil{width:clamp(38px,5vw,54px);max-width:100%;height:auto}
.calc-wrap,.calc-group{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
@media (max-width:520px){
  .calc-cards{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
  .ic-pencil{width:38px}
}

/* ---------- кнопка «Статьи»: карандашный ярлычок ---------- */
.nav-articles{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:'Caveat',cursive !important;font-weight:700;
  font-size:clamp(20px,2.2vw,26px);line-height:1;
  color:var(--pen-brown) !important;text-decoration:none;
  padding:9px 20px 10px;margin-left:6px;
  background:#fff8f0;
  border:2.5px solid var(--pen-amber);
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.28);
  transform:rotate(-.7deg);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.nav-articles::before{
  content:"";width:20px;height:16px;flex:0 0 auto;
  background:
    linear-gradient(var(--pen-amber),var(--pen-amber)) 0 2px/20px 2px no-repeat,
    linear-gradient(var(--pen-terra),var(--pen-terra)) 0 7px/15px 2px no-repeat,
    linear-gradient(var(--pen-olive),var(--pen-olive)) 0 12px/18px 2px no-repeat;
}
.nav-articles:hover{transform:rotate(-.7deg) translateY(-2px);
  background:#fff3e0;box-shadow:2.5px 4px 0 rgba(58,36,21,.32)}
.nav-articles:active{transform:rotate(-.7deg) translateY(1px);
  box-shadow:.5px 1px 0 rgba(58,36,21,.3)}
.nav-articles:focus-visible{outline:3px dashed var(--pen-amber);outline-offset:3px}
.nav-articles::after{display:none !important}
@media (max-width:640px){.nav-articles{font-size:19px;padding:7px 15px 8px}}


/* ============================================================
   КАЛЬКУЛЬТОР v2 (05.09.2026) — методика федеральных аутсорсеров,
   карандашное оформление: тумблеры, ползунки, чипы, чек.
   ============================================================ */
.calc2{padding:1.9rem 1.7rem}
.calc2 .calc-group{margin-bottom:1.9rem}
.calc2 .calc-group[hidden]{display:none}
.calc2 .calc-label{
  display:block;margin-bottom:.85rem;
  font-family:'Caveat',cursive !important;font-weight:700 !important;
  font-size:clamp(20px,2.4vw,25px);line-height:1.2;
  letter-spacing:.01em;text-transform:none;color:var(--pen-terra)}
.calc2 .calc-label em{font-style:normal;color:var(--pen-graphite);opacity:.62;
  font-size:.82em;font-family:'Neucha',cursive !important;font-weight:400 !important}
.calc-num{font-style:normal;color:var(--pen-amber)}

/* ── тумблеры услуг ─────────────────────────────────────────── */
.calc-svc{display:grid;gap:.6rem}
.calc-switch{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.75rem .95rem;cursor:pointer;
  background:rgba(255,248,240,.55);
  border:2px solid var(--pen-line);
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.10);
  transition:border-color .16s ease,background .16s ease,transform .13s ease,box-shadow .13s ease}
.calc-switch:hover{transform:translateY(-2px) rotate(-.2deg);
  border-color:rgba(217,112,0,.55);box-shadow:2.5px 4px 0 rgba(58,36,21,.16)}
.calc-switch input{position:absolute;opacity:0;width:0;height:0}
.cs-box{
  flex:0 0 auto;width:26px;height:26px;margin-top:2px;position:relative;
  border:2.5px solid var(--pen-brown);background:#fffaf3;
  border-radius:58% 42% 50% 50%/50% 55% 45% 50%;
  box-shadow:1px 1.5px 0 rgba(58,36,21,.22);transition:background .15s ease}
.cs-box::after{
  content:"";position:absolute;left:5px;top:2px;width:9px;height:16px;
  border:solid var(--pen-amber);border-width:0 3.5px 3.5px 0;
  transform:rotate(42deg) scale(.35);opacity:0;
  transition:transform .17s cubic-bezier(.2,.9,.3,1.4),opacity .14s ease}
.calc-switch input:checked ~ .cs-box::after{transform:rotate(42deg) scale(1);opacity:1}
.calc-switch input:checked ~ .cs-txt b{color:var(--pen-amber)}
.calc-switch:has(input:checked){border-color:var(--pen-amber);background:rgba(255,243,224,.75)}
.calc-switch input:focus-visible ~ .cs-box{outline:3px dashed var(--pen-amber);outline-offset:3px}
.cs-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.cs-txt b{font-family:'Neucha',cursive !important;font-weight:700 !important;
  font-size:clamp(16px,1.9vw,19px);line-height:1.25;color:var(--pen-brown)}
.cs-txt small{font-size:clamp(13px,1.5vw,15px);line-height:1.3;
  color:var(--pen-graphite);opacity:.72}

/* ── ползунки ───────────────────────────────────────────────── */
.calc-slider{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem}
.calc-slider input[type=range]{
  flex:1 1 240px;min-width:0;height:26px;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.calc-slider input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:6px;
  background:linear-gradient(90deg,rgba(217,112,0,.45),rgba(217,112,0,.16));
  border:2px solid var(--pen-line)}
.calc-slider input[type=range]::-moz-range-track{
  height:8px;border-radius:6px;
  background:linear-gradient(90deg,rgba(217,112,0,.45),rgba(217,112,0,.16));
  border:2px solid var(--pen-line)}
.calc-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;
  background:var(--pen-amber);border:2.5px solid var(--pen-brown);
  border-radius:58% 42% 52% 48%/48% 56% 44% 52%;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.30);transition:transform .13s ease}
.calc-slider input[type=range]::-moz-range-thumb{
  width:24px;height:24px;background:var(--pen-amber);border:2.5px solid var(--pen-brown);
  border-radius:58% 42% 52% 48%/48% 56% 44% 52%;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.30)}
.calc-slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1) rotate(-6deg)}
.calc-slider input[type=range]:active::-webkit-slider-thumb{transform:scale(.96)}
.calc-slider input[type=range]:focus-visible{outline:3px dashed var(--pen-amber);
  outline-offset:4px;border-radius:8px}

/* ── числовое поле со степперами ────────────────────────────── */
.calc-num-box{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;flex-wrap:wrap}
.calc-num-box--solo{margin-top:.2rem}
.calc-num-box input[type=number]{
  width:5.2rem;padding:.34rem .4rem;text-align:center;
  font-family:'Caveat',cursive !important;font-weight:700 !important;
  font-size:clamp(21px,2.3vw,26px);color:var(--pen-brown);
  background:#fffaf3;border:2.5px solid var(--pen-brown);
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  box-shadow:1px 1.5px 0 rgba(58,36,21,.20);-moz-appearance:textfield}
.calc-num-box input[type=number]::-webkit-outer-spin-button,
.calc-num-box input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-num-box input[type=number]:focus-visible{outline:3px dashed var(--pen-amber);outline-offset:3px}
.calc-step{
  width:34px;height:34px;flex:0 0 auto;cursor:pointer;line-height:1;
  font-family:'Caveat',cursive !important;font-size:24px !important;font-weight:700;
  color:var(--pen-brown);background:#fff8f0;
  border:2.5px solid var(--pen-brown);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow:1.5px 2px 0 rgba(58,36,21,.24);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.calc-step:hover{background:#ffecd4;transform:translateY(-2px);
  box-shadow:2.5px 3.5px 0 rgba(58,36,21,.28)}
.calc-step:active{transform:translateY(1px);box-shadow:.5px 1px 0 rgba(58,36,21,.28)}
.calc-step:focus-visible{outline:3px dashed var(--pen-amber);outline-offset:3px}
.calc-unit{font-size:clamp(14px,1.6vw,16px);color:var(--pen-graphite);opacity:.7;
  white-space:nowrap}
.calc-scale{display:flex;justify-content:space-between;margin-top:.35rem;
  font-size:13px;color:var(--pen-graphite);opacity:.5}
.calc-tip{margin-top:.5rem;font-size:clamp(13px,1.5vw,15px);
  color:var(--pen-graphite);opacity:.68}

/* ── чипы «вид деятельности» ────────────────────────────────── */
.calc-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.calc-chip{position:relative;cursor:pointer}
.calc-chip input{position:absolute;opacity:0;width:0;height:0}
.calc-chip span{
  display:inline-block;padding:.42rem .95rem;
  font-family:'Neucha',cursive !important;
  font-size:clamp(15px,1.7vw,17px);line-height:1.3;color:var(--pen-graphite);
  background:#fffaf3;border:2px solid var(--pen-line);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  box-shadow:1px 1.5px 0 rgba(58,36,21,.14);
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease,
             border-color .13s ease,color .13s ease}
.calc-chip:hover span{transform:translateY(-2px) rotate(-.4deg);
  border-color:rgba(217,112,0,.55);box-shadow:2px 3px 0 rgba(58,36,21,.20)}
.calc-chip input:checked + span{
  background:#ffecd4;border-color:var(--pen-amber);color:var(--pen-brown);
  font-weight:700 !important;box-shadow:1.5px 2.5px 0 rgba(58,36,21,.26)}
.calc-chip input:focus-visible + span{outline:3px dashed var(--pen-amber);outline-offset:3px}

/* ── результат ──────────────────────────────────────────────── */
.calc2 .calc-result{margin-top:1.4rem;padding:1.5rem 1.4rem;
  background:rgba(255,243,224,.85) !important;
  border:2.5px solid var(--pen-amber);
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px;
  box-shadow:2px 3px 0 rgba(58,36,21,.18)}
.calc2 .calc-price-range{flex-wrap:wrap;align-items:baseline;gap:.45rem}
.calc2 .calc-price-num{color:var(--pen-amber)}
.calc2 .calc-price-num.is-individual{font-size:clamp(26px,4vw,40px)}
.calc2 .calc-price-from{font-size:clamp(15px,1.8vw,18px);color:var(--pen-graphite);opacity:.75}
.calc-break{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;
  border-top:2px dashed rgba(217,112,0,.35)}
.calc-break li{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.22rem 0;font-size:clamp(15px,1.7vw,17px);
  color:var(--pen-graphite)}
.calc-break li b{white-space:nowrap;color:var(--pen-brown);font-weight:700 !important}
.calc2 .calc-savings{margin-top:.9rem;padding:.6rem .8rem;
  font-size:clamp(14px,1.6vw,16px);line-height:1.45;color:var(--pen-brown);
  background:rgba(255,255,255,.6);
  border:2px dashed rgba(111,123,58,.5);
  border-radius:225px 15px 255px 15px/15px 255px 15px 225px}
.calc-note{margin-top:.8rem;font-size:clamp(13px,1.5vw,15px);
  color:var(--pen-graphite);opacity:.68}
.calc2 .calc-hint{margin-top:.6rem}

/* ── узкие экраны (360 px) ──────────────────────────────────── */
@media (max-width:560px){
  .calc2{padding:1.15rem .85rem}
  .calc2 .calc-group{margin-bottom:1.45rem}
  .calc-slider{gap:.6rem}
  .calc-slider input[type=range]{flex:1 1 100%}
  .calc-num-box{width:100%;justify-content:flex-start}
  .calc-num-box input[type=number]{width:4.4rem}
  .calc-chip span{padding:.36rem .7rem;font-size:14.5px}
  .calc-switch{padding:.6rem .7rem;gap:.55rem}
  .calc2 .calc-result{padding:1.1rem .95rem}
  .calc-break li{flex-direction:column;gap:0;padding:.3rem 0}
  .calc-break li b{align-self:flex-start}
}
@media (max-width:380px){
  .calc-unit{width:100%;padding-left:2px}
  .calc2 .calc-label{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .calc-switch,.calc-chip span,.calc-step,.cs-box::after{transition:none}
}

/* МОБИЛЬНАЯ НАВИГАЦИЯ: на телефоне .nav-links целиком скрывался — вместе с ним
   пропадала и единственная ссылка на раздел статей. Оставляем её видимой в шапке
   и дублируем первым пунктом в бургер-меню. */
@media (max-width:900px){
  .nav-links{display:flex !important;gap:0}
  .nav-links a:not(.nav-articles){display:none}
  /* шапка на телефоне тесная: логотип + «Статьи» + кнопка расчёта + бургер.
     Держим ссылку компактной, иначе она наезжает на .nav-cta */
  /* правило `nav a,.nav-links a` из этого же файла специфичнее одиночного .nav-articles,
     поэтому целимся составным селектором, иначе размер не применится */
  .nav-links a.nav-articles{font-size:15px;padding:4px 9px 5px;margin-right:12px;white-space:nowrap}
}
@media (max-width:359px){
  .nav-links a.nav-articles{display:none}
}
.mm-articles{font-family:var(--pen-font,inherit);font-weight:700;color:#8b3a00 !important;
  background:#fff3e0;border-bottom:1px solid #efdcc6}

/* Ловушка для ботов: поле должно быть невидимым, но не display:none —
   часть спам-скриптов такие поля пропускает. */
.cf-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-error{background:#fdecea;border:1px solid #f5b5ad;color:#8a1c0d;border-radius:12px;
  padding:12px 16px;margin:12px 0 0;font-size:14px;line-height:1.5}