/* InsightClickIQ site: brand tokens, shared page components, blog and docs styles.
   Loaded after verticle-serve.css and style.css, so the tokens below re-tint the shared components. */

/* ---- from blog.html ---- */
.blog-list-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:8px; }
        .blog-section__title { font-size:24px; font-weight:800; letter-spacing:-.015em; margin:58px 0 4px; color:#0b1020; }
        .blog-section__title:first-of-type { margin-top:22px; }
        .blog-section__desc { font-size:14px; line-height:1.55; color:#5b6472; margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid rgba(2,6,23,.09); max-width:760px; }
        .blog-section__title { scroll-margin-top:172px; }
        .blog-jump { position:sticky; top:72px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; padding:12px 2px; margin:0 0 6px; background:rgba(255,255,255,.9); backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid rgba(2,6,23,.08); }
        .blog-jump a { cursor:pointer; font-size:13px; font-weight:600; color:#3a4256; text-decoration:none; padding:7px 15px; border-radius:999px; border:1px solid rgba(2,6,23,.10); background:#fff; transition:all .15s ease; white-space:nowrap; }
        .blog-jump a:hover { border-color:#2563eb; color:#1d4ed8; }
        .blog-jump a.is-active { background:linear-gradient(90deg,#2563eb,#14b8a6); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(37,99,235,.25); }
        @media (max-width:640px){ .blog-jump{ overflow-x:auto; flex-wrap:nowrap; } }
        .post-card { background:#fff; border:1px solid #e6e8f5; border-radius:16px; overflow:hidden;
            display:flex; flex-direction:column; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;
            box-shadow:0 10px 30px -22px rgba(30,27,75,0.5); }
        .post-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px -24px rgba(30,27,75,0.55); }
        .post-card__img { aspect-ratio:16/9; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#0d9488); border-bottom:1px solid #eef0fa; }
        .post-card__img i { font-size:46px; color:rgba(255,255,255,.92); }
        .post-card:nth-of-type(3n) .post-card__img { background:linear-gradient(135deg,#1d4ed8,#14b8a6); }
        .post-card:nth-of-type(3n+1) .post-card__img { background:linear-gradient(135deg,#0ea5e9,#60a5fa); }
        .post-card__img img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
        .post-card__body { padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
        .post-card__tag { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
            padding:4px 10px; border-radius:20px; background:rgba(37,99,235,.12); color:#1d4ed8; margin-bottom:12px; }
        .post-card__title { font-size:19px; line-height:1.35; color:#1e1b4b; margin:0 0 10px; font-weight:700; }
        .post-card__excerpt { font-size:14.5px; color:#5b6486; line-height:1.6; margin:0 0 16px; flex:1; }
        .post-card__meta { font-size:12.5px; color:#8a90ac; display:flex; align-items:center; gap:8px; }
        .post-card__more { margin-top:14px; font-size:14px; font-weight:600; color:#1d4ed8; }
        .post-card__more i { transition:transform .18s ease; }
        .post-card:hover .post-card__more i { transform:translateX(4px); }
        @media (max-width: 991px){ .blog-list-grid{ grid-template-columns:repeat(2,1fr);} }
        @media (max-width: 640px){ .blog-list-grid{ grid-template-columns:1fr;} }

/* ---- from blog-clickable-citations.html ---- */
.blog-hero .ai-hero__eyebrow { margin-bottom: 18px; }
        .blog-meta { color:#6b7396; font-size:14px; margin-top:14px; }
        .blog-meta strong { color:#3b3f5c; }
        .article-body { max-width: 880px; margin: 0 auto; }
        .article-body h2 { font-size: 27px; margin: 38px 0 6px; color:#1e1b4b; }
        .article-body h3 { font-size:19px; margin: 30px 0 8px; color:#2b2a4a; }
        .article-body p { color:#4a4f6b; font-size:16.5px; line-height:1.75; margin-bottom:16px; }
        .article-body ul,.article-body ol { color:#4a4f6b; font-size:16.5px; line-height:1.7; margin:0 0 18px 20px; }
        .article-body li { margin-bottom:8px; }
        .lead-para { font-size:19px !important; color:#2b2a4a !important; line-height:1.7 !important; }
        .cat-note { color:#6b7396; font-size:14.5px; margin:2px 0 12px !important; }
        .callout { background:#f8f9ff; border:1px solid #e6e8f5; border-left:4px solid #2563eb; border-radius:12px; padding:20px 22px; margin:24px 0; }
        .callout h4 { margin:0 0 8px; font-size:16px; color:#1e1b4b; }
        .callout p { margin:0; font-size:15px; color:#4a4f6b; }
        .callout.next { border-left-color:#22c1a4; }
        .ec-table { width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:14.5px; }
        .ec-table th,.ec-table td { text-align:left; padding:11px 14px; border-bottom:1px solid #e6e8f5; color:#4a4f6b; vertical-align:top; }
        .ec-table th { background:#f4f6ff; color:#1e1b4b; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
        .ec-table td.p { color:#1e1b4b; font-weight:600; }
        .ec-table code { background:#eef1fb; color:#3f3d7a; padding:1px 6px; border-radius:5px; font-size:12.5px; }
        /* step cards */
        .steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 6px; }
        @media(max-width:720px){ .steps4{ grid-template-columns:1fr 1fr; } }
        .st { border:1px solid #e6e8f5; border-radius:13px; padding:15px 14px; background:#fff; }
        .st .ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; margin-bottom:9px; }
        .st b { display:block; color:#1e1b4b; font-size:14px; margin-bottom:4px; }
        .st span { font-size:12.5px; color:#6b7396; line-height:1.45; }
        .st code { background:#eef1fb; color:#3f3d7a; padding:0 4px; border-radius:4px; font-size:11.5px; }
        .xform { font-family:ui-monospace,Menlo,monospace; font-size:13px; }
        .xform .a { color:#c0334d; } .xform .b { color:#0b7d6f; font-weight:700; } .xform .arr { color:#8a90ad; padding:0 6px; }
        .json-box { background:#1a1d33; color:#dfe3f5; border-radius:12px; padding:20px 22px; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.62; overflow-x:auto; margin:18px 0; }
        .json-box .k { color:#8fb4ff; } .json-box .s { color:#a5e6b0; } .json-box .n { color:#f5c06b; } .json-box .c { color:#7f88a8; }
        figure.shot { margin: 26px 0 30px; }
        figure.shot img { width:100%; border-radius:14px; border:1px solid #e6e8f5; box-shadow: 0 18px 50px -20px rgba(30,27,75,0.35); display:block; }
        figure.shot figcaption { text-align:center; color:#7a819f; font-size:13.5px; margin-top:12px; font-style:italic; }
        .article-body .mermaid { text-align:center; margin:26px 0 30px; }
        mark { background:rgba(188,124,31,.20); color:inherit; border-radius:3px; padding:0 3px; }
/* code samples keep their line breaks */
.article-body .json-box{ white-space:pre-wrap; }

/* =====================================================================
   InsightClickIQ brand: electric blue to teal, dark hero kept
   ===================================================================== */
:root{
    --vs-violet:#2563eb; --vs-violet-deep:#1d4ed8; --vs-cyan:#2dd4bf;
    --vs-grad:linear-gradient(135deg,#2563eb 0%,#0ea5e9 55%,#14b8a6 100%);
    --vs-grad-soft:linear-gradient(135deg,rgba(37,99,235,.10) 0%,rgba(20,184,166,.10) 100%);
    --ciq-ink:#0b1530; --ciq-slate:#46506b; --ciq-faint:#7a849f; --ciq-line:#e3e8f4; --ciq-panel:#f5f8ff;
    --ciq-blue:#2563eb; --ciq-teal:#0d9488; --ciq-sky:#0ea5e9;
}
body{ background:#fff; color:var(--ciq-slate); }
.ai-hero{ background:radial-gradient(1100px 560px at 92% -12%,rgba(20,184,166,.20),transparent 60%),
                     radial-gradient(900px 520px at -10% 110%,rgba(37,99,235,.28),transparent 60%),
                     linear-gradient(180deg,#07102a 0%,#0c1a3d 100%); }
.ai-subhero{ background:radial-gradient(900px 500px at 82% -10%,rgba(20,184,166,.20),transparent 60%),
                        radial-gradient(700px 400px at 0% 120%,rgba(37,99,235,.25),transparent 60%),
                        linear-gradient(180deg,#07102a 0%,#0f1e44 100%); }
.ai-hero h1 .grad,.ai-subhero h1 .grad,.grad-text{ background:linear-gradient(90deg,#60a5fa 0%,#2dd4bf 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vs-footer{ background:linear-gradient(180deg,#07102a 0%,#0a1534 100%); }
.vs-brand__logo{ width:38px; height:38px; border-radius:11px; box-shadow:0 6px 16px rgba(37,99,235,.32); flex-shrink:0; }
.header-sticky.sticky-bar.sticky .vs-brand__logo{ width:34px; height:34px; }
.main-header .main-menu ul li a{ font-size:15px; }
.main-header .main-menu ul li:hover>a,.main-header .main-menu ul li a.active{ color:var(--ciq-blue) !important; }
.main-header .main-menu ul ul.submenu{ min-width:230px; }
.main-header .main-menu ul ul.submenu>li>a:hover{ color:var(--ciq-blue) !important; }
.vs-top-cta{ background:var(--vs-grad) !important; }
.slicknav_menu .slicknav_icon-bar{ background-color:var(--ciq-blue) !important; }
.slicknav_nav a{ color:var(--ciq-ink) !important; }
.vs-eyebrow{ color:var(--ciq-blue); }
a.vs-inline,.vs-prose a:not(.vs-btn),.docs-main a:not(.vs-btn),.feature-copy a:not(.vs-btn){ color:var(--ciq-blue); text-decoration:underline; text-underline-offset:2px; }
.vs-btn--primary{ background:var(--vs-grad) !important; }
.ai-hero__eyebrow .dot{ background:#2dd4bf; }

/* ---- screenshots ---- */
.vs-shot{ max-width:1020px; margin:0 auto; border-radius:14px; overflow:hidden; border:1px solid #dfe5f3; background:#fff; box-shadow:0 34px 80px -34px rgba(11,21,48,.5); }
.vs-shot__bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:#f3f6fd; border-bottom:1px solid #dfe5f3; }
.vs-shot__bar span{ width:11px; height:11px; border-radius:50%; background:#d3d8ee; flex:none; }
.vs-shot__bar span:nth-child(1){ background:#f0a6a0; } .vs-shot__bar span:nth-child(2){ background:#f4d08a; } .vs-shot__bar span:nth-child(3){ background:#a7dca9; }
.vs-shot__bar em{ margin-left:12px; font-style:normal; font-size:12px; color:#6f7a97; font-family:ui-monospace,Menlo,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-shot img{ width:100%; height:auto; display:block; }
.vs-shot--phone{ max-width:330px; border-radius:30px; border:8px solid #0b1530; }
.vs-shot--phone img{ border-radius:20px; }
.vs-gallery{ display:flex; flex-direction:column; gap:58px; margin-top:34px; }
.vs-gallery figure,.ciq-fig{ margin:0; max-width:1060px; width:100%; margin-inline:auto; }
.vs-gallery .vs-shot{ max-width:none; box-shadow:0 26px 60px -30px rgba(11,21,48,.45); }
.vs-gallery figcaption,.ciq-fig figcaption{ text-align:center; color:#5d6785; font-size:15.5px; line-height:1.6; margin-top:18px; max-width:780px; margin-inline:auto; }
.vs-gallery figcaption b,.ciq-fig figcaption b{ color:var(--ciq-ink); }
.vs-gallery--2{ display:grid; grid-template-columns:1fr 1fr; gap:40px 34px; }
.vs-gallery--2 figcaption{ font-size:14.5px; }
.vs-gallery--3{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; }
.vs-gallery--3 figcaption{ font-size:14px; }
@media(max-width:991px){ .vs-gallery--2,.vs-gallery--3{ grid-template-columns:1fr; } }
@media(max-width:767px){ .vs-gallery{ gap:38px; } .vs-gallery figcaption,.ciq-fig figcaption{ font-size:14px; } }
.recent-area.section-padding2{ padding-top:86px; padding-bottom:86px; }
@media(max-width:991px){ .recent-area.section-padding2{ padding-top:56px; padding-bottom:56px; } }
.section-tint{ background:#f5f8ff; }
.vs-section-title{ color:var(--ciq-ink); }
.vs-section-sub{ color:#5d6785; }

/* ---- hero ---- */
.ai-hero--split h1{ font-size:48px; line-height:1.12; }
.ai-hero__shot figcaption{ color:#9fb0d6; font-size:13px; text-align:center; margin-top:12px; }
.ciq-hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px; max-width:640px; }
.ciq-hero-stats div{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.04); }
.ciq-hero-stats b{ display:block; color:#fff; font-size:20px; line-height:1.15; }
.ciq-hero-stats span{ color:#9fb0d6; font-size:12px; line-height:1.35; display:block; margin-top:3px; }
@media(max-width:767px){ .ciq-hero-stats{ grid-template-columns:repeat(2,1fr); } .ai-hero--split h1{ font-size:34px; } .ai-subhero h1{ font-size:34px; } .ai-subhero{ padding:70px 0 50px; } }

/* ---- proof row (three screenshots on the home page) ---- */
.ciq-proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px; }
.ciq-proof figure{ margin:0; }
.ciq-proof .vs-shot{ max-width:none; }
.ciq-proof h4{ font-size:17px; color:var(--ciq-ink); margin:18px 0 6px; }
.ciq-proof p{ font-size:14.5px; color:#5d6785; line-height:1.6; margin:0; }
@media(max-width:991px){ .ciq-proof{ grid-template-columns:1fr; gap:42px; } }

/* ---- cards ---- */
.ciq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.ciq-grid--2{ grid-template-columns:repeat(2,1fr); } .ciq-grid--4{ grid-template-columns:repeat(4,1fr); }
.ciq-grid--5{ grid-template-columns:repeat(5,1fr); gap:16px; }
.ciq-grid--5 .ciq-card{ padding:20px 18px 18px; } .ciq-grid--5 .ciq-card h3{ font-size:16.5px; } .ciq-grid--5 .ciq-card p{ font-size:13.8px; }
@media(max-width:1199px){ .ciq-grid--5{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:991px){ .ciq-grid,.ciq-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .ciq-grid,.ciq-grid--2,.ciq-grid--4,.ciq-grid--5{ grid-template-columns:1fr; } }
.ciq-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--ciq-line); border-radius:16px; padding:24px 24px 22px; text-decoration:none !important; transition:transform .16s ease, box-shadow .16s ease; box-shadow:0 10px 30px -24px rgba(11,21,48,.45); height:100%; }
a.ciq-card:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -26px rgba(11,21,48,.5); }
.ciq-card__icon{ width:44px; height:44px; border-radius:12px; background:var(--vs-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px; flex:none; }
.ciq-card h3,.ciq-card h4{ font-size:18px; color:var(--ciq-ink); margin:0 0 8px; line-height:1.35; }
.ciq-card p{ font-size:14.5px; line-height:1.62; color:#56607c; margin:0 0 10px; }
.ciq-card ul{ list-style:none; padding:0; margin:6px 0 0; }
.ciq-card li{ font-size:14px; color:#46506b; line-height:1.5; padding:4px 0 4px 22px; position:relative; }
.ciq-card li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px; color:var(--ciq-teal); position:absolute; left:0; top:7px; }
.ciq-card__more{ margin-top:auto; padding-top:8px; font-size:14px; font-weight:600; color:var(--ciq-blue); }
.ciq-card--dark{ background:#0c1a3d; border-color:#1f2f5c; } .ciq-card--dark h3,.ciq-card--dark h4{ color:#fff; } .ciq-card--dark p{ color:#b5c2e3; }

/* ---- "what AI-first means" list ---- */
.ciq-tenets{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; counter-reset:t; }
.ciq-tenets div{ border-top:3px solid var(--ciq-blue); padding:16px 4px 0; counter-increment:t; }
.ciq-tenets div:nth-child(even){ border-top-color:#14b8a6; }
.ciq-tenets h4{ font-size:17px; color:var(--ciq-ink); margin:0 0 7px; }
.ciq-tenets h4::before{ content:counter(t,decimal-leading-zero) "  "; color:var(--ciq-faint); font-weight:600; font-size:13px; }
.ciq-tenets p{ font-size:14.5px; line-height:1.62; color:#56607c; margin:0; }
@media(max-width:991px){ .ciq-tenets{ grid-template-columns:1fr 1fr; } } @media(max-width:640px){ .ciq-tenets{ grid-template-columns:1fr; } }

/* ---- strips ---- */
.ciq-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.ciq-strip a,.ciq-strip span{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; border:1px solid var(--ciq-line); background:#fff; color:var(--ciq-ink) !important; font-weight:600; font-size:14.5px; text-decoration:none !important; }
.ciq-strip a:hover{ border-color:var(--ciq-blue); color:var(--ciq-blue) !important; }
.ciq-strip i{ color:var(--ciq-blue); }
.ciq-clouds{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:28px; }
.ciq-clouds div{ background:#fff; border:1px solid var(--ciq-line); border-radius:14px; padding:18px 16px; }
.ciq-clouds b{ display:block; color:var(--ciq-ink); font-size:16px; margin-bottom:6px; }
.ciq-clouds span{ display:block; font-size:13px; color:#5d6785; line-height:1.5; }
@media(max-width:991px){ .ciq-clouds{ grid-template-columns:repeat(2,1fr); } } @media(max-width:520px){ .ciq-clouds{ grid-template-columns:1fr; } }

/* ---- feature page layout ---- */
.feature-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:48px; align-items:center; }
.feature-split--rev{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.feature-split--rev .feature-copy{ order:2; }
@media(max-width:991px){ .feature-split,.feature-split--rev{ grid-template-columns:minmax(0,1fr); gap:26px; } .feature-split--rev .feature-copy{ order:0; } }
.feature-copy h2{ font-size:28px; color:var(--ciq-ink); margin:8px 0 12px; line-height:1.25; }
.feature-copy p{ font-size:16px; line-height:1.72; color:#4f5975; }
.feature-copy ul{ padding-left:0; list-style:none; }
.feature-copy li{ font-size:15px; line-height:1.6; color:#4f5975; padding:5px 0 5px 24px; position:relative; }
.feature-copy li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:11px; color:var(--ciq-teal); position:absolute; left:2px; top:9px; }
.ask-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
.ask-list div{ background:#fff; border:1px solid var(--ciq-line); border-radius:12px; padding:14px 18px 14px 46px; position:relative; color:var(--ciq-ink); font-size:15px; line-height:1.5; }
.ask-list div::before{ content:"\f075"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:17px; top:14px; color:var(--ciq-blue); font-size:15px; }
.ask-list small{ display:block; color:#6b7593; font-size:13px; margin-top:4px; }
@media(max-width:767px){ .ask-list{ grid-template-columns:1fr; } }
.outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.outcomes div{ background:#fff; border:1px solid var(--ciq-line); border-left:4px solid #14b8a6; border-radius:12px; padding:18px 20px; }
.outcomes b{ display:block; color:var(--ciq-ink); font-size:16px; margin-bottom:6px; }
.outcomes p{ margin:0; font-size:14.5px; line-height:1.6; color:#56607c; }
@media(max-width:991px){ .outcomes{ grid-template-columns:1fr; } }
.limits{ max-width:860px; margin:26px auto 0; background:#fbfcff; border:1px dashed #c9d4ee; border-radius:12px; padding:16px 20px; font-size:14.5px; line-height:1.65; color:#56607c; }
.limits b{ color:var(--ciq-ink); }
.feature-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.feature-nav a{ font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.22); color:#dbe6ff !important; text-decoration:none !important; }
.feature-nav a:hover,.feature-nav a.on{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }

/* ---- SVG diagrams ---- */
.ciq-diagram{ margin:30px auto 0; max-width:1100px; background:#fff; border:1px solid var(--ciq-line); border-radius:16px; padding:22px 20px 16px; box-shadow:0 18px 44px -34px rgba(11,21,48,.45); }
.ciq-diagram svg{ width:100%; height:auto; display:block; }
.ciq-diagram figcaption{ text-align:center; color:#5d6785; font-size:14px; line-height:1.55; margin-top:12px; }
.ciq-diagram .diag-v{ display:none; max-width:420px; margin:0 auto; }
@media(max-width:767px){ .ciq-diagram .diag-h{ display:none; } .ciq-diagram .diag-v{ display:block; } .ciq-diagram{ padding:16px 12px 12px; } }

/* ---- tables ---- */
.vs-compare-table,.vs-table{ width:100%; border-collapse:collapse; margin-top:26px; font-size:14.5px; background:#fff; border:1px solid var(--ciq-line); border-radius:14px; overflow:hidden; }
.vs-compare-table th,.vs-compare-table td,.vs-table th,.vs-table td{ padding:12px 15px; border-bottom:1px solid #edf1f9; text-align:left; vertical-align:top; line-height:1.55; }
.vs-compare-table th,.vs-table th{ background:#f3f6fd; color:var(--ciq-ink); font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.vs-compare-table td:first-child,.vs-table td:first-child{ color:var(--ciq-ink); font-weight:600; } .vs-compare-table td,.vs-table td{ color:#4f5975; }
.vs-compare-table td.yes,.vs-table td.yes{ color:#0f766e; } .vs-compare-table td.no,.vs-table td.no{ color:#a8524f; } .vs-table td.warn{ color:#8a6a1f; }
.vs-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap > table{ min-width:640px; }
.vs-compare-table code,.vs-table code{ background:#eef3fd; color:#1e3a8a; padding:1px 5px; border-radius:4px; font-size:12.5px; }

/* ---- code ---- */
.code-block{ background:#0c1530; color:#dbe4ff; border-radius:12px; padding:18px 20px; font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:1.6; overflow:auto; margin:16px 0; white-space:pre; }
.code-block .k{ color:#7dd3fc; } .code-block .s{ color:#5eead4; } .code-block .c{ color:#7f8bb0; }
.code-label{ display:inline-block; margin:14px 0 -8px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ciq-faint); }

/* ---- docs ---- */
.docs-shell{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:240px minmax(0,1fr); gap:44px; }
@media(max-width:900px){ .docs-shell{ grid-template-columns:minmax(0,1fr); } .docs-side{ position:static !important; border-bottom:1px solid var(--ciq-line); padding-bottom:12px; } .docs-side nav{ display:flex; flex-wrap:wrap; gap:4px; } .docs-side h4{ width:100%; } }
.docs-side{ position:sticky; top:20px; align-self:start; padding-top:10px; }
.docs-side nav{ width:auto !important; margin-right:0 !important; } /* style.css gives every nav a fixed width at tablet sizes */
.docs-side h4{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ciq-faint); margin:18px 0 8px; }
.docs-side a{ display:block; text-decoration:none; color:#4f5975; font-size:14.5px; padding:6px 12px; border-radius:8px; margin-bottom:2px; }
.docs-side a:hover{ background:var(--ciq-panel); color:var(--ciq-ink); } .docs-side a.active{ background:#e9f0ff; color:var(--ciq-blue); font-weight:600; }
.docs-main{ min-width:0; max-width:860px; }
.docs-main h2{ font-size:25px; color:var(--ciq-ink); margin:38px 0 10px; scroll-margin-top:16px; }
.docs-main h2:first-child{ margin-top:6px; }
.docs-main h3{ font-size:18px; color:var(--ciq-ink); margin:26px 0 8px; }
.docs-main p{ color:#4f5975; font-size:16px; line-height:1.72; margin:0 0 15px; }
.docs-main ul,.docs-main ol{ color:#4f5975; font-size:16px; line-height:1.7; margin:0 0 16px 20px; } .docs-main li{ margin-bottom:6px; }
.docs-main code,.feature-copy code,.vs-prose code{ background:#eef3fd; color:#1e3a8a; padding:1px 6px; border-radius:5px; font-size:13.5px; font-family:ui-monospace,Menlo,monospace; word-break:break-word; }
.docs-main .code-block code{ background:none; color:inherit; padding:0; }
.docs-main .lead{ font-size:18px !important; color:#2b3452 !important; }
.callout{ background:#f6f9ff; border:1px solid var(--ciq-line); border-left:4px solid #14b8a6; border-radius:12px; padding:16px 20px; margin:20px 0; }
.callout h4{ margin:0 0 6px; font-size:16px; color:var(--ciq-ink); }
.callout p{ margin:0; font-size:15px; color:#4f5975; }
.docs-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:18px 0 26px; }
@media(max-width:640px){ .docs-cards{ grid-template-columns:1fr; } }
.vs-prose{ max-width:860px; margin:0 auto; }
.vs-prose h2{ font-size:26px; color:var(--ciq-ink); margin:36px 0 10px; }
.vs-prose h3{ font-size:19px; color:var(--ciq-ink); margin:26px 0 8px; }
.vs-prose p,.vs-prose li{ font-size:16.5px; line-height:1.75; color:#4f5975; }

/* ---- blog index + post ---- */
.blog-list-grid{ margin-top:30px; }
.post-card__img{ background:linear-gradient(135deg,#1d4ed8,#14b8a6); }
.post-card:nth-of-type(3n) .post-card__img{ background:linear-gradient(135deg,#0ea5e9,#2563eb); }
.post-card:nth-of-type(3n+1) .post-card__img{ background:linear-gradient(135deg,#0f766e,#0ea5e9); }
.post-card__date{ color:#8a93ad; }
.blog-filter{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.blog-filter button{ font-size:13px; line-height:1; padding:9px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.26); color:#dbe6ff; background:transparent; cursor:pointer; }
.blog-filter button.on,.blog-filter button:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); }
.blog-empty{ text-align:center; color:#5d6785; padding:40px 0; }
.article-body{ max-width:860px; }
.article-body .post-shot{ margin:30px auto; max-width:920px; }
.article-body .post-shot .vs-shot{ max-width:none; box-shadow:0 24px 56px -30px rgba(11,21,48,.45); }
.article-body .post-shot figcaption,.article-body figure figcaption{ text-align:center; color:#5d6785; font-size:14px; line-height:1.6; margin-top:14px; }
.article-body figure{ margin:28px 0; }
.article-body figure img{ max-width:100%; height:auto; }
.article-body a:not(.vs-btn){ color:var(--ciq-blue); text-decoration:underline; text-underline-offset:2px; }
.article-body .post-hero{ margin:0 0 30px; border-radius:14px; overflow:hidden; border:1px solid var(--ciq-line); }
.article-body .post-hero img{ width:100%; display:block; }
.article-body pre{ background:#0c1530; color:#dbe4ff; border-radius:12px; padding:16px 18px; font-size:13px; overflow:auto; }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0; }
.compare>div{ border-radius:13px; padding:20px 22px; border:1px solid var(--ciq-line); }
.compare__old{ background:#f7f8fb; } .compare__new{ background:#f1f6ff; border-color:#c9daf9 !important; }
.compare__label{ display:inline-block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#8890b4; margin-bottom:9px; } .compare__new .compare__label{ color:var(--ciq-blue); }
.compare strong{ display:block; color:var(--ciq-ink); font-size:16px; margin-bottom:7px; }
.compare p{ color:#56607c; font-size:14.5px; line-height:1.6; margin:0; }
@media(max-width:767px){ .compare{ grid-template-columns:1fr; } }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:26px 0; }
.stat{ background:#f5f8ff; border:1px solid var(--ciq-line); border-radius:12px; padding:18px 16px; text-align:center; }
.stat strong{ display:block; font-size:27px; color:var(--ciq-ink); line-height:1.1; margin-bottom:5px; font-weight:700; }
.stat span{ font-size:12.5px; color:#6b7593; line-height:1.4; display:block; }
.post-quote{ border-left:3px solid var(--ciq-blue); margin:28px 0; padding:4px 0 4px 22px; }
.post-quote p{ font-size:19px; line-height:1.55; color:var(--ciq-ink); font-weight:600; margin:0 0 7px; }
.post-quote cite{ font-style:normal; font-size:13.5px; color:#8890b4; }
.scenario{ background:#f6f9ff; border:1px solid #d6e2fb; border-left:4px solid var(--ciq-blue); border-radius:13px; padding:24px 26px 20px; margin:30px 0; }
.scenario__label{ display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ciq-blue); margin-bottom:10px; }
.scenario h4{ font-size:17.5px; color:var(--ciq-ink); margin:0 0 9px; line-height:1.45; }
.scenario__setup{ color:#4f5975; font-size:15px; line-height:1.65; margin:0 0 14px; }
.scenario p{ font-size:15px; line-height:1.68; }
.scenario .vs-table{ margin:18px 0; }
.scenario__note{ font-size:12.5px; color:#8890b4; font-style:italic; margin:16px 0 0; border-top:1px solid #e0e8fa; padding-top:12px; }
.tl{ margin:26px 0; }
.tl__label{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#8890b4; margin-bottom:12px; }
.tl ol{ list-style:none; margin:0; padding:0; border-left:2px solid #e0e6f6; }
.tl li{ display:flex; gap:18px; padding:0 0 20px 22px; margin-left:-2px; position:relative; }
.tl li::before{ content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--ciq-blue); }
.tl__when{ flex:0 0 108px; font-size:12.5px; font-weight:700; color:var(--ciq-blue); padding-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.tl li strong{ display:block; color:var(--ciq-ink); font-size:15.5px; margin-bottom:3px; }
.tl li p{ margin:0; color:#56607c; font-size:14.5px; line-height:1.6; }
@media(max-width:575px){ .tl li{ flex-direction:column; gap:4px; } .tl__when{ flex:none; } }
.vs-diagram{ background:#fff; border:1px solid var(--ciq-line); border-radius:14px; padding:26px 20px; margin:24px 0; box-shadow:0 18px 44px -32px rgba(11,21,48,.4); overflow-x:auto; }
.vs-diagram .mermaid{ display:flex; justify-content:center; min-width:min-content; }
.vs-diagram .mermaid svg{ overflow:visible; }
.vs-diagram figcaption{ text-align:center; color:#5d6785; font-size:13.5px; margin-top:14px; }
.article-body table{ display:block; overflow-x:auto; }
.article-body table.vs-table{ display:table; }
@media(max-width:700px){ .article-body table.vs-table{ display:block; overflow-x:auto; } }

/* ---- CTA ---- */
.vs-cta-banner{ background:var(--vs-grad) !important; }

/* ---- contact ---- */
.contact-card .lead{ color:#4f5975; }

/* ---- 404 ---- */
.ciq-404{ text-align:center; padding:40px 0 20px; }
.ciq-404 .code{ font-size:96px; font-weight:800; line-height:1; background:var(--vs-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:minmax(0,1fr) !important; } .contact-row{ flex-direction:column; } .contact-card{ padding:24px 18px !important; } }
/* blog posts: inline SVG diagrams and code */
pre{ background:#0c1530; color:#dbe4ff; border-radius:12px; padding:16px 18px; font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:1.6; overflow:auto; white-space:pre; }
pre code{ background:none !important; color:inherit !important; padding:0 !important; font-size:inherit; }
pre.code-block{ margin:16px 0; padding:18px 20px; }
.vs-diagram.post-diagram{ overflow-x:auto; }
.vs-diagram svg,.post-diagram svg{ width:100%; max-width:100%; height:auto; display:block; margin:0 auto; }
.vs-diagram img,.post-diagram img{ max-width:100%; height:auto; display:block; margin:0 auto; }
pre.mermaid{ background:none; color:inherit; padding:0; overflow:visible; white-space:pre-wrap; }