/* ---------- Manrope, self-hosted ----------
   Was four requests to two Google domains before any text could paint, plus a
   third-party dependency on every page view. One variable file per subset now
   covers 400-800 from our own origin. Instrument Serif was dropped entirely:
   it rendered on two elements site-wide after the enterprise pass overrode
   every other rule that asked for it. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ===================================================================
   ZIVARA Blog — self-contained stylesheet
   Reuses the design tokens / fonts from the main site (index.html)
   so blog pages match exactly without touching the homepage CSS.
   =================================================================== */

:root {
  --g:#0EA58A; --gl:#12c9a4; --gd:#098a72;
  --gp:rgba(14,165,138,0.06); --gp2:rgba(14,165,138,0.03);
  --bg:#ffffff; --bg2:#f8f9fb; --bg3:#f2f3f7;
  --ink:#0e0e1a; --ink2:#3a3a54; --ink3:#6a6a86; --ink4:#9a9ab4; --ink5:#c2c2d4;
  --line:#ecedf2; --line2:#f4f4f8;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}

/* ===== NAV (simplified — links back to the single-page site) ===== */
/* ===== SHARED LAYOUT ===== */
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);}
.eyebrow{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--g);margin-bottom:16px;}

/* ===== BLOG HEADER ===== */
.blog-head{padding:140px clamp(24px,4vw,48px) 60px;max-width:1100px;margin:0 auto;text-align:center;position:relative;}
.blog-head::before{content:'';position:absolute;top:90px;left:50%;transform:translateX(-50%);width:600px;height:340px;background:radial-gradient(ellipse,rgba(14,165,138,0.04),transparent 70%);pointer-events:none;}
.blog-head h1{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(40px,6vw,68px);line-height:1.08;color:var(--ink);margin-bottom:20px;}
.blog-head h1 em{font-style:italic;color:var(--g);}
.blog-head p{font-size:clamp(15px,1.5vw,17.5px);color:var(--ink3);line-height:1.8;max-width:520px;margin:0 auto;}

/* ===== POST GRID (listing) ===== */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:8px clamp(24px,4vw,48px) 36px;max-width:1100px;margin:0 auto;}
.card{background:var(--bg);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(0.16,1,0.3,1),box-shadow .4s,border-color .4s;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,0.07);border-color:var(--ink5);}
.card-thumb{aspect-ratio:16/9;background:linear-gradient(160deg,var(--bg2),var(--bg3));position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line2);}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(0.16,1,0.3,1);}
.card:hover .card-thumb img{transform:scale(1.04);}
.card-thumb-mark{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:34px;letter-spacing:6px;color:rgba(14,165,138,0.18);}
.card-body{padding:28px 26px 14px;flex:1;}
.card-cat{display:inline-flex;align-items:center;gap:7px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--g);margin-bottom:14px;}
.card-cat-dot{width:5px;height:5px;border-radius:50%;background:var(--g);}
.card h2{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);margin-bottom:11px;}
.card p{font-size:14px;color:var(--ink3);line-height:1.7;}
.card-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 22px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;color:var(--ink4);}
.card-arrow{width:26px;height:26px;border-radius:50%;background:var(--line2);display:flex;align-items:center;justify-content:center;transition:all .3s;}
.card:hover .card-arrow{background:var(--g);}
.card:hover .card-arrow svg path{stroke:#fff;}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}

/* ===== ARTICLE (single post) ===== */
.article{max-width:740px;margin:0 auto;padding:130px clamp(24px,4vw,48px) 40px;}
.article-back{display:flex;width:fit-content;align-items:center;gap:7px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:500;color:var(--ink4);text-decoration:none;margin-bottom:30px;transition:color .25s;}
.article-back:hover{color:var(--g);}
.article-cat{display:flex;width:fit-content;align-items:center;gap:7px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--g);margin-bottom:18px;}
.article-cat-dot{width:5px;height:5px;border-radius:50%;background:var(--g);}
.article h1{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.12;color:var(--ink);margin-bottom:22px;}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:38px;border-bottom:1px solid var(--line);}
.article-author{display:flex;align-items:center;gap:11px;}
.article-author-av{width:40px;height:40px;border-radius:50%;background:var(--gp);border:1px solid rgba(14,165,138,0.15);display:flex;align-items:center;justify-content:center;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:15px;color:var(--g);}
.article-author-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);}
.article-author-d{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;color:var(--ink4);margin-top:2px;}
.article-meta-sep{color:var(--ink5);font-size:12px;}
.article-meta time,.article-readtime{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;color:var(--ink4);}

/* Hero image for the article */
.article-hero{border-radius:18px;overflow:hidden;border:1px solid var(--line);margin-bottom:42px;aspect-ratio:16/9;background:linear-gradient(160deg,var(--bg2),var(--bg3));}
.article-hero img{width:100%;height:100%;object-fit:cover;}

/* Branded hero — generated graphic with ZIVARA markup, no external image needed */
.article-hero-brand{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:linear-gradient(150deg,#0c1a18,#0a2622 55%,#0e3a31);overflow:hidden;}
.article-hero-brand::before{content:'';position:absolute;width:440px;height:440px;background:radial-gradient(circle,rgba(18,201,164,0.28),transparent 62%);top:-150px;right:-120px;pointer-events:none;}
.article-hero-brand::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 28% 125%,rgba(14,165,138,0.20),transparent 55%);pointer-events:none;}
.hero-brand-logo{position:relative;display:flex;align-items:center;gap:12px;}
.hero-brand-word{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:clamp(24px,4vw,38px);letter-spacing:8px;color:#fff;}
.hero-brand-cat{position:relative;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#9ff0dd;background:rgba(18,201,164,0.14);border:1px solid rgba(18,201,164,0.32);padding:6px 15px;border-radius:30px;}

/* ===== BLOG TOOLBAR (filter + search) ===== */
.blog-toolbar{max-width:1100px;margin:0 auto 28px;padding:18px clamp(20px,4vw,48px) 0;display:flex;align-items:center;justify-content:space-between;gap:16px 18px;flex-wrap:wrap;border-top:1px solid var(--line2);}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;}
.chip{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:500;color:var(--ink3);background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:9px 17px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:all .2s ease;}
.chip:hover{border-color:rgba(14,165,138,0.35);color:var(--g);background:var(--gp);}
.chip:focus-visible{outline:none;border-color:var(--g);box-shadow:0 0 0 4px var(--gp);}
.chip.active{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 4px 14px rgba(14,165,138,0.22);}
.blog-search{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:11px 20px;width:240px;flex-shrink:0;outline:none;transition:all .2s ease;}
.blog-search::placeholder{color:var(--ink4);}
.blog-search:focus{border-color:var(--g);background:var(--bg);box-shadow:0 0 0 4px var(--gp);}

/* Tablet / small: search goes full-width on top, chips wrap below */
@media(max-width:640px){
  .blog-toolbar{flex-direction:column;align-items:stretch;gap:14px;}
  .blog-search{order:-1;width:100%;}
  .blog-chips{justify-content:flex-start;}
}
/* Phones: finger-friendly chips, tighter spacing */
@media(max-width:420px){
  .blog-chips{gap:7px;}
  .chip{padding:9px 15px;}
  .blog-search{padding:12px 18px;}
}
.blog-empty{display:none;text-align:center;color:var(--ink4);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:14px;padding:48px 0 0;}

/* ===== PAGINATION (top bar) ===== */
.pagination{display:flex;justify-content:space-between;align-items:center;gap:14px 18px;flex-wrap:wrap;max-width:1100px;margin:0 auto;padding:2px clamp(20px,4vw,48px) 24px;}
.page-count{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12.5px;font-weight:500;color:var(--ink4);letter-spacing:.2px;white-space:nowrap;}
.page-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink2);border-radius:10px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s ease;}
.page-btn:hover:not(:disabled){border-color:var(--g);color:var(--g);background:var(--gp);}
.page-btn:focus-visible{outline:none;border-color:var(--g);box-shadow:0 0 0 4px var(--gp);}
.page-btn.active{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 4px 14px rgba(14,165,138,0.22);}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}
.page-nav{font-size:17px;line-height:1;}
.page-ellipsis{color:var(--ink4);padding:0 2px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;user-select:none;}

/* Tablet / small: stack the count above centered controls */
@media(max-width:640px){
  .pagination{flex-direction:column;align-items:center;gap:14px;padding-bottom:26px;}
  .page-count{order:-1;}
}
/* Phones: tighter, finger-friendly, never overflow */
@media(max-width:420px){
  .page-group{gap:5px;}
  .page-btn{min-width:38px;height:38px;padding:0 9px;font-size:12.5px;}
  .page-nav{font-size:16px;}
}

/* Toolbar — responsive: chips become a clean horizontal scroll strip on phones */
@media(max-width:680px){
  .blog-toolbar{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:24px;}
  .blog-chips{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .blog-chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;}
  .blog-search{width:100%;}
}
@media(max-width:600px){ .blog-head{padding-top:112px;padding-bottom:36px;} }

/* ===== ARTICLE TYPOGRAPHY (prose) ===== */
.prose{font-size:17px;line-height:1.85;color:var(--ink2);}
.prose > * + *{margin-top:24px;}
.prose p{color:var(--ink2);}
.prose h2{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(26px,3.4vw,34px);line-height:1.2;color:var(--ink);margin-top:52px;margin-bottom:4px;}
.prose h3{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:20px;color:var(--ink);margin-top:38px;}
.prose a{color:var(--g);text-decoration:none;border-bottom:1px solid rgba(14,165,138,0.3);transition:border-color .25s;}
.prose a:hover{border-color:var(--g);}
.prose strong{color:var(--ink);font-weight:700;}
.prose ul,.prose ol{padding-left:24px;}
.prose li{margin-top:10px;}
.prose li::marker{color:var(--g);}
.prose blockquote{border-left:3px solid var(--g);padding:6px 0 6px 24px;margin-left:0;font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-style:italic;font-size:22px;line-height:1.5;color:var(--ink);}
.prose img{border-radius:14px;border:1px solid var(--line);margin:32px 0;}
.prose code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:14px;background:var(--bg3);border-radius:6px;padding:2px 7px;color:var(--gd);}
.prose pre{background:var(--ink);border-radius:14px;padding:22px 24px;overflow-x:auto;margin:28px 0;}
.prose pre code{background:none;color:#e6e6f0;padding:0;font-size:13.5px;line-height:1.7;}
.prose hr{border:none;border-top:1px solid var(--line);margin:44px 0;}

/* ===== PER-TOPIC THEMING — each category re-themes the accent ===== */
.cat-AI{--g:#0aa890;--gd:#087a68;--gp:rgba(10,168,144,0.08);}
.cat-Engineering{--g:#3b6fe0;--gd:#2a52b0;--gp:rgba(59,111,224,0.08);}
.cat-Product{--g:#d6336c;--gd:#ab2757;--gp:rgba(214,51,108,0.08);}
.cat-Cloud{--g:#0c84c4;--gd:#09699c;--gp:rgba(12,132,196,0.08);}
.cat-Security{--g:#bd8a07;--gd:#967005;--gp:rgba(189,138,7,0.10);}
.cat-Frontend{--g:#7b3fe4;--gd:#6230b6;--gp:rgba(123,63,228,0.08);}

/* ===== CONTENT COMPONENTS (used by post type, so layouts differ) ===== */
/* TL;DR / lead summary */
.prose .tldr{background:var(--gp);border:1px solid var(--line);border-left:3px solid var(--g);border-radius:12px;padding:18px 22px;font-size:15.5px;color:var(--ink2);}
.prose .tldr strong{color:var(--g);}
/* Definition / callout */
.prose .callout{border:1px solid var(--line);border-left:3px solid var(--g);background:var(--bg2);border-radius:12px;padding:18px 22px;}
.prose .callout strong{color:var(--g);}
/* Key takeaways box */
.prose .takeaways{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:24px 26px;}
.prose .takeaways-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--g);margin-bottom:12px;}
.prose .takeaways ul{margin:0;}
/* Tables */
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin:8px 0;}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.prose thead th{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink4);}
.prose tbody tr:hover{background:var(--bg2);}
.prose td strong{color:var(--ink);}
/* Verdict callout (for comparisons) */
.prose .verdict{border:1px solid var(--line);border-left:3px solid var(--g);background:var(--gp);border-radius:12px;padding:18px 22px;}
.prose .verdict strong{color:var(--g);}
/* Numbered steps */
.prose ol.steps{counter-reset:step;list-style:none;padding-left:0;}
.prose ol.steps > li{position:relative;padding-left:54px;margin-top:22px;min-height:36px;}
.prose ol.steps > li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-3px;width:36px;height:36px;border-radius:50%;background:var(--gp);color:var(--g);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
/* FAQ accordion */
.prose .faq details{border:1px solid var(--line);border-radius:12px;padding:2px 20px;margin-top:10px;background:var(--bg);}
.prose .faq summary{cursor:pointer;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:16px;color:var(--ink);padding:16px 0;list-style:none;}
.prose .faq summary::-webkit-details-marker{display:none;}
.prose .faq summary::after{content:'+';float:right;color:var(--g);font-weight:700;}
.prose .faq details[open] summary{color:var(--g);}
.prose .faq details[open] summary::after{content:'–';}
.prose .faq details > p{padding:0 0 16px;margin-top:0;}

/* Tag list under the article */
.article-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:48px;padding-top:34px;border-top:1px solid var(--line);}
.article-tag{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11.5px;font-weight:500;color:var(--ink3);background:var(--bg3);border-radius:7px;padding:7px 14px;}

/* Author / CTA card after the article */
.post-cta{max-width:740px;margin:56px auto 0;padding:0 clamp(24px,4vw,48px);}
.post-cta-in{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--line);border-radius:22px;padding:clamp(34px,5vw,48px);text-align:center;position:relative;overflow:hidden;}
.post-cta-in::before{content:'';position:absolute;width:360px;height:360px;top:-100px;right:-100px;background:radial-gradient(circle,rgba(14,165,138,0.06),transparent 60%);pointer-events:none;}
.post-cta-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(24px,3.2vw,32px);color:var(--ink);margin-bottom:12px;position:relative;}
.post-cta-p{font-size:15px;color:var(--ink3);line-height:1.8;max-width:440px;margin:0 auto 26px;position:relative;}
.btn-p{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;font-weight:600;background:var(--g);color:#fff;padding:14px 32px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:all .35s cubic-bezier(0.16,1,0.3,1);box-shadow:0 2px 8px rgba(14,165,138,0.12);position:relative;}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,165,138,0.2);}

/* Related posts */
.related{max-width:1100px;margin:0 auto;padding:80px clamp(24px,4vw,48px) 0;}
.related-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:28px;color:var(--ink);text-align:center;margin-bottom:38px;}

/* ===== FOOTER (matches main site) ===== */
footer.ft{padding:0;margin-top:100px;display:block;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,0.45),rgba(244,247,255,0.7));}
.ft-top{max-width:1100px;margin:0 auto;padding:64px clamp(24px,4vw,48px) 48px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;}
.ft-brand-row{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.ft-brand-row span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:16px;letter-spacing:2.5px;color:var(--ink);}
.ft-desc{font-size:14px;color:var(--ink3);line-height:1.85;max-width:300px;margin-bottom:22px;}
.ft-social{display:flex;gap:10px;}
.ft-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .3s;background:rgba(255,255,255,0.6);}
.ft-social a:hover{border-color:var(--g);background:var(--gp);transform:translateY(-2px);}
.ft-col h4{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);margin-bottom:20px;}
.ft-col a{display:block;font-size:14px;color:var(--ink2);text-decoration:none;margin-bottom:13px;transition:color .25s,transform .25s;}
.ft-col a:hover{color:var(--g);transform:translateX(3px);}
.ft-bottom{border-top:1px solid var(--line);}
.ft-bottom-in{max-width:1100px;margin:0 auto;padding:24px clamp(24px,4vw,48px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.ft-bottom-in p{font-size:12.5px;color:var(--ink4);}
.ft-mini a{font-size:12.5px;color:var(--ink4);text-decoration:none;margin-left:20px;transition:color .25s;}
.ft-mini a:hover{color:var(--g);}
@media(max-width:760px){.ft-top{grid-template-columns:1fr 1fr;gap:36px;}}
@media(max-width:460px){.ft-top{grid-template-columns:1fr;}}

/* ============================================================
   ✦ ENTERPRISE THEME ✦  — brings the blog into the same system as
   the rest of the site. Sits last in the cascade and supersedes
   everything above it.
   ============================================================ */
:root{
  --navy:#0C1E33; --g:#0B8C75; --gd:#0A7A66; --g-soft:#E8F4F1;
  --ink:#101820; --ink2:#3D4A57; --ink3:#6B7885; --ink4:#939EAA; --ink5:#BFC7CF;
  --bg:#fff; --bg2:#F5F7F9; --bg3:#EDF1F4;
  --line:#E1E6EB; --line2:#EDF0F3; --r:6px;
}

/* The blog was running six brand colours — a different accent per category,
   none of them the one the rest of the site uses. Categories are now a label,
   not a palette. */
.cat-AI,.cat-Engineering,.cat-Product,.cat-Cloud,.cat-Security,.cat-Frontend{
  --g:#0B8C75!important;--gd:#0A7A66!important;--gp:rgba(11,140,117,0.07)!important;}

/* One display family, matching the site. */
.article h1,.blog-head h1,.card h2,.prose h2,.prose h3,.post-cta-h,.takeaways-h{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  font-weight:800!important;letter-spacing:-0.9px!important;font-style:normal!important;}
.article h1{font-size:clamp(31px,4.2vw,46px)!important;line-height:1.1!important;letter-spacing:-1.6px!important;}
.blog-head h1{font-size:clamp(34px,4.6vw,50px)!important;letter-spacing:-1.6px!important;}
.blog-head h1 em{font-style:normal!important;color:var(--g)!important;}
.prose h2{font-size:clamp(21px,2.3vw,27px)!important;letter-spacing:-0.7px!important;}
.prose h3{font-size:17.5px!important;letter-spacing:-0.4px!important;}

/* A blog index that reads as a publication, not a card wall. */
.blog-head{text-align:left!important;padding-top:132px!important;}
.blog-head::before{display:none!important;}
.blog-head p{margin:0!important;max-width:62ch!important;}
.card{border-radius:var(--r)!important;box-shadow:none!important;}
.card:hover{transform:none!important;box-shadow:0 4px 16px rgba(12,30,51,0.07)!important;border-color:#CBD4DC!important;}
.card h2{font-size:19px!important;letter-spacing:-0.5px!important;}
.card-arrow{border-radius:var(--r)!important;}
.card:hover .card-thumb img{transform:none!important;}

/* Article: a wider measure, and the redundant cover card removed — it
   restated the headline immediately under the headline, in a gradient that
   belonged to no part of this brand. */
.article{max-width:800px!important;}
.article-hero{display:none!important;}
.article-cat{letter-spacing:1.4px!important;color:var(--ink4)!important;font-size:10.5px!important;font-weight:700!important;}
.article-cat-dot{background:var(--g)!important;}
.article-author-av{border-radius:var(--r)!important;background:var(--g-soft)!important;
  border:1px solid rgba(11,140,117,0.16)!important;color:var(--g)!important;}
.article-meta{border-bottom:2px solid var(--ink)!important;padding-bottom:22px!important;margin-bottom:36px!important;}

/* Prose: hairline rules, no tinted boxes floating in the text. */
.prose p,.prose li{color:var(--ink2)!important;}
.callout,.tldr{background:var(--bg2)!important;border:0!important;border-left:2px solid var(--g)!important;
  border-radius:0 var(--r) var(--r) 0!important;}
.takeaways{background:var(--bg2)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;}
.takeaways-h{font-size:11px!important;letter-spacing:1.6px!important;color:var(--g)!important;}
.verdict{border-left:2px solid var(--g)!important;background:var(--bg2)!important;border-radius:0 var(--r) var(--r) 0!important;}
.prose table{border:1px solid var(--line)!important;border-radius:var(--r)!important;overflow:hidden;}
.prose blockquote{border-left:2px solid var(--g)!important;font-style:normal!important;color:var(--ink)!important;}
.faq details,.faq-item{border-radius:var(--r)!important;border-color:var(--line)!important;}
.article-tag{border-radius:4px!important;background:var(--bg2)!important;border:1px solid var(--line)!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:0.9px!important;text-transform:uppercase!important;color:var(--ink3)!important;}

/* The close is a statement, matching the product pages. */
.post-cta{background:none!important;border:0!important;border-top:2px solid var(--ink)!important;
  border-radius:0!important;padding:32px 0 0!important;text-align:left!important;}
.post-cta-in{max-width:none!important;text-align:left!important;}
.post-cta-h{font-size:clamp(19px,2.2vw,25px)!important;margin-bottom:10px!important;}
.post-cta-p{max-width:60ch!important;margin:0 0 22px!important;color:var(--ink3)!important;}
.btn-p{background:var(--g)!important;background-image:none!important;border-radius:var(--r)!important;
  box-shadow:none!important;font-weight:700!important;}
.btn-p:hover{background:var(--gd)!important;transform:none!important;box-shadow:none!important;}
/* Canonical footer, copied from site.css so blog and site cannot drift. */
/* ============================================================
   FOOTER — one block, one ground, every link exactly once.
   Navy so the page terminates against the same institutional colour
   the hero opens on, rather than fading into another pale grey band.
   ============================================================ */
footer.ft{background:var(--navy)!important;color:#fff;border-top:none!important;
  padding:0;margin:0;max-width:none;display:block;}
.ft-main{border-bottom:1px solid rgba(255,255,255,0.10);}
.ft-in{max-width:1100px;margin:0 auto;padding:clamp(52px,6vw,76px) clamp(24px,4vw,48px) clamp(44px,5vw,60px);
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);}

/* Brand column */
.ft-mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:18px;}
.ft-mark span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;font-weight:800;letter-spacing:2.6px;color:#fff;}
.ft-desc{font-size:13.5px;line-height:1.8;color:rgba(255,255,255,0.62);max-width:38ch;margin:0 0 26px;}

/* Company record: a labelled table, the way a firm states its details. */
.ft-meta{margin:0;border-top:1px solid rgba(255,255,255,0.10);}
.ft-meta>div{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.ft-meta dt{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,0.40);}
.ft-meta dd{margin:0;font-size:13px;line-height:1.55;color:rgba(255,255,255,0.80);}
.ft-meta dd a{color:#5FD3B8;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
.ft-meta dd a:hover{border-bottom-color:#5FD3B8;}

/* Link columns */
.ft-col h4{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,0.40);margin:0 0 18px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.10);}
.ft-col a{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.72);
  text-decoration:none;padding:7px 0;transition:color .2s;}
.ft-col a:hover{color:#fff;}

/* Bottom bar */
.ft-bottom-in{max-width:1100px;margin:0 auto;padding:20px clamp(24px,4vw,48px);
  display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;}
.ft-copy{margin:0;font-size:12.5px;color:rgba(255,255,255,0.42);}
.ft-legal{display:flex;gap:22px;flex-wrap:wrap;}
.ft-legal a{font-size:12.5px;color:rgba(255,255,255,0.55);text-decoration:none;transition:color .2s;}
.ft-legal a:hover{color:#fff;}
.ft-social{display:flex;gap:8px;margin-left:auto;}
.ft-social a{width:34px;height:34px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.62);
  transition:color .2s,border-color .2s,background .2s;}
.ft-social a:hover{color:#fff;border-color:rgba(255,255,255,0.42);background:rgba(255,255,255,0.06);}

@media(max-width:1000px){
  .ft-in{grid-template-columns:1fr 1fr;gap:36px 32px;}
  .ft-brand{grid-column:1/-1;}
}
@media(max-width:560px){
  .ft-in{grid-template-columns:1fr;gap:32px;}
  .ft-meta>div{grid-template-columns:96px 1fr;}
  .ft-social{margin-left:0;}
  .ft-bottom-in{gap:16px;}
}

/* ---------- Capability labels ----------
   These were pills carrying a teal dot — decoration repeated roughly forty
   times across the page, which is what made a specification read like a tag
   cloud. The label is the information; the dot never was. */
.tech-tag::before,.svc-feature-tags span::before{display:none!important;}
.tech-tag,.cs-tech span,.stk-tags span,.st-lang,.svc-feature-tags span{
  gap:0!important;font-size:11.5px!important;font-weight:600!important;
  letter-spacing:0.2px!important;color:var(--ink2)!important;
  background:var(--bg2)!important;border:1px solid var(--line)!important;
  padding:5px 10px!important;border-radius:4px!important;}
.st-lang{gap:7px!important;}          /* keeps its language glyph */
.st-lang svg,.st-chip svg{display:inline-block;}
.tech-tag:hover{transform:none!important;background:#fff!important;border-color:#CBD4DC!important;}
.svc-feature-tags{gap:6px!important;}

/* ---------- Technology listings as a specification line ----------
   Boxed pills read as tags — the vocabulary of a blog sidebar. A stack is a
   statement of record, so it is set as a ruled line: small, tracked, divided
   by hairlines, sharing the page's ledger language instead of floating on it.
   Applies to listings that sit inside prose or a card; the engineering page's
   stack table keeps chips, where they are the content rather than a footnote. */
.cs-tech,.svc-feature-tags{
  display:flex!important;flex-wrap:wrap!important;gap:8px 0!important;
  margin-top:20px!important;padding-top:14px!important;
  border-top:1px solid var(--line)!important;}
.cs-tech span,.svc-feature-tags span{
  display:inline-block!important;background:none!important;border:0!important;
  border-right:1px solid var(--line)!important;border-radius:0!important;
  padding:1px 13px!important;margin:0!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:0.9px!important;
  text-transform:uppercase!important;color:var(--ink3)!important;line-height:1.45!important;}
.cs-tech span:first-child,.svc-feature-tags span:first-child{padding-left:0!important;}
.cs-tech span:last-child,.svc-feature-tags span:last-child{border-right:none!important;}

/* ---------- About: evidence, not adjectives ----------
   The section asserted quality; this makes it demonstrate it. Three numbered
   entries, each a real constraint one of our own products imposed, so the
   claim carries something a reader can check rather than take on faith. */
.abt-proof{margin-top:clamp(48px,5vw,72px);border-top:2px solid var(--ink);padding-top:clamp(28px,3vw,38px);}
.abt-proof-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:-0.6px;color:var(--ink);margin:0 0 6px;}
.abt-proof-list{margin-top:26px;}
.apf{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.5vw,34px);
  padding:26px 0;border-bottom:1px solid var(--line);}
.apf:first-child{border-top:1px solid var(--line);}
.apf-n{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:1px;color:var(--g);padding-top:2px;}
.apf-b h4{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px;font-weight:700;letter-spacing:-0.35px;color:var(--ink);margin:0 0 10px;}
.apf-b p{font-size:14.5px;line-height:1.8;color:var(--ink2);margin:0;max-width:74ch;}
.apf-t{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.apf-t a{font-size:12.5px;font-weight:700;color:var(--g);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s;}
.apf-t a:hover{border-bottom-color:var(--g);}
.apf-t span{font-size:10.5px;font-weight:700;letter-spacing:0.9px;text-transform:uppercase;
  color:var(--ink4);padding-left:14px;border-left:1px solid var(--line);}
.abt-proof-note{margin:26px 0 0;font-size:14px;line-height:1.8;color:var(--ink3);max-width:74ch;}
@media(max-width:620px){
  .apf{grid-template-columns:1fr;gap:8px;padding:22px 0;}
  .apf-n{padding-top:0;}
  .apf-t span{padding-left:0;border-left:0;}
}


footer.ft{border-top:3px solid var(--g)!important;}
.ft-meta>div{grid-template-columns:118px 1fr;}
.ft-col a small{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,0.38);
  letter-spacing:0.2px;margin-top:2px;}
.ft-col a:hover small{color:rgba(255,255,255,0.55);}
.ft-bottom-in{padding:22px clamp(24px,4vw,48px);}
.ft-place{font-size:12.5px;color:rgba(255,255,255,0.42);}
/* The record's label column was wide enough to force the office address onto
   two lines; the brand column gets a little more room and the labels less. */
.ft-in{grid-template-columns:1.95fr 1fr 1fr 1.05fr;}
.ft-meta>div{grid-template-columns:100px 1fr;}
@media(max-width:1000px){.ft-in{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr;}}

.ft-in{grid-template-columns:1.95fr 1fr 1fr 1.05fr;}
.ft-meta>div{grid-template-columns:100px 1fr;}
@media(max-width:1000px){.ft-in{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr;}}


.post-cta-in{background:none!important;border:0!important;border-radius:0!important;
  padding:0!important;text-align:left!important;}
.post-cta{max-width:800px!important;margin:52px auto 0!important;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;
  padding:12px 20px;font-size:13px;font-weight:700;text-decoration:none;border-radius:0 0 var(--r) 0;}
.skip-link:focus{left:0;outline:2px solid var(--g);outline-offset:2px;}

/* ---------- Related reading ----------
   Each post linked to one other article. Eighty-seven pieces that do not
   reference each other are eighty-seven orphans, to a reader and to a crawler. */
.rel{max-width:800px;margin:56px auto 0;padding:30px clamp(24px,4vw,48px) 0;border-top:1px solid var(--line);}
.rel-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink4);margin:0 0 20px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);}
.rel-c{display:block;padding:20px 22px 22px 0;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s;}
.rel-c:last-child{border-right:none;}
.rel-c:not(:first-child){padding-left:22px;}
.rel-c:hover .rel-t{color:var(--g);}
.rel-cat{display:block;font-size:9.5px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--ink4);margin-bottom:9px;}
.rel-t{display:block;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:14.5px;font-weight:700;line-height:1.35;letter-spacing:-0.3px;color:var(--ink);
  margin-bottom:8px;transition:color .2s;}
.rel-d{display:block;font-size:12.5px;line-height:1.6;color:var(--ink3);}
@media(max-width:820px){
  .rel-grid{grid-template-columns:1fr;}
  .rel-c{border-right:none;padding-left:0!important;padding-right:0;}
}

/* Filter chips could exceed their container at the narrowest widths. */
.blog-chips{min-width:0;max-width:100%;}
.chip{white-space:nowrap;}
@media(max-width:600px){
  .article-back,.nv-logo,.ft-mark,.rel-c,.ft-legal a{min-height:32px;}
  .article-back,.nv-logo,.ft-mark{display:inline-flex;align-items:center;}
  .article-tag,.rel-cat,.ft-col h4,.ft-meta dt{font-size:11px!important;}
  .ft-col a{padding:10px 0!important;}
  .ft-social a{min-width:38px;min-height:38px;}
}
@media(max-width:600px){
  .nv-links a,.chip{min-height:32px;display:inline-flex;align-items:center;}
  .chip{max-width:100%;}
}
/* The pull-quote was the last thing still resolving to Instrument Serif, which
   meant shipping a whole extra family for one element. */
.prose blockquote{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  font-style:normal!important;font-weight:600!important;font-size:19px!important;letter-spacing:-0.3px!important;}

/* The closing panel still carried a radial-gradient blob from the old theme,
   behind a block that no longer has a background to sit on. */
.post-cta-in::before,.post-cta::before{content:none!important;display:none!important;}

/* ---------- On this page ----------
   Eighty-seven articles, several thousand words each, and no way to see the
   shape of one before committing to it or to jump back to a section. */
.toc{margin:0 0 38px;padding:20px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.toc-h{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink4);margin-bottom:12px;}
.toc-l{list-style:none;margin:0;padding:0;counter-reset:toc;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 32px;}
.toc-l li{counter-increment:toc;}
.toc-l a{display:flex;gap:10px;padding:6px 0;text-decoration:none;
  font-size:14px;line-height:1.5;color:var(--ink2);transition:color .2s;}
.toc-l a::before{content:counter(toc,decimal-leading-zero);
  font-size:11px;font-weight:700;color:var(--ink5);flex:0 0 auto;padding-top:2px;}
.toc-l a:hover{color:var(--g);}
.toc-l a:hover::before{color:var(--g);}
@media(max-width:700px){.toc-l{grid-template-columns:1fr;}}

/* Headings become jump targets, so keep them clear of the fixed header. */
.prose h2{scroll-margin-top:88px;}

/* Article header: an arrival, not a caption. */
.article-cat{letter-spacing:1.5px!important;}
.article h1{margin-bottom:26px!important;}
.article-meta{gap:14px!important;}
.article-author-av{width:38px!important;height:38px!important;font-size:14px!important;}

/* Reading progress — the main site has one; the long-form pages did not. */
.readbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--g);z-index:1200;
  transition:width .08s linear;}
@media(max-width:600px){.toc-h{font-size:11px!important;}}
/* The byline carries a link now, so it needs to read as one. */
.article-author-d{max-width:46ch;}
.article-author-d a{color:var(--ink3);text-decoration:none;border-bottom:1px solid var(--line);}
.article-author-d a:hover{color:var(--g);border-bottom-color:var(--g);}


/* ============================================================
   HEADER — copied from site.css so the blog cannot drift from the
   rest of the site. The blog previously ran a flat link row with no
   Products menu, no dropdown panels and no mobile toggle, so moving
   from a page to an article silently lost most of the navigation.
   ============================================================ */
/* ===== NAV ===== */
#nav{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(255,255,255,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.04);transition:background 0.4s,box-shadow 0.4s,border-color 0.4s;}
#nav.scrolled{box-shadow:0 1px 14px rgba(0,0,0,0.05);}
.nv{max-width:1100px;margin:0 auto;padding:0 clamp(24px,4vw,48px);height:64px;display:flex;align-items:center;justify-content:space-between;}
.nv-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.nv-logo span{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:16px;letter-spacing:2.5px;color:var(--ink);}
.nv-links{display:flex;align-items:center;gap:24px;}
.nv-links a{font-size:13.5px;font-weight:500;color:var(--ink3);text-decoration:none;transition:color 0.3s;}
.nv-links a:hover{color:var(--g);}
.nv-cta{font-size:12.5px!important;font-weight:600!important;background:var(--g)!important;color:white!important;padding:8px 20px;border-radius:8px;transition:all 0.3s;}
.nv-cta:hover{background:var(--gd)!important;box-shadow:0 4px 16px rgba(14,165,138,0.18);transform:translateY(-1px);}
.nv-mob{display:none;background:none;border:none;cursor:pointer;padding:4px;}
@media(max-width:768px){
  .nv-links{position:fixed;top:64px;left:0;width:100%;background:rgba(255,255,255,0.99);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;align-items:stretch;gap:0;padding:0 20px;max-height:0;overflow:hidden;opacity:0;border-bottom:1px solid transparent;transition:max-height .42s cubic-bezier(0.16,1,0.3,1),opacity .3s,padding .42s;pointer-events:none;}
  .nv-links.open{max-height:420px;opacity:1;padding:8px 20px 24px;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,0.08);pointer-events:auto;}
  .nv-links a{padding:16px 4px;font-size:16px;border-bottom:1px solid var(--line2);}
  .nv-links a:last-of-type{border-bottom:none;}
  .nv-links .nv-cta{margin-top:16px;text-align:center;padding:16px!important;border-radius:11px;font-size:14.5px!important;}
  .nv-mob{display:block;}
}
/* Adaptive nav — transparent/light over dark hero, solid after scroll */
body[data-hero="dark"] #nav:not(.scrolled){background:transparent;border-bottom-color:transparent;box-shadow:none;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-logo span{color:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a{color:rgba(255,255,255,0.72);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a:hover{color:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:rgba(255,255,255,0.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,0.22);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta:hover{background:var(--g)!important;border-color:var(--g);box-shadow:none;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-mob svg{stroke:#fff;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open a:not(.nv-link-solo){color:var(--ink3)!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open a:not(.nv-link-solo):hover{color:var(--g)!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links.open .nv-cta{background:var(--g)!important;color:#fff!important;border-color:transparent;}
/* Active nav link (scroll-spy) */
.nv-links a.active{color:var(--g);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-links a.active{color:#fff;}
/* Hamburger ↔ X icon */
.nv-mob{position:relative;}
.nv-mob .ic-close{display:none;}
#nav.menu-open .nv-mob .ic-open{display:none;}
#nav.menu-open .nv-mob .ic-close{display:block;}
/* Gradient primary buttons */
.btn-p,.nv-cta{background:var(--grad)!important;background-size:170% 170%!important;box-shadow:0 2px 8px rgba(22,32,74,0.10)!important;border-color:transparent!important;}
.nv-cta:hover{background:var(--grad)!important;filter:brightness(1.06);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:rgba(255,255,255,0.12)!important;}
/* ============================================================
   ✦ PROFESSIONAL HEADER ✦
   ============================================================ */
/* Animated gradient underline on TOP-LEVEL links only (hover + active) */
.nv-item>.nv-link,.nv-links>a.nv-link{position:relative;}
.nv-item>.nv-link::after,.nv-links>a.nv-link::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--g);transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(0.16,1,0.3,1);}
.nv-item:hover>.nv-link::after,.nv-item>.nv-link.active::after,.nv-links>a.nv-link:hover::after,.nv-links>a.nv-link.active::after{transform:scaleX(1);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-item>.nv-link::after,body[data-hero="dark"] #nav:not(.scrolled) .nv-links>a.nv-link::after{background:linear-gradient(120deg,#19d3ad,#5fb0ff,#b394ff);}
/* CTA arrow */
.nv-cta{display:inline-flex;align-items:center;gap:8px;}
.nv-cta svg{transition:transform .3s;}
.nv-cta:hover svg{transform:translateX(3px);}
/* Logo refinement */
.nv-logo svg{transition:transform .35s cubic-bezier(0.16,1,0.3,1);}
.nv-logo:hover svg{transform:rotate(-8deg) scale(1.06);}
.nv-logo span{transition:letter-spacing .35s;}
@media(min-width:769px){
  #nav{transition:top .42s cubic-bezier(0.16,1,0.3,1),width .42s cubic-bezier(0.16,1,0.3,1),background .4s,box-shadow .4s,border-color .4s;}
  #nav.scrolled{top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 44px);max-width:1140px;border-radius:18px;border:1px solid rgba(120,130,200,0.1);box-shadow:0 12px 44px rgba(50,60,130,0.12);background:rgba(255,255,255,0.78);}
  #nav.scrolled .nv{height:58px;}
}
@media(max-width:768px){
  .nv-item>.nv-link::after,.nv-links>a.nv-link::after{display:none;}
}
/* ===== MEGA-MENU DROPDOWNS ===== */
.nv-item{position:relative;display:flex;align-items:center;}
.nv-link{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;color:var(--ink3);transition:color .3s;}
.nv-link:hover{color:var(--g);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-link{color:rgba(255,255,255,0.72);}
body[data-hero="dark"] #nav:not(.scrolled) .nv-link:hover{color:#fff;}
.nv-link .chev{opacity:.55;transition:transform .3s;}
.nv-item:hover .nv-link .chev{transform:rotate(180deg);}
.nv-drop{position:absolute;top:100%;left:0;margin-top:16px;transform:translateY(10px);background:#fff;border:1px solid rgba(120,130,200,0.12);border-radius:18px;box-shadow:0 28px 70px rgba(40,50,120,0.18);padding:12px;min-width:280px;opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(0.16,1,0.3,1),transform .26s cubic-bezier(0.16,1,0.3,1);z-index:1200;}
.nv-drop::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;}
/* Right-align the last item's dropdown so it opens inward, never past the right edge */
.nv-item:last-of-type .nv-drop{left:auto;right:0;}
.nv-item:hover .nv-drop{opacity:1;visibility:visible;transform:translateY(0);}
.nv-drop-wide{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:560px;}
.nv-drop-label{grid-column:1/-1;display:block;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4);padding:4px 12px 8px;}
.nv-drop-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;text-decoration:none;transition:background .2s;}
.nv-drop-row:hover{background:var(--bg2);}
.nv-drop-ic{width:38px;height:38px;border-radius:10px;background:rgba(14,165,138,0.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s;}
.nv-drop-row:hover .nv-drop-ic{background:var(--g);}
.nv-drop-row:hover .nv-drop-ic svg [stroke]{stroke:#fff;}
.nv-drop-t{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;line-height:1.2;}
.nv-drop-d{font-size:11.5px;color:var(--ink3);margin-top:3px;}
.nv-drop-tag{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--g);background:rgba(14,165,138,0.11);padding:2px 4px;border-radius:4px;}
@media(max-width:768px){
  .nv-links.open{max-height:calc(100vh - 64px);overflow-y:auto;}
  .nv-item{display:block;}
  .nv-item>.nv-link{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink4)!important;padding:16px 4px 4px;border-bottom:none!important;pointer-events:none;}
  .nv-item>.nv-link .chev{display:none;}
  .nv-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;padding:0 0 8px;margin:0;min-width:0;width:auto!important;background:transparent;display:block;}
  .nv-drop::before{display:none;}
  .nv-drop-label{display:none;}
  .nv-drop-row{padding:12px 4px;border-bottom:1px solid var(--line2);}
  .nv-drop-ic{width:36px;height:36px;}
  .nv-link-solo{display:block;font-size:16px;font-weight:600;color:var(--ink)!important;padding:16px 4px!important;margin-top:8px;border-top:1px solid var(--line);}
}
@media(max-width:768px){
  #nav,#nav.scrolled{transform:none!important;left:0!important;right:auto!important;width:100%!important;max-width:none!important;border-radius:0!important;top:0!important;transition:background .3s,box-shadow .3s!important;}
  .nv-links{left:0!important;right:0!important;width:auto!important;transform:none!important;overflow-x:hidden;}
}
/* Icon tiles: a bordered square with a teal glyph. No fills, no glow. */
.st-card-ic,.prod-icon,.tech-badge,.svc-feature-ic,.ind-ic,.proc-ic,.nv-drop-ic{
  background:var(--g-soft)!important;border:1px solid rgba(11,140,117,0.16)!important;border-radius:var(--r)!important;box-shadow:none!important;}
.st-card-ic svg [stroke],.prod-icon svg [stroke],.tech-badge svg [stroke],.svc-feature-ic svg [stroke],
.ind-ic svg [stroke],.proc-ic svg [stroke],.nv-drop-ic svg [stroke]{stroke:var(--g)!important;}
.ind-card:hover .ind-ic,.proc-step:hover .proc-ic,.nv-drop-row:hover .nv-drop-ic{background:var(--g)!important;border-color:var(--g)!important;}
.ind-card:hover .ind-ic svg [stroke],.proc-step:hover .proc-ic svg [stroke],.nv-drop-row:hover .nv-drop-ic svg [stroke]{stroke:#fff!important;}
/* ---------- Buttons: solid, square-ish, no gradient ---------- */
.btn-p,.nv-cta{background:var(--g)!important;background-image:none!important;color:#fff!important;
  border-radius:var(--r)!important;box-shadow:none!important;border:1px solid var(--g)!important;font-weight:700!important;}
.btn-p:hover,.nv-cta:hover{background:#0A7A66!important;border-color:#0A7A66!important;box-shadow:none!important;filter:none!important;}
body[data-hero="dark"] #nav:not(.scrolled) .nv-cta{background:var(--g)!important;border-color:var(--g)!important;}
.nv-item>.nv-link::after,.nv-links>a.nv-link::after{background:var(--g)!important;}
.nv-drop{border-radius:var(--r)!important;box-shadow:0 16px 44px rgba(12,30,51,0.14)!important;}
.nv-drop-tag,.tech-new{background:var(--g-soft)!important;color:var(--g)!important;border-radius:3px!important;}
/* — Icon tiles: two sizes, both on the grid.
     There were nine (36/38/42/44/46/48/50/56/66px), which is drift, not intent. — */
.st-card-ic,.prod-icon,.tech-badge,.ind-ic,.proc-ic,.why-ic,.nv-drop-ic{
  width:44px!important;height:44px!important;border-radius:var(--r)!important;flex-shrink:0;}
.st-card-ic svg,.prod-icon svg,.tech-badge svg,.ind-ic svg,.proc-ic svg,.why-ic svg,.nv-drop-ic svg{
  width:20px!important;height:20px!important;}
@media(max-width:768px){
  .nv-links{display:none!important;}
  .nv-links.open{
    display:flex!important;
    position:fixed!important;top:64px!important;left:0!important;right:0!important;
    max-height:none!important;height:auto!important;
    max-height:calc(100vh - 64px)!important;
    overflow-y:auto!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    z-index:1400!important;
    padding:8px 20px 24px!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 20px 44px rgba(12,30,51,0.16)!important;
    transition:none!important;
  }
  /* the bar itself turns solid so the logo and close icon stay legible */
  #nav.menu-open{background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;}
  #nav.menu-open .nv-logo span{color:var(--ink)!important;}
  #nav.menu-open .nv-mob svg{stroke:var(--ink)!important;}
}
@media(max-width:600px){
  .cs-link,.ct-mail,.nv-logo,.phero-back,.ft-mark,.wr-more,.abt-v a,.ft-legal a{
    min-height:32px;display:inline-flex;align-items:center;}
}
@media(max-width:600px){
  .ct-card-k,.tl-deliver span,.wr-meta,.office-chip,.nv-drop-label,
  .about-brand-tag,.office-figcap-d{font-size:11px!important;}
  .lg-back,.nv-links a:not(.nv-drop-row),.nv-link{min-height:32px;display:inline-flex;align-items:center;}
  .nv-drop-row{display:flex!important;width:100%;min-height:44px;}
}



/* ---------- Top-level destinations in the mobile menu ----------
   Work, Engineering and Blog are not members of a group — they are peers of
   the group LABELS above them. Giving them the icon-and-description row used
   inside Services, Products and Company made them read as items belonging to
   a group that isn't there. They get weight instead: destination-sized type,
   a chevron to say this navigates, and a clear rule separating them from the
   grouped section. */
@media(max-width:768px){
  body #nav .nv-links a.nv-link-solo{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
    font-size:17px!important;font-weight:700!important;letter-spacing:-0.3px!important;
    text-transform:none!important;color:var(--ink)!important;
    padding:19px 4px!important;margin-top:0!important;
    border-top:none!important;border-bottom:1px solid var(--line)!important;}
  /* one heavier rule marks where the grouped section ends */
  body #nav .nv-links a.nv-link-solo:first-of-type{
    margin-top:14px!important;border-top:2px solid var(--ink)!important;}
  body #nav .nv-links a.nv-link-solo::after{
    /* .nv-link-solo also carries .nv-link, whose ::after is the desktop
       underline: absolutely positioned, teal, forced with !important. Every
       one of those has to be undone before it can be a chevron. */
    content:'';display:block;position:static!important;
    width:7px;height:7px;flex:0 0 auto;
    background:none!important;border-radius:0!important;
    border-top:none;border-left:none;
    border-right:2px solid var(--ink4)!important;
    border-bottom:2px solid var(--ink4)!important;
    transform:rotate(-45deg)!important;transition:none!important;margin-right:6px;}
  body #nav .nv-links a.nv-link-solo:active{color:var(--g)!important;}
}

/* ---------- Sticky contents on wide screens ----------
   A 4,000px article in an 800px column leaves ~320px dead on each side, and
   the contents index scrolls away after the first screen — exactly when a
   reader starts needing it. On wide viewports it moves into the left margin
   and stays, with the section you are in marked. The header still spans the
   full measure so the article opens the way it did. */
@media(min-width:1180px){
  /* the enterprise block caps .article at 800px with !important; the grid
     needs that room back or the prose column ends up narrower than it was */
  .article{display:grid;grid-template-columns:208px minmax(0,74ch);
    column-gap:64px;justify-content:center;
    max-width:none!important;align-items:start;}
  /* everything the reader reads shares one left edge; the index sits beside
     it in the margin rather than above it */
  .article-back,.article-cat,.article h1,.article-meta,
  .prose,.article-tags{grid-column:2;min-width:0;}
  .toc{grid-column:1;grid-row:1/-1;position:sticky;top:92px;align-self:start;
    margin:0;padding:0 0 0 16px;border:0;border-left:1px solid var(--line);}
  .toc-h{margin-bottom:10px;}
  .toc-l{grid-template-columns:1fr;gap:0;}
  .toc-l a{padding:5px 0;font-size:13px;line-height:1.4;color:var(--ink3);}
  .toc-l a::before{font-size:10px;}
  /* the section you are currently reading */
  .toc-l a.is-here{color:var(--ink);font-weight:700;}
  .toc-l a.is-here::before{color:var(--g);}
}
/* The closing panel is full-bleed inside .article's own padding on desktop,
   but below 700px .article's padding collapses and the panel ran edge to edge. */
@media(max-width:700px){
  .post-cta{padding-left:clamp(20px,5vw,24px)!important;padding-right:clamp(20px,5vw,24px)!important;}
  .rel{padding-left:clamp(20px,5vw,24px)!important;padding-right:clamp(20px,5vw,24px)!important;}
}

/* ---------- Comparison tables ----------
   A three-column table cannot shrink below its narrowest column, so on a phone
   it pushed past the article and out of the viewport. It scrolls on its own
   axis now instead of dragging the page with it. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:26px 0;
  border:1px solid var(--line);border-radius:var(--r);}
.table-scroll table{margin:0!important;border:0!important;border-radius:0!important;
  min-width:520px;width:100%;}
.table-scroll th,.table-scroll td{white-space:normal;}
@media(max-width:700px){
  .table-scroll{border-left:0;border-right:0;border-radius:0;}
}