.article-voucher-hero {
  max-width: 1240px;
}

.article-voucher-callout {
  padding: 24px;
  border-left: 4px solid var(--color-accent-light);
  border-radius: 0 16px 16px 0;
  background: rgba(183, 63, 252, 0.12);
}

.article-voucher-callout p {
  margin: 0;
  font-size: 19px;
}

.article-voucher-toc,
.article-voucher-cta,
.article-voucher-highlight {
  padding: 22px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.article-toc-inline {
  display: none;
}

.article-voucher-toc strong,
.article-voucher-cta strong,
.article-voucher-highlight strong {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-text);
}

.article-voucher-toc ul {
  padding-left: 0;
  list-style: none;
}

.article-voucher-toc li {
  padding-left: 18px;
  position: relative;
}

.article-voucher-toc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-light);
}

.article-voucher-toc a,
.article-body-content a {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.article-voucher-highlight {
  background-color: rgba(183, 63, 252, 0.1);
  border-color: rgba(183, 63, 252, 0.24);
}

.article-voucher-highlight p {
  margin: 0;
}

.article-voucher-checklist {
  padding: 22px !important;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(183, 63, 252, 0.2);
}

.article-voucher-checklist li::marker {
  color: var(--color-accent-light);
}

.article-voucher-cta {
  margin-top: 18px;
  background-color: rgba(183, 63, 252, 0.14);
  border-color: rgba(183, 63, 252, 0.32);
}

.article-voucher-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: var(--radius-link);
  background-color: var(--color-accent);
  color: var(--color-text-on-accent) !important;
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none !important;
}

.article-source-note {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.66) !important;
}

.article-cover-placeholder[aria-label="Voucher digitalizzazione Piemonte PMI 2026"] {
  background:
    linear-gradient(0deg, rgba(13, 13, 13, 0.12), rgba(13, 13, 13, 0.12)),
    url("/images/articles/voucher-digitalizzazione-piemonte-pmi-2026.jpg") center / cover no-repeat;
  border-color: rgba(183, 63, 252, 0.28);
}

.article-cover-placeholder[aria-label="Voucher digitalizzazione Piemonte PMI 2026"] svg {
  display: none;
}

@media (max-width: 1050px) {
  .article-toc-inline {
    display: block;
  }
}

@media (max-width: 700px) {
  .article-voucher-callout,
  .article-voucher-toc,
  .article-voucher-cta,
  .article-voucher-highlight,
  .article-voucher-checklist {
    padding: 18px !important;
  }
}