/* inAgentik cyan (189°) and violet (254°), with darker tones for readable text. */
.ia-article--colorful {
  --editorial-accent: hsl(189 72% 27%);
  --editorial-tint: hsl(189 72% 96%);
  --editorial-edge: hsl(var(--primary));
}
.ia-article--colorful[data-article-theme="violet"] {
  --editorial-accent: hsl(254 52% 40%);
  --editorial-tint: hsl(254 52% 96%);
  --editorial-edge: hsl(var(--accent));
}
.ia-article--colorful .ia-article__hero {
  background: radial-gradient(ellipse at 16% 25%, #26315b 0, transparent 65%), #06101f;
  border-bottom: 4px solid var(--editorial-edge);
}
.ia-article--colorful .ia-article__category {
  background: var(--editorial-tint);
  border-color: var(--editorial-edge);
  color: var(--editorial-accent);
}
.ia-article--colorful .ia-article__toc {
  padding: 20px;
  background: linear-gradient(145deg, var(--editorial-tint), #fff);
  border: 1px solid var(--editorial-edge);
  border-top: 4px solid var(--editorial-accent);
  border-radius: 14px;
}
.ia-article--colorful .ia-article__content > .ia-article__intro {
  padding: 22px 26px;
  border-left: 4px solid var(--editorial-accent);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(120deg, var(--editorial-tint), #f8fafc);
  color: #263b51;
}
.ia-article--colorful .ia-article__content > section > h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--editorial-accent), var(--editorial-edge));
}
.ia-article--colorful .ia-article__content > section:nth-of-type(3n + 2) {
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--editorial-tint), #f8fafc);
  border: 1px solid var(--editorial-edge);
  border-radius: 16px;
}
.ia-article--colorful .ia-article__content > section:nth-of-type(3n + 2) > h2 { margin-top: 0; }
.ia-article--colorful .ia-article__content li::marker { color: var(--editorial-accent); }
.ia-article--colorful .ia-article__content .article-inline-cta {
  display: grid;
  gap: 22px;
  margin: 36px 0;
  padding: 28px;
  border: 1px solid var(--editorial-edge);
  border-radius: 18px;
  background: linear-gradient(120deg, var(--editorial-tint), #f7fbff);
}
.ia-article--colorful .article-inline-cta__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--editorial-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ia-article--colorful .article-inline-cta h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; }
.ia-article--colorful .article-inline-cta p { margin: 0; color: #3f5266; font-size: 15px; line-height: 1.65; }
.ia-article--colorful .ia-article__content .article-inline-cta__button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--editorial-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  text-align: center;
}
.ia-article--colorful .ia-article__content .article-inline-cta--dark {
  background: radial-gradient(ellipse at top right, #344469, transparent 75%), #102436;
  border-color: #526687;
}
.ia-article--colorful .article-inline-cta--dark h3 { color: #fff; }
.ia-article--colorful .article-inline-cta--dark p { color: #d6e3ef; }
.ia-article--colorful .article-inline-cta--dark .article-inline-cta__eyebrow { color: hsl(var(--primary)); }
.ia-article--colorful .ia-article__content .article-inline-cta--dark .article-inline-cta__button { color: #102436; background: hsl(var(--primary)); }
.ia-article--colorful .ia-article__content .article-inline-cta__button:hover { text-decoration: underline; text-underline-offset: 4px; }
.ia-article--colorful .ia-article__content .article-inline-cta__button:focus-visible { outline: 3px solid hsl(189 72% 32%); outline-offset: 4px; }
.ia-article--colorful .ia-article__content .article-inline-cta--dark .article-inline-cta__button:focus-visible { outline-color: hsl(var(--primary)); }
.ia-article--colorful .ia-article__final-cta { border-top: 4px solid var(--editorial-edge); background: linear-gradient(120deg, #122d41, #272346); }
@media (max-width: 640px) {
  .ia-article--colorful .ia-article__content > .ia-article__intro,
  .ia-article--colorful .ia-article__content > section:nth-of-type(3n + 2),
  .ia-article--colorful .ia-article__content .article-inline-cta { padding: 20px; }
  .ia-article--colorful .article-inline-cta h3 { font-size: 22px; }
  .ia-article--colorful .ia-article__content .article-inline-cta__button { justify-self: stretch; }
}