/* Shared editorial layout for the 40 illustrated Cynera articles. */
body.cy-article-page { background: #fff; }

.cy-article-page .s-hero,
.cy-article-page .blog-hero {
  background:
    radial-gradient(60% 90% at 100% 95%, #eaf3ff 0%, transparent 72%),
    radial-gradient(44% 80% at 0% 100%, #e8f2ff 0%, transparent 76%),
    linear-gradient(180deg, #f5f9ff 0%, #fff 100%) !important;
  border: 0;
  color: #0d1b4b;
  text-align: left;
  padding: 28px max(24px, calc((100vw - 1120px) / 2)) 28px;
  overflow: visible;
}
.cy-article-page .s-hero::before,
.cy-article-page .s-hero::after,
.cy-article-page .blog-hero::before,
.cy-article-page .blog-hero::after { content: none !important; }
.cy-article-page .s-hero > *,
.cy-article-page .blog-hero > * { position: relative; }
.cy-article-page .s-hero-emoji { display: none; }
.cy-article-page .cy-article-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  margin: 0 0 24px; color: #7583a0; font-size: 12px; line-height: 1.5;
}
.cy-article-page .cy-article-breadcrumb a { color: inherit; text-decoration: none; }
.cy-article-page .cy-article-breadcrumb a:hover { color: #2459d9; }
.cy-article-page .cy-article-breadcrumb .cy-crumb-current { color: #385477; }
.cy-article-page .s-hero-badge,
.cy-article-page .blog-cat-badge {
  display: inline-flex; align-items: center; width: fit-content;
  background: #eaf2ff; border: 1px solid #d6e4ff;
  color: #2459d9; border-radius: 100px; padding: 8px 14px;
  font-size: 11px; font-weight: 800; line-height: 1.2;
  letter-spacing: .09em; text-transform: uppercase; margin: 0 0 16px;
}
.cy-article-page .s-hero h1,
.cy-article-page .blog-hero h1 {
  color: #0d1b4b !important; max-width: 900px; margin: 0 0 14px;
  font-size: clamp(34px, 3.5vw, 52px); line-height: 1.12;
  letter-spacing: -.045em; font-weight: 800;
}
.cy-article-page .s-hero-sub,
.cy-article-page .cy-article-deck {
  color: #405574 !important; max-width: 760px; margin: 0 0 16px;
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55;
  font-weight: 400;
}
.cy-article-page .s-hero-meta,
.cy-article-page .blog-hero-meta {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  align-items: center; gap: 12px; max-width: 900px;
  margin: 8px 0 0; color: #677995;
}
.cy-article-page .s-hero-meta span,
.cy-article-page .blog-hero-meta-text { color: #677995 !important; font-size: 13px; }
.cy-article-page .blog-hero-author { gap: 10px; }
.cy-article-page .blog-hero-avatar { width: 34px; height: 34px; font-size: 11px; }
.cy-article-page .blog-hero-meta-text strong { color: #0d1b4b !important; }
.cy-article-page .blog-hero-cta { display: none !important; }
.cy-article-page .s-hero-actions { justify-content: flex-start; }
.cy-article-page .s-hero .btn-outline { color: #2459d9; border-color: #c9daf8; }
.cy-article-page .s-hero .cs-disclaimer {
  width: fit-content; max-width: 760px; margin: 18px 0 0;
  padding: 12px 16px; border: 1px solid #dce7f8;
  border-radius: 12px; background: #fff; text-align: left;
}
.cy-article-page .s-hero .cs-disclaimer p {
  margin: 0; max-width: none; color: #536680;
  font-size: 12px; line-height: 1.55;
}
.cy-article-page .s-hero .cs-disclaimer strong { color: #0d1b4b; }

.cy-article-cover {
  width: calc(100% - 48px); max-width: 1180px;
  height: clamp(420px, 43vw, 540px); margin: 0 auto 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(100deg, #5fa4f6 0%, #8dbefb 52%, #d8ecff 100%);
  box-shadow: 0 12px 34px rgba(13, 27, 75, .065);
}
.cy-article-cover img {
  display: block; flex: none; width: auto; height: 125%; max-width: none;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cy-article-layout {
  width: calc(100% - 48px); max-width: 1180px; margin: 0 auto 90px;
  display: flex; align-items: stretch; gap: clamp(32px, 5vw, 72px);
}
.cy-article-main { flex: 1 1 0; min-width: 0; max-width: 770px; order: 0; }
.cy-article-rail { flex: 0 0 285px; min-width: 0; order: 1; }
.cy-article-toc {
  position: sticky; top: 86px; max-height: calc(100vh - 106px);
  overflow: auto; background: #fff; border: 1px solid #e2eafd;
  border-radius: 18px; padding: 20px 20px 22px; scrollbar-width: thin;
  box-shadow: 0 8px 28px rgba(13, 27, 75, .045);
}
.cy-article-toc summary {
  cursor: pointer; list-style: none; color: #0d1b4b;
  font-size: 14px; font-weight: 800; line-height: 1.4;
}
.cy-article-toc summary::-webkit-details-marker { display: none; }
.cy-article-toc summary::after { content: '⌄'; float: right; color: #4268a8; }
.cy-article-toc[open] summary::after { content: '⌃'; }
.cy-article-toc ol { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: cy-section; }
.cy-article-toc li + li { margin-top: 9px; }
.cy-article-toc li:not(.cy-toc-sub) { counter-increment: cy-section; display: flex; align-items: baseline; gap: 8px; }
.cy-article-toc li:not(.cy-toc-sub)::before {
  content: counter(cy-section); flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%; background: #eaf2ff; color: #2459d9;
  text-align: center; font-size: 11px; font-weight: 800; line-height: 20px;
}
.cy-article-toc a {
  color: #50627f; text-decoration: none; font-size: 12.5px;
  line-height: 1.45; display: block; padding: 2px 0;
}
.cy-article-toc a:hover,
.cy-article-toc a:focus-visible { color: #2459d9; }
.cy-article-toc .cy-toc-sub a { padding-left: 28px; font-size: 12px; }
.cy-article-aside-cta,
.cy-article-related {
  margin-top: 18px; background: #fff; border: 1px solid #e6eaf2;
  border-radius: 18px; padding: 22px; box-shadow: 0 5px 20px rgba(13, 27, 75, .035);
}
.cy-article-aside-cta h2,
.cy-article-related h2,
.cy-article-related-title { color: #0d1b4b; font-size: 16px; line-height: 1.3; font-weight: 800; margin: 0 0 10px; }
.cy-article-aside-cta p { color: #586982; font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.cy-article-aside-cta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 42px; padding: 10px 14px;
  border-radius: 10px; background: #0d1b4b; color: #fff !important;
  text-decoration: none; font-size: 13px; font-weight: 700;
}
.cy-article-aside-cta a:hover { background: #2459d9; }
.cy-article-related-list { display: grid; gap: 12px; }
.cy-article-related-item,
.cy-article-page .blog-related-card {
  display: grid; grid-template-columns: 58px minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  color: #0d1b4b; text-decoration: none;
}
.cy-article-related-item + .cy-article-related-item,
.cy-article-page .blog-related-card + .blog-related-card { border-top: 1px solid #edf0f7; padding-top: 12px; }
.cy-article-related-item img,
.cy-article-page .blog-related-card > img {
  width: 58px; height: 58px; object-fit: cover;
  border-radius: 10px; grid-row: 1 / span 2;
}
.cy-article-related-item span,
.cy-article-page .blog-related-card-title { font-size: 12px; line-height: 1.45; font-weight: 700; color: #0d1b4b; }
.cy-article-related-item:hover span,
.cy-article-page .blog-related-card:hover .blog-related-card-title { color: #2459d9; }
.cy-article-page .blog-related { max-width: none; padding: 22px; }
.cy-article-page .blog-related-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cy-article-page .blog-related-card-cat,
.cy-article-page .blog-related-card-desc { display: none; }
.cy-article-page .blog-related-card-title { margin: 0; }

/* Existing editorial blocks remain intact; only their presentation changes. */
.cy-article-page .cy-article-main > .s-section,
.cy-article-page .cy-article-main > .s-faq,
.cy-article-page .cy-article-main > .s-metrics,
.cy-article-page .cy-article-main > .cs-disclaimer { margin: 0 0 44px; }
.cy-article-page .cy-article-main > .s-section,
.cy-article-page .cy-article-main > .s-faq { padding: 0; background: transparent !important; }
.cy-article-page .cy-article-main .s-inner,
.cy-article-page .cy-article-main .s-inner-narrow { width: 100%; max-width: none; margin: 0; padding: 0; }
.cy-article-page .cy-article-main > .s-metrics,
.cy-article-page .cy-article-main > .cs-disclaimer {
  border: 1px solid #e6eaf2; border-radius: 16px;
  padding: 24px; background: #f8fbff; text-align: left;
}
.cy-article-page .cy-article-main > .cs-disclaimer p { max-width: none; }
.cy-article-page .cy-article-main .s-title,
.cy-article-page .cy-article-main .blog-article h2 { scroll-margin-top: 105px; }
.cy-article-page .cy-article-main h2[id],
.cy-article-page .cy-article-main h3[id],
.cy-article-page .cy-article-main section[id] { scroll-margin-top: 105px; }
.cy-article-page .cy-article-main p,
.cy-article-page .cy-article-main li { overflow-wrap: anywhere; }
.cy-article-page .cy-article-main img,
.cy-article-page .cy-article-main video,
.cy-article-page .cy-article-main iframe { max-width: 100%; height: auto; }
.cy-article-page .cy-article-main table { max-width: 100%; }
.cy-article-page .cy-article-main .vs-table-wrap,
.cy-article-page .cy-article-main .cs-table-wrap,
.cy-article-page .cy-article-main .g-table-wrap,
.cy-article-page .cy-article-main .table-wrap { max-width: 100%; overflow-x: auto; }
.cy-article-page .cy-article-main .s-cards,
.cy-article-page .cy-article-main .vs-head-grid { max-width: 100%; }
.cy-article-page .blog-article.cy-article-main { max-width: none; margin: 0; padding: 0; }
.cy-article-page .blog-article.cy-article-main p { max-width: 72ch; }

/* The service-page FAQ was designed as a dark standalone band. Inside an
   editorial column it needs its own light and dark surfaces. */
.cy-article-page .cy-article-main .s-faq { background: transparent !important; }
.cy-article-page .cy-article-main .s-faq .s-title { color: #0d1b4b !important; }
.cy-article-page .cy-article-main .s-faq .s-eyebrow { color: #2459d9; }
.cy-article-page .cy-article-main .faq-item {
  background: #f7faff; border-color: #dfe8f8;
}
.cy-article-page .cy-article-main .faq-item.open { border-color: #93b5f4; }
.cy-article-page .cy-article-main .faq-q { color: #17264a !important; }
.cy-article-page .cy-article-main .faq-a p { color: #4c5f7d; }
.cy-article-page .s-cta {
  background: #f3f7ff !important; color: #0d1b4b;
  border-block: 1px solid #e3eaf8; padding: 58px 24px;
}
.cy-article-page .s-cta::after { content: none !important; }
.cy-article-page .s-cta h2 { color: #0d1b4b !important; }
.cy-article-page .s-cta p,
.cy-article-page .s-cta-checks span { color: #405574 !important; }
.cy-article-page .s-cta .btn-white { background: #0d1b4b; color: #fff !important; }

html[data-theme="dark"] body.cy-article-page { background: #17172c; }
html[data-theme="dark"] body.cy-article-page .s-hero,
html[data-theme="dark"] body.cy-article-page .blog-hero {
  background: linear-gradient(180deg, #202848 0%, #17172c 100%) !important;
}
html[data-theme="dark"] body.cy-article-page .s-hero h1,
html[data-theme="dark"] body.cy-article-page .blog-hero h1 { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .s-hero-sub,
html[data-theme="dark"] body.cy-article-page .cy-article-deck,
html[data-theme="dark"] body.cy-article-page .s-hero-meta span,
html[data-theme="dark"] body.cy-article-page .blog-hero-meta-text { color: #c3cee2 !important; }
html[data-theme="dark"] body.cy-article-page .blog-hero-meta-text strong { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .cy-article-breadcrumb,
html[data-theme="dark"] body.cy-article-page .cy-crumb-current { color: #a9b8d4; }
html[data-theme="dark"] body.cy-article-page .cy-article-toc,
html[data-theme="dark"] body.cy-article-page .cy-article-aside-cta,
html[data-theme="dark"] body.cy-article-page .cy-article-related,
html[data-theme="dark"] body.cy-article-page .s-hero .cs-disclaimer {
  background: #242a46; border-color: #35405f;
}
html[data-theme="dark"] body.cy-article-page .s-hero .cs-disclaimer p { color: #c3cee2; }
html[data-theme="dark"] body.cy-article-page .s-hero .cs-disclaimer strong { color: #f3f6ff; }
html[data-theme="dark"] body.cy-article-page .cy-article-toc summary,
html[data-theme="dark"] body.cy-article-page .cy-article-aside-cta h2,
html[data-theme="dark"] body.cy-article-page .cy-article-related h2,
html[data-theme="dark"] body.cy-article-page .cy-article-related-item span,
html[data-theme="dark"] body.cy-article-page .blog-related-card-title { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .cy-article-toc a,
html[data-theme="dark"] body.cy-article-page .cy-article-aside-cta p { color: #b9c5db; }
html[data-theme="dark"] body.cy-article-page .cy-article-main > .s-metrics,
html[data-theme="dark"] body.cy-article-page .cy-article-main > .cs-disclaimer {
  background: #242a46; border-color: #35405f;
}
html[data-theme="dark"] body.cy-article-page .cy-article-main > .s-section,
html[data-theme="dark"] body.cy-article-page .cy-article-main > .s-faq { background: transparent !important; }
html[data-theme="dark"] body.cy-article-page .cy-article-main .s-faq .s-title { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .cy-article-main .s-faq .s-eyebrow { color: #9db8fb; }
html[data-theme="dark"] body.cy-article-page .cy-article-main .faq-item {
  background: #242a46; border-color: #35405f;
}
html[data-theme="dark"] body.cy-article-page .cy-article-main .faq-item.open { border-color: #648ee2; }
html[data-theme="dark"] body.cy-article-page .cy-article-main .faq-q { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .cy-article-main .faq-a p { color: #c3cee2; }
html[data-theme="dark"] body.cy-article-page .s-cta {
  background: #202848 !important; border-color: #35405f;
}
html[data-theme="dark"] body.cy-article-page .s-cta h2 { color: #f3f6ff !important; }
html[data-theme="dark"] body.cy-article-page .s-cta p,
html[data-theme="dark"] body.cy-article-page .s-cta-checks span { color: #c3cee2 !important; }

@media (max-width: 900px) {
  .cy-article-layout { gap: 32px; }
  .cy-article-rail { flex-basis: 245px; }
}
@media (max-width: 760px) {
  .cy-article-page .s-hero,
  .cy-article-page .blog-hero { padding: 28px 22px 24px; }
  .cy-article-page .cy-article-breadcrumb { margin-bottom: 24px; }
  .cy-article-page .s-hero h1,
  .cy-article-page .blog-hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .cy-article-cover {
    width: calc(100% - 24px); height: auto; aspect-ratio: 1;
    border-radius: 18px; margin-bottom: 36px;
  }
  .cy-article-cover img {
    width: 100%; height: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .cy-article-layout { width: calc(100% - 36px); display: flex; flex-direction: column; gap: 0; margin-bottom: 56px; }
  .cy-article-rail { display: contents; }
  .cy-article-toc { order: 0; position: static; max-height: none; overflow: visible; margin-bottom: 36px; padding: 17px 18px; }
  .cy-article-main { order: 1; max-width: none; width: 100%; }
  .cy-article-aside-cta { order: 2; margin-top: 8px; }
  .cy-article-related { order: 3; margin-top: 18px; }
  .cy-article-page .cy-article-main .s-cards { grid-template-columns: minmax(0, 1fr); }
  .cy-article-page .cy-article-main .vs-head-grid { overflow-x: auto; }
}