/* =========================================================
   Variant A — добавочные компоненты поверх tokens/components/layout.
   Загружается ПОСЛЕ layout.css и ПЕРЕД style.css.
   ========================================================= */

/* ---------- Topbar (date + rates + NDS CTA) ---------- */
.topbar{
  background: #0a3f32;                    /* --color-primary-700, чуть темнее darkheader */
  color: #c1d5cc;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.topbar__inner{
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  min-height: 36px;
}
.topbar__date{
  display: inline-flex; align-items: center; gap: 6px;
  color: #9fc4b6; font-weight: 500;
}
.topbar__divider{ color: rgba(255,255,255,.2); }
.topbar__rates{
  display: inline-flex; align-items: center; gap: 12px;
}
.topbar__rate{
  display: inline-flex; align-items: baseline; gap: 3px;
  color: #c1d5cc;
}
.topbar__rate-sym{
  color: var(--color-accent); font-weight: 600; font-size: 13px;
}
.topbar__rate-val{
  color: #fff; font-weight: 600; font-family: var(--font-mono);
}
.topbar__rate-source{
  margin-left: 2px; padding: 1px 6px;
  background: rgba(180,95,6,.18);
  color: #e8b285;
  border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.topbar__cta{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 13px;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600; font-size: 12px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.topbar__cta:hover{
  background: var(--color-accent-600);
  transform: translateY(-1px);
}
.topbar__cta-badge{
  padding: 1px 6px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 9px; letter-spacing: .06em; font-weight: 700;
}
@media (max-width: 720px){
  .topbar__inner{ gap: 10px; padding: 7px 14px; flex-wrap: wrap; }
  .topbar__rate-source{ display: none; }
  .topbar__cta-label{ display: none; }
  .topbar__cta{ padding: 5px 10px; }
  .topbar__cta::before{ content: 'НДС 22%'; font-size: 11px; }
}
@media (max-width: 420px){
  .topbar__divider{ display: none; }
  .topbar__rates{ gap: 8px; }
}

/* ---------- Dark hero header ---------- */
.darkheader{
  background: var(--color-primary-700);
  color: #eaf2ee;
  padding: 28px 0 32px;
  margin: 0;
}
.darkheader .wrap{ max-width: 1200px; }
.darkheader .eyebrow-row{
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: #c1d5cc; font-weight: 600; margin-bottom: 14px;
}
.darkheader .eyebrow-row .mark-forest{
  background: var(--color-accent); width: 26px; height: 26px;
}
.darkheader .eyebrow-row .sep{ color: rgba(255,255,255,.25); }
.darkheader h1{
  font-size: 36px; font-weight: 600; letter-spacing: -.022em;
  line-height: 1.15; margin: 0 0 10px; color: #fff; max-width: 860px;
}
.darkheader .lede-light{
  font-size: 15px; color: #9fc4b6; max-width: 720px; line-height: 1.55; margin: 0;
}
.darkheader .meta-pills{
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;
}
.meta-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 12px; color: #c1d5cc;
}
.meta-pill b{ color: #fff; font-weight: 600; }

@media (max-width: 768px){
  .darkheader{ margin: 0; border-radius: 0; padding: 16px 0 12px; }
  .darkheader h1{ font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
  .darkheader .lede-light{ display: none; }
  .darkheader .meta-pills{ display: none; }
  .breadcrumbs{ padding: 6px 0; font-size: 12px; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  background: var(--color-bg);
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--color-line-2);
}
.breadcrumbs ol{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; padding: 0; margin: 0;
  font-size: 13px; color: var(--color-text-muted);
}
.breadcrumbs li{ display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before{
  content: '›'; color: var(--color-text-faint); margin-right: 0;
}
.breadcrumbs a{
  color: var(--color-text-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.breadcrumbs a:hover{ color: var(--color-text); }
.breadcrumbs li[aria-current="page"]{ color: var(--color-text); font-weight: 500; }
.breadcrumbs .home-ico{
  width: 14px; height: 14px; color: var(--color-text-faint);
}

/* ---------- Card header (ВАШИ ПАРАМЕТРЫ + шагомер) ---------- */
.card-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0; margin-bottom: 6px;
}
.card-head .eb{
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-text-muted); font-weight: 600;
}
.step-dots{ display: flex; gap: 7px; }
.step-dots span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-line);
}
.step-dots span.filled{ background: var(--color-primary); }

.card > .form{ padding: 6px 20px 20px; }

/* ---------- Hero tweaks ---------- */
.hero-badge-row{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.hero-badge-row .sub{
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-text-muted); font-weight: 600;
}
.hero-stamp{
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-text-faint); letter-spacing: .02em;
  margin-left: auto;
}
.hero-actions{ flex-wrap: wrap; }
.hero-actions .hero-stamp{ align-self: center; }

/* ---------- Bar-chart «Итого к уплате — визуально» ---------- */
.bars{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: 20px 24px 22px;
  box-shadow: var(--sh-1);
  margin-top: 16px;
}
.bars-head{
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-text-muted); font-weight: 600; margin-bottom: 14px;
}
.bar-row{
  display: grid;
  grid-template-columns: 120px 1fr 110px;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
}
.bar-row .bl{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-text-2); font-weight: 500;
}
.bar-row .bl .modedot{ width: 8px; height: 8px; border-radius: 2px; }
.bar-row .bt{
  position: relative; height: 10px;
  background: var(--color-surface-2);
  border-radius: 999px; overflow: hidden;
}
.bar-row .bt .fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--bar-color, var(--color-primary));
}
.bar-row.unavailable .bt .fill{
  background: repeating-linear-gradient(
    90deg,
    var(--color-line) 0 6px,
    var(--color-line-2) 6px 12px
  );
  width: 100% !important;
  opacity: .5;
}
.bar-row.unavailable .bl,
.bar-row.unavailable .br{ color: var(--color-text-faint); }
.bar-row .br{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--color-text); font-weight: 500;
  text-align: right;
}
.bar-row.unavailable .br{ font-family: var(--font-sans); font-size: 12px; font-weight: 500; }

@media (max-width: 768px){
  .bar-row{ grid-template-columns: 90px 1fr 90px; gap: 10px; }
  .bar-row .bl{ font-size: 12px; }
  .bar-row .br{ font-size: 12px; }
}

/* ---------- Meta note под compare ---------- */
.meta-note{
  margin-top: 18px;
  font-size: 12px; color: var(--color-text-muted); line-height: 1.55;
}
.meta-note a{ color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary-100); text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Next steps — «Что делать дальше» (партнёрские слоты + ФНС)
   ═══════════════════════════════════════════════════════════════ */
.next-steps{ margin-top: 32px; }
.next-steps__head{ margin-bottom: 18px; }
.next-steps__head h2{
  font-size: 22px; font-weight: 600; letter-spacing: -.015em;
  margin: 0 0 6px; color: var(--color-text);
}
.next-steps__sub{
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-2);
}
.next-steps__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 860px){ .next-steps__grid{ grid-template-columns: 1fr; } }

.step-card{
  display: grid; grid-template-columns: 44px 1fr; gap: 14px;
  padding: 16px 16px 18px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-surface);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.step-card--action{ cursor: pointer; }
.step-card--action:hover{
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(15,92,74,.45);
}
.step-card--slot{
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(15,92,74,.025) 10px 20px),
    var(--color-surface-2);
  border-style: dashed;
}
.step-card__icon{
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-100);
  color: var(--color-primary);
  flex-shrink: 0;
}
.step-card--slot .step-card__icon{
  background: transparent;
  border: 1px dashed var(--color-line);
  color: var(--color-text-muted);
}
.step-card__body{ min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.step-card__kicker{
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-primary); font-weight: 600;
}
.step-card__kicker--slot{ color: var(--color-text-muted); }
.step-card__title{
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--color-text);
}
.step-card__text{
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--color-text-2);
}
.step-card__text a{
  color: var(--color-primary); text-decoration: underline;
  text-decoration-color: var(--color-primary-100); text-underline-offset: 2px;
}
.step-card__link{
  margin-top: auto; padding-top: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--color-primary);
}
.step-card__link--muted{ color: var(--color-text-faint); font-weight: 500; }

.next-steps__note{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 0 0;
  font-size: 11.5px; color: var(--color-text-faint);
}

/* ---------- Reminder (PWA-напоминания о дедлайнах) ---------- */
.reminder{
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-surface-2);
}
.reminder__head{ margin-bottom: 14px; }
.reminder__head h2{
  margin: 0 0 6px;
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.reminder__sub{
  margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--color-text-muted);
}
.reminder-btn{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.reminder-btn:hover:not(:disabled){
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.reminder-btn:disabled{ cursor: not-allowed; opacity: .65; }
.reminder-btn__icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15, 92, 74, .08);
  color: var(--color-primary);
}
.reminder-btn[data-state="on"] .reminder-btn__icon{
  background: var(--color-primary);
  color: #fff;
}
.reminder-btn[data-state="denied"] .reminder-btn__icon,
.reminder-btn[data-state="unsupported"] .reminder-btn__icon{
  background: rgba(148, 148, 148, .15);
  color: var(--color-text-faint);
}
.reminder-btn__text{ display: grid; gap: 2px; min-width: 0; }
.reminder-btn__label{
  font-size: 14px; font-weight: 600; color: var(--color-text);
}
.reminder-btn[data-state="on"] .reminder-btn__label{ color: var(--color-primary); }
.reminder-btn__hint{
  font-size: 12px; color: var(--color-text-muted);
}
.reminder__privacy{
  margin: 12px 2px 0;
  font-size: 11.5px; line-height: 1.5;
  color: var(--color-text-faint);
}

/* ---------- FAQ: simpler heading to match screenshot ---------- */
.faq-simple{ margin-top: 40px; }
.faq-simple > h2{
  font-size: 24px; font-weight: 600; letter-spacing: -.015em;
  margin: 0 0 20px;
}

/* FAQ rich row stroke to match screenshot (closed rows get light border only) */
.faq-item-rich{ border-radius: 10px; }
.faq-item-rich .q-wrap{ grid-template-columns: 1fr 22px; padding: 14px 18px; }
.faq-item-rich .q-num{ display: none; }
.faq-item-rich .a{ padding: 12px 18px 16px; }

/* ---------- Footer v2 (4 cols + NEW badge + RSS/YT) ---------- */
.footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h5{ color: #7fc08a; }

.footer-social a.social-pill{
  width: auto; height: 30px; padding: 0 12px;
  border-radius: 8px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase;
}

.badge-new{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px; border-radius: 4px;
  background: var(--color-accent);
  color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ---------- Cookie banner tweak (title wording) ---------- */
/* handled via markup */

/* ---------- Hide darkheader version of lightheader when dark is used ---------- */
body[data-header="dark"] > header.lightheader{ display: none; }

/* ---------- Fix: compact grid overflow ---------- */
/* number inputs have intrinsic min-content width that blows out 1fr 1fr grid */
.field.compact{ min-width: 0; }
.field.compact > .subfield{ min-width: 0; }
.field.compact .input{ min-width: 0; }
.field.compact .input input{ min-width: 0; width: 100%; }

/* ---------- Fix: slider thumb overflow on min ---------- */
/* было: left: calc(X% - 8px) → при X=0 = -8px (thumb вылезает слева) */
/* решение: позиционировать через translate, clamp'им край */
.slider{ position: relative; }
.slider .thumb{
  transform: translateX(-50%);
  margin-left: 0;
}

/* Нативный <input type="range"> лежит поверх кастомного track/fill/thumb
   чтобы принимать клики/свайпы. Браузерный прогресс-бар рисовался фиолетовым
   (системный accent). Прячем визуально, оставляя интерактивность. */
.slider .slider-native{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.slider .slider-native:focus-visible{
  opacity: 0.001;
  outline: none;
}
.slider .slider-native::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
}
.slider .slider-native::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
}

/* ---------- Form card: match эталон ---------- */
/* ⓘ-иконки в форме отключаем (оставляем только labels) */
.card .form .tooltip-trigger{ display: none; }
.card .form .tooltip-wrap{ gap: 0; }

/* hint справа — нейтральный серый, моно-шрифт */
.card .form .hint{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-faint);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Dimmed поле (НДС до превышения порога) */
.field-dim{ opacity: .55; }
.field-dim input[disabled]{
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  cursor: not-allowed;
}

/* Footer формы */
.form-foot{
  margin: 16px 20px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line-2);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.form-foot a{
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-100);
  text-underline-offset: 2px;
}

/* ---------- Fix: cookie banner bulletproof ---------- */
/* Показываем блоком ТОЛЬКО когда hidden снят — иначе [hidden] из HTML будет перекрыт */
.cookie-banner:not([hidden]){
  display: block;
  max-width: 360px;
  width: calc(100vw - 40px);
}
.cookie-banner[hidden]{ display: none !important; }
.cookie-banner .actions{ display: flex; }
@media (max-width: 768px){
  .cookie-banner:not([hidden]){ width: auto; }
}

/* ---------- Longread (static + landing pages) ---------- */
.longread{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 48px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}
.longread h2{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 36px 0 14px;
  color: var(--color-text);
}
.longread h3{
  font-size: 19px;
  font-weight: 600;
  margin: 28px 0 10px;
}
.longread p{ margin: 0 0 14px; }
.longread ul, .longread ol{ margin: 0 0 16px; padding-left: 22px; }
.longread li{ margin-bottom: 6px; }
.longread a{
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-100);
  text-underline-offset: 2px;
}
.longread a:hover{ text-decoration-color: var(--color-primary); }
.longread strong{ font-weight: 600; }
.longread code{
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.longread blockquote{
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 16px;
  margin: 16px 0;
  color: var(--color-text-2);
}

/* ---------- Longread tables ---------- */
.longread table{
  width: 100%;
  margin: 18px 0 22px;
  border-collapse: collapse;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  box-shadow: var(--sh-1);
  table-layout: auto;
}
.longread thead th{
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
}
.longread tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line-2);
  vertical-align: top;
  color: var(--color-text);
}
.longread tbody tr:last-child td{ border-bottom: 0; }
.longread tbody tr:nth-child(even) td{ background: rgba(15, 92, 74, .015); }
.longread tbody td:first-child,
.longread thead th:first-child{
  font-weight: 500;
  color: var(--color-text);
  width: 30%;
}
.longread thead th:not(:first-child),
.longread tbody td:not(:first-child){
  text-align: left;
  font-variant-numeric: tabular-nums;
}
/* Числовые таблицы (много колонок цифр) — правое выравнивание */
.longread table.numeric thead th:not(:first-child),
.longread table.numeric tbody td:not(:first-child){
  text-align: right;
  white-space: nowrap;
}
.longread table strong{ font-weight: 600; color: var(--color-primary); }
@media (max-width: 720px){
  .longread table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  .longread thead th,
  .longread tbody td{ padding: 8px 10px; }
  .longread tbody td:first-child,
  .longread thead th:first-child{ width: auto; }
}

/* ---------- Landing CTA (SEO-страницы) ---------- */
.landing-cta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin: 28px auto;
  max-width: 760px;
  box-shadow: var(--sh-1);
}
.landing-cta__body{ flex: 1 1 280px; }
.landing-cta__body strong{ display: block; font-size: 17px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.landing-cta__body p{ font-size: 14px; color: var(--color-text-muted); margin: 0; }
.landing-cta--bottom{ margin-bottom: 48px; background: var(--color-primary-50, #f0f7f4); }

/* ---------- Related block ---------- */
.related-block{
  max-width: 760px; margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-line-2);
}
.related-block h2{ font-size: 22px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 16px; }
.related-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.related-list a{
  display: block;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 15px;
  transition: border-color .15s, background .15s;
}
.related-list a:hover{
  border-color: var(--color-primary);
  background: var(--color-primary-50, #f0f7f4);
}

/* ---------- Breadcrumbs внутри lightheader (на landing/static) ---------- */
.lightheader .breadcrumbs{
  background: transparent;
  padding: 10px 0 0;
  border: 0;
}
.lightheader .breadcrumbs ol{ font-size: 12px; color: var(--color-text-muted); }

/* ---------- SEO text block (главная) ---------- */
.seo-content{
  max-width: 760px;
  margin: 48px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-2);
}
.seo-content h2{
  font-size: 22px; font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 16px;
  color: var(--color-text);
}
.seo-content p{ margin: 0 0 12px; }
.seo-content a{
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-100);
}

/* ---------- Articles hub page (/articles/) ---------- */
.articles-group {
  margin-top: 40px;
}
.articles-group__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--color-text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
}
.articles-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
  opacity: .75;
}