/* Article layout, offerings and platform pages. */

.cat-page .page-intro{max-width:760px;margin-bottom:36px}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cat-card{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  background:var(--surface,#fff);border:1px solid var(--line,#E6E1D8);
  border-radius:16px;padding:20px;
}
.cat-card h3{margin:0;font-size:18px}
.cat-card p{margin:0;color:var(--ink-2,#4A4642)}
.cat-card .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0A7B77}
.pillar-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0 8px}
.pillar{background:var(--teal-wash,#E1F5F3);border-radius:14px;padding:16px}
.pillar strong{display:block;margin-bottom:6px}
@media(max-width:900px){
  .cat-grid,.pillar-row{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .cat-grid,.pillar-row{grid-template-columns:1fr}
}

.blogDetails_Section .wrap{max-width:1120px}
.article-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:16px}
.article-pill{
  display:inline-flex;align-items:center;border-radius:999px;
  background:#E1F5F3;color:#053F3D;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;
}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0 0;color:#7C766E;font-size:14px}
.article-meta span+span::before{content:"·";margin-right:14px;color:#C8C2B8}
.article-hero{
  width:100%;height:auto;max-height:none;object-fit:contain;
  border-radius:18px;margin:22px 0 8px;background:#E6E1D8;
}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start;margin-top:28px}
.article-layout .blogContent{min-width:0;font-size:17px;line-height:1.75;color:#2A2724}
.article-layout .blogContent > p:first-of-type{
  margin-top:0;padding-left:16px;border-left:4px solid #00BAB2;
  color:#5C564E;font-style:italic;
}
.article-layout .blogContent h2,
.article-layout .blogContent .article-heading{
  margin:32px 0 12px;font-size:28px;line-height:1.25;font-weight:700;scroll-margin-top:96px;font-style:normal;
}
.article-layout .blogContent .article-heading strong{font-weight:700}
.article-layout .blogContent p,.article-layout .blogContent li{margin:0 0 14px}
.article-layout .blogContent a{color:#0A7B77}
.article-layout .blogContent table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px}
.article-layout .blogContent th,.article-layout .blogContent td{border:1px solid #E6E1D8;padding:10px 12px;text-align:left;vertical-align:top}
.article-layout .blogContent th{background:#04211F;color:#EAF4F2}
.article-toc{
  position:sticky;top:96px;border:1px solid var(--line,#E6E1D8);
  border-radius:16px;padding:18px;background:var(--surface,#fff);
}
.article-toc p{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7C766E}
.article-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:toc}
.article-toc li{counter-increment:toc}
.article-toc a{color:inherit;text-decoration:none;font-size:14px;line-height:1.4}
.article-toc a:hover,.article-toc a.is-on{color:#0A7B77}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:#7C766E;margin-bottom:14px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:#0A7B77}
.BackBlog{display:none}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr;gap:24px}
  .article-toc{position:static;order:-1}
}

/* Article pages in dark mode: the article styles above use fixed light-mode
   colours. Repeated for the OS setting and the theme switch (data-theme). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .article-layout .blogContent{color:#D9D3CA}
  :root:not([data-theme="light"]) .article-layout .blogContent :is(h2,h3,h4,strong){color:#F4F1EC}
  :root:not([data-theme="light"]) .article-layout .blogContent > p:first-of-type{color:#A59E94}
  :root:not([data-theme="light"]) .article-layout .blogContent a,
  :root:not([data-theme="light"]) .article-toc a:hover,:root:not([data-theme="light"]) .article-toc a.is-on,
  :root:not([data-theme="light"]) .crumbs a:hover{color:#2FD8D0}
  :root:not([data-theme="light"]) .article-layout .blogContent :is(th,td){border-color:#302C26}
  :root:not([data-theme="light"]) .article-hero{background:#1A1815}
  :root:not([data-theme="light"]) :is(.article-meta,.article-toc p,.crumbs){color:#A59E94}
}
:root[data-theme="dark"] .article-layout .blogContent{color:#D9D3CA}
:root[data-theme="dark"] .article-layout .blogContent :is(h2,h3,h4,strong){color:#F4F1EC}
:root[data-theme="dark"] .article-layout .blogContent > p:first-of-type{color:#A59E94}
:root[data-theme="dark"] .article-layout .blogContent a,
:root[data-theme="dark"] .article-toc a:hover,:root[data-theme="dark"] .article-toc a.is-on,
:root[data-theme="dark"] .crumbs a:hover{color:#2FD8D0}
:root[data-theme="dark"] .article-layout .blogContent :is(th,td){border-color:#302C26}
:root[data-theme="dark"] .article-hero{background:#1A1815}
:root[data-theme="dark"] :is(.article-meta,.article-toc p,.crumbs){color:#A59E94}