/*
Theme Name: NestaConnect
Theme URI: https://nesta-connect.com
Author: NestaConnect
Description: Modern editorial platform for enterprise integration engineers.
Version: 9.8.0
Requires at least: 5.8
Requires PHP: 7.4
License: Proprietary
Text Domain: nestaconnect
*/
/* ═══════════════════════════════════════════════════════════
v9.0.0 — SPRINT 1 — Light theme design system + chrome
Implements: top bar, header, hero, trust bar, footer
Editorial credibility (InfoQ-style) + developer utility +
SaaS clarity. Mobile-first, accessible, fast.
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
1. DESIGN TOKENS — LIGHT THEME
═══════════════════════════════════════════════════════════ */
:root{
--c-blue-50: #EFF6FF;
--c-blue-100: #DBEAFE;
--c-blue-200: #BFDBFE;
--c-blue-500: #3B82F6;
--c-blue-600: #2563EB;
--c-blue-700: #1D4ED8;
--c-blue-900: #1E3A8A;
--c-navy: #0B1B3B;
--c-navy-2: #0A1929;
--c-amber: #F59E0B;
--c-amber-50: #FFFBEB;
--c-green: #10B981;
--c-red: #EF4444;
--bg-0: #FFFFFF;
--bg-1: #F8FAFC;
--bg-2: #F1F5F9;
--bg-3: #E2E8F0;
--bg-card: #FFFFFF;
--bg-hero: linear-gradient(180deg,#EFF6FF 0%,#FFFFFF 100%);
--tx-0: #0F172A;
--tx-1: #334155;
--tx-2: #64748B;
--tx-3: #94A3B8;
--tx-inv: #FFFFFF;
--bd-0: #F1F5F9;
--bd-1: #E2E8F0;
--bd-2: #CBD5E1;
--bd-3: #94A3B8;
--sh-xs: 0 1px 2px rgba(15,23,42,.04);
--sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--sh-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
--sh-lg: 0 10px 30px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
--f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--f-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
--f-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
--r-xs: 4px; --r-sm: 6px; --r-md: 10px;
--r-lg: 14px; --r-xl: 20px; --r-2xl: 24px;
--max-w: 1240px;
--max-prose: 720px;
--nav-h: 72px;
--topbar-h: 40px;
--sidebar-w: 280px;
--t-1: .15s ease;
--t-2: .25s ease;
--t-3: .4s cubic-bezier(.4,0,.2,1);
}
/* ═══════════════════════════════════════════════════════════
2. RESET & BASE
═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:1rem;line-height:1.65;
color:var(--tx-1);background:var(--bg-0);min-height:100vh;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
padding-top:calc(var(--nav-h) + var(--topbar-h))}
body.nc-no-topbar{padding-top:var(--nav-h)}
::selection{background:rgba(37,99,235,.18);color:var(--tx-0)}
img,svg,video{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer}
a{color:var(--c-blue-600);text-decoration:none;transition:color var(--t-1)}
a:hover{color:var(--c-blue-700)}
h1,h2,h3,h4,h5,h6{font-family:var(--f-display);color:var(--tx-0);
margin:0;line-height:1.2;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1em}
hr{border:none;border-top:1px solid var(--bd-1);margin:var(--s-6) 0}
.skip-link{position:absolute;left:-9999px;top:1rem;background:var(--c-blue-600);
color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);z-index:9999;font-weight:600}
.skip-link:focus{left:1rem}
:focus-visible{outline:2px solid var(--c-blue-600);outline-offset:3px;border-radius:3px}
/* ═══════════════════════════════════════════════════════════
3. LAYOUT PRIMITIVES
═══════════════════════════════════════════════════════════ */
.nc-container{width:100%;max-width:var(--max-w);
margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.nc-section{padding:var(--s-8) 0}
.nc-section-sm{padding:var(--s-6) 0}
.nc-section-lg{padding:var(--s-9) 0}
.nc-section-head{display:flex;align-items:flex-end;
justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.nc-section-title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800}
.nc-section-link{font-size:.92rem;font-weight:600;color:var(--c-blue-600);
display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nc-section-link:hover{color:var(--c-blue-700);gap:8px}
.nc-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.nc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.nc-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
/* ═══════════════════════════════════════════════════════════
4. BUTTONS
═══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;
gap:8px;padding:.7rem 1.25rem;border-radius:var(--r-md);
font-weight:600;font-size:.92rem;line-height:1;
border:1px solid transparent;text-decoration:none;cursor:pointer;
transition:all var(--t-1);white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--c-blue-600);color:#fff;border-color:var(--c-blue-600)}
.btn-primary:hover{background:var(--c-blue-700);border-color:var(--c-blue-700);color:#fff;
transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn-secondary{background:var(--bg-0);color:var(--tx-0);border-color:var(--bd-2)}
.btn-secondary:hover{background:var(--bg-1);border-color:var(--bd-3);color:var(--tx-0)}
.btn-outline{background:transparent;color:var(--c-blue-600);border-color:var(--c-blue-600)}
.btn-outline:hover{background:var(--c-blue-50);color:var(--c-blue-700)}
.btn-ghost{background:transparent;color:var(--tx-1);border-color:transparent}
.btn-ghost:hover{background:var(--bg-1);color:var(--tx-0)}
.btn-amber{background:var(--c-amber);color:#fff;border-color:var(--c-amber)}
.btn-amber:hover{background:#D97706;border-color:#D97706;color:#fff;transform:translateY(-1px)}
.btn-sm{padding:.5rem .9rem;font-size:.85rem}
.btn-lg{padding:.9rem 1.6rem;font-size:1rem}
.btn-block{display:flex;width:100%}
.btn svg{width:14px;height:14px}
/* ═══════════════════════════════════════════════════════════
5. BADGES & CATEGORY PILLS
═══════════════════════════════════════════════════════════ */
.nc-badge{display:inline-flex;align-items:center;gap:5px;
padding:.22rem .65rem;border-radius:99px;
font-size:.7rem;font-weight:600;letter-spacing:.02em;
text-transform:uppercase;line-height:1.4;border:1px solid transparent}
.nc-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.cat-mulesoft{background:var(--c-blue-50);color:var(--c-blue-700);border-color:var(--c-blue-100)}
.cat-dataweave{background:#F0F9FF;color:#0369A1;border-color:#BAE6FD}
.cat-flex-gateway{background:#EFF6FF;color:#1E40AF;border-color:#BFDBFE}
.cat-kafka{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.cat-kubernetes{background:#E0E7FF;color:#3730A3;border-color:#C7D2FE}
.cat-aws{background:#FFEDD5;color:#9A3412;border-color:#FED7AA}
.cat-ai{background:#F5F3FF;color:#5B21B6;border-color:#DDD6FE}
.cat-default,.cat-uncategorized{background:var(--bg-2);color:var(--tx-1);border-color:var(--bd-1)}
/* ═══════════════════════════════════════════════════════════
6. TOP ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════════ */
.nc-topbar{position:fixed;top:0;left:0;right:0;z-index:1001;
height:var(--topbar-h);background:var(--c-navy);color:rgba(255,255,255,.85);
font-size:.82rem;display:flex;align-items:center;
border-bottom:1px solid rgba(255,255,255,.06)}
.nc-topbar-inner{width:100%;max-width:var(--max-w);margin-inline:auto;
padding-inline:clamp(1rem,3vw,2rem);
display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.nc-topbar-msg{display:inline-flex;align-items:center;gap:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-topbar-msg-icon{flex-shrink:0;font-size:.95rem}
.nc-topbar-actions{display:flex;align-items:center;gap:var(--s-4);flex-shrink:0}
.nc-topbar-link{color:rgba(255,255,255,.85);font-weight:500;font-size:.82rem}
.nc-topbar-link:hover{color:#fff}
.nc-topbar-sep{width:1px;height:14px;background:rgba(255,255,255,.15)}
.nc-topbar-social{display:flex;align-items:center;gap:var(--s-3)}
.nc-topbar-social a{color:rgba(255,255,255,.7);display:flex;line-height:0;transition:color var(--t-1)}
.nc-topbar-social a:hover{color:#fff}
.nc-topbar-social svg{width:15px;height:15px}
/* ═══════════════════════════════════════════════════════════
7. HEADER / NAV
═══════════════════════════════════════════════════════════ */
#nc-nav{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1000;
height:var(--nav-h);background:var(--bg-0);
border-bottom:1px solid var(--bd-0);transition:box-shadow var(--t-2),border-color var(--t-2)}
body.nc-no-topbar #nc-nav{top:0}
#nc-nav.nc-nav-scrolled{box-shadow:var(--sh-sm);border-bottom-color:var(--bd-1)}
.nc-nav-inner{display:flex;align-items:center;gap:var(--s-5);height:100%;
max-width:var(--max-w);margin-inline:auto;
padding-inline:clamp(1rem,3vw,2rem)}
.nc-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;
text-decoration:none;color:var(--tx-0)}
.nc-logo-mark{width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,var(--c-blue-500),var(--c-blue-700));
display:flex;align-items:center;justify-content:center;color:#fff;
font-family:var(--f-display);font-weight:800;font-size:1.15rem;
box-shadow:0 2px 6px rgba(37,99,235,.25)}
.nc-logo-text{display:flex;flex-direction:column;line-height:1}
.nc-logo-name{font-family:var(--f-display);font-weight:800;font-size:1.05rem;
color:var(--tx-0);letter-spacing:-.01em}
.nc-logo-name strong{color:var(--c-blue-600);font-weight:800}
.nc-logo-tag{font-size:.65rem;color:var(--tx-2);font-weight:500;
margin-top:3px;letter-spacing:.02em}
.nc-nav-links{display:flex;align-items:center;gap:var(--s-2);margin-left:var(--s-3)}
.nc-nav-link{padding:.5rem .9rem;border-radius:var(--r-sm);
font-size:.92rem;font-weight:500;color:var(--tx-1);transition:all var(--t-1);
display:inline-flex;align-items:center;gap:4px}
.nc-nav-link:hover{color:var(--tx-0);background:var(--bg-1)}
.nc-nav-link.nc-current,.nc-nav-link[aria-current="page"]{color:var(--c-blue-600);font-weight:600}
.nc-nav-link svg.chev{width:11px;height:11px;opacity:.6}
.nc-nav-search{flex:1;max-width:340px;position:relative;display:flex;align-items:center}
.nc-nav-search-input{width:100%;padding:.55rem .85rem .55rem 2.3rem;
background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-md);font-size:.88rem;color:var(--tx-0);
outline:none;transition:all var(--t-1)}
.nc-nav-search-input::placeholder{color:var(--tx-3)}
.nc-nav-search-input:focus{background:var(--bg-0);border-color:var(--c-blue-500);
box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.nc-nav-search-icon{position:absolute;left:.85rem;color:var(--tx-3);pointer-events:none}
.nc-nav-search-icon svg{width:15px;height:15px}
.nc-nav-actions{display:flex;align-items:center;gap:var(--s-3);margin-left:auto;flex-shrink:0}
.nc-nav-signin{font-size:.92rem;font-weight:500;color:var(--tx-1)}
.nc-nav-signin:hover{color:var(--tx-0)}
.nc-hamburger{display:none;width:42px;height:42px;border-radius:var(--r-sm);
background:transparent;border:1px solid var(--bd-1);
align-items:center;justify-content:center;flex-direction:column;gap:5px;
cursor:pointer;transition:all var(--t-1)}
.nc-hamburger:hover{background:var(--bg-1)}
.nc-hamburger span{width:18px;height:2px;background:var(--tx-0);
border-radius:2px;transition:transform var(--t-2),opacity var(--t-2)}
.nc-hamburger.nc-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nc-hamburger.nc-open span:nth-child(2){opacity:0}
.nc-hamburger.nc-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ═══════════════════════════════════════════════════════════
8. MOBILE NAV DRAWER
═══════════════════════════════════════════════════════════ */
.nc-mobile-nav{position:fixed;top:calc(var(--nav-h) + var(--topbar-h));
left:0;right:0;bottom:0;background:var(--bg-0);z-index:999;
transform:translateX(100%);transition:transform var(--t-3);
overflow-y:auto;padding:var(--s-5);display:none;flex-direction:column;gap:var(--s-3)}
body.nc-no-topbar .nc-mobile-nav{top:var(--nav-h)}
.nc-mobile-nav.nc-open{transform:translateX(0)}
.nc-mobile-nav-search{display:flex;align-items:center;gap:8px;
padding:.65rem 1rem;background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-md);margin-bottom:var(--s-3)}
.nc-mobile-nav-search input{flex:1;border:none;background:transparent;
outline:none;font-size:.95rem;color:var(--tx-0)}
.nc-mobile-nav-link{padding:.85rem 1rem;border-radius:var(--r-md);
font-size:1.05rem;font-weight:600;color:var(--tx-0);
border:1px solid var(--bd-1);background:var(--bg-0);
display:flex;align-items:center;justify-content:space-between}
.nc-mobile-nav-link:hover{background:var(--bg-1)}
.nc-mobile-nav-actions{margin-top:auto;padding-top:var(--s-4);
border-top:1px solid var(--bd-1);display:flex;flex-direction:column;gap:var(--s-2)}
/* ═══════════════════════════════════════════════════════════
9. HOMEPAGE HERO (Sprint 1)
═══════════════════════════════════════════════════════════ */
.nc-hero{position:relative;padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,6vw,5rem);
background:var(--bg-hero);overflow:hidden}
.nc-hero::before{content:'';position:absolute;inset:0;
background-image:
radial-gradient(circle at 20% 30%,rgba(59,130,246,.06) 0%,transparent 50%),
radial-gradient(circle at 85% 70%,rgba(37,99,235,.05) 0%,transparent 50%);
pointer-events:none}
.nc-hero-inner{position:relative;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(2rem,4vw,4rem);align-items:center}
.nc-hero-left{max-width:560px}
.nc-hero-eyebrow{display:inline-block;font-family:var(--f-mono);
font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--c-blue-600);margin-bottom:var(--s-4)}
.nc-hero-title{font-family:var(--f-display);font-weight:800;
font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.1;
color:var(--tx-0);letter-spacing:-.025em;margin-bottom:var(--s-5)}
.nc-hero-sub{font-size:1.08rem;line-height:1.7;color:var(--tx-1);
margin-bottom:var(--s-6);max-width:520px}
.nc-hero-ctas{display:flex;gap:var(--s-3);flex-wrap:wrap}
.nc-hero-ctas .btn{padding:.85rem 1.6rem;font-size:.95rem}
.nc-hero-right{position:relative;display:flex;align-items:center;
justify-content:center;min-height:380px}
.nc-hex-stage{position:relative;width:100%;max-width:480px;aspect-ratio:1}
.nc-hex-stage svg{width:100%;height:100%;display:block}
@media(max-width:900px){
.nc-hero-inner{grid-template-columns:1fr}
.nc-hero-right{order:-1;min-height:280px;max-height:340px}
.nc-hex-stage{max-width:300px}
}
/* ═══════════════════════════════════════════════════════════
10. TRUST BAR (Sprint 1)
═══════════════════════════════════════════════════════════ */
.nc-trust-strip{background:var(--bg-0);padding:0 0 var(--s-7)}
.nc-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-lg);padding:var(--s-4)}
.nc-trust-card{display:flex;align-items:flex-start;gap:var(--s-3);
padding:var(--s-3);border-radius:var(--r-md);transition:background var(--t-2)}
.nc-trust-card:hover{background:var(--bg-0)}
.nc-trust-icon{width:42px;height:42px;border-radius:var(--r-md);
background:var(--c-blue-50);color:var(--c-blue-600);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-trust-icon svg{width:20px;height:20px}
.nc-trust-text strong{display:block;font-family:var(--f-display);
font-weight:700;font-size:.95rem;color:var(--tx-0);margin-bottom:3px}
.nc-trust-text span{font-size:.82rem;color:var(--tx-2);line-height:1.5}
@media(max-width:900px){.nc-trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nc-trust-grid{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════════════════════
11. FOOTER (Sprint 1)
═══════════════════════════════════════════════════════════ */
.nc-footer{background:var(--c-navy);color:rgba(255,255,255,.7);
padding:var(--s-8) 0 var(--s-5);margin-top:var(--s-8)}
.nc-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:var(--s-6);margin-bottom:var(--s-7)}
.nc-footer-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3);text-decoration:none}
.nc-footer-brand-logo .nc-logo-mark{width:36px;height:36px;font-size:1rem;background:#fff;color:var(--c-blue-600);box-shadow:none}
.nc-footer-brand-logo .nc-logo-name{color:#fff;font-size:1rem}
.nc-footer-brand-logo .nc-logo-name strong{color:var(--c-blue-500)}
.nc-footer-brand-logo .nc-logo-tag{color:rgba(255,255,255,.5)}
.nc-footer-brand-desc{font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.65);
margin-bottom:var(--s-4);max-width:300px}
.nc-footer-social{display:flex;align-items:center;gap:var(--s-3)}
.nc-footer-social a{width:34px;height:34px;border-radius:var(--r-sm);
background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;transition:all var(--t-1)}
.nc-footer-social a:hover{background:var(--c-blue-600);color:#fff}
.nc-footer-social svg{width:15px;height:15px}
.nc-footer-col-title{font-family:var(--f-display);font-size:.85rem;
font-weight:700;color:#fff;margin-bottom:var(--s-4);
text-transform:uppercase;letter-spacing:.06em}
.nc-footer-col-list{list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:var(--s-2)}
.nc-footer-col-list a{color:rgba(255,255,255,.65);font-size:.88rem;transition:color var(--t-1)}
.nc-footer-col-list a:hover{color:#fff}
.nc-footer-bar{padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.08);
display:flex;justify-content:space-between;align-items:center;
font-size:.82rem;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:var(--s-3)}
.nc-footer-bar a{color:rgba(255,255,255,.65)}
.nc-footer-bar a:hover{color:#fff}
@media(max-width:900px){
.nc-footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}
}
@media(max-width:560px){
.nc-footer-grid{grid-template-columns:1fr}
.nc-footer-bar{flex-direction:column;text-align:center}
}
/* ═══════════════════════════════════════════════════════════
12. CARDS (Sprint 2 will refine featured/recent)
═══════════════════════════════════════════════════════════ */
.nc-card{display:flex;flex-direction:column;background:var(--bg-card);
border:1px solid var(--bd-1);border-radius:var(--r-lg);overflow:hidden;
text-decoration:none;color:inherit;transition:all var(--t-2);height:100%}
.nc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);
border-color:var(--bd-2);color:inherit}
.nc-card-img{position:relative;aspect-ratio:16/9;overflow:hidden;
background:var(--bg-2);flex-shrink:0}
.nc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-3)}
.nc-card:hover .nc-card-img img{transform:scale(1.04)}
.nc-card-img-placeholder{width:100%;height:100%;display:flex;
align-items:center;justify-content:center;background:var(--bg-2);color:var(--tx-3)}
.nc-card-body{display:flex;flex-direction:column;flex:1;padding:var(--s-4) var(--s-5)}
.nc-card-cat-overlay{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2}
.nc-card-meta{font-size:.78rem;color:var(--tx-2);margin-top:var(--s-3);
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nc-card-meta .sep{color:var(--bd-2)}
.nc-card-title{font-family:var(--f-display);font-weight:700;font-size:1.1rem;
line-height:1.35;margin:var(--s-2) 0;color:var(--tx-0)}
.nc-card-excerpt{font-size:.88rem;color:var(--tx-2);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc-card-footer{display:flex;justify-content:space-between;align-items:center;
margin-top:auto;padding-top:var(--s-3)}
.nc-card-read-more{font-size:.85rem;font-weight:600;color:var(--c-blue-600)}
/* ═══════════════════════════════════════════════════════════
13. UTILITIES
═══════════════════════════════════════════════════════════ */
.nc-hidden{display:none!important}
.nc-sr-only{position:absolute;width:1px;height:1px;padding:0;
margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.nc-mt-0{margin-top:0!important}
.nc-mb-0{margin-bottom:0!important}
/* ═══════════════════════════════════════════════════════════
14. RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
.nc-grid-3{grid-template-columns:repeat(2,1fr)}
.nc-grid-4{grid-template-columns:repeat(2,1fr)}
.nc-nav-search{display:none}
}
@media(max-width:900px){
.nc-nav-links{display:none}
.nc-nav-signin{display:none}
.nc-hamburger{display:flex}
.nc-mobile-nav{display:flex}
.nc-nav-actions .btn-primary{padding:.5rem .9rem;font-size:.85rem}
}
@media(max-width:640px){
.nc-grid-2,.nc-grid-3,.nc-grid-4{grid-template-columns:1fr}
:root{--nav-h:64px;--topbar-h:36px}
.nc-topbar-msg{font-size:.75rem}
.nc-topbar-actions .nc-topbar-link,
.nc-topbar-actions .nc-topbar-sep{display:none}
}
@media print{
.nc-topbar,#nc-nav,.nc-footer{display:none}
body{padding-top:0;color:#000;background:#fff}
}
/* ═══════════════════════════════════════════════════════════
15. ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes nc-fade-up{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:none}}
@keyframes nc-pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes nc-spin{to{transform:rotate(360deg)}}
[data-reveal]{opacity:0}
[data-reveal].nc-reveal-in{animation:nc-fade-up .6s var(--t-3) forwards}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
[data-reveal]{opacity:1;transform:none}
}
/* ═══════════════════════════════════════════════════════════
16. LEGACY BRIDGE — homepage middle sections + sub-pages
These keep the site cohesive in light theme until Sprints 2-5
redesign each section.
═══════════════════════════════════════════════════════════ */
/* Magazine grid (homepage Featured + Recent) */
.nc-mag-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-5);align-items:stretch}
.nc-mag-card{display:flex;flex-direction:column;background:var(--bg-card);
border:1px solid var(--bd-1);border-radius:var(--r-lg);overflow:hidden;
text-decoration:none;color:inherit;transition:all var(--t-2);height:100%}
.nc-mag-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--bd-2)}
.nc-mag-card-img{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:16/9}
.nc-mag-card-img img{width:100%;height:100%;object-fit:cover}
.nc-mag-card-body{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.nc-mag-card-hero .nc-mag-card-body{padding:var(--s-5)}
.nc-mag-card-meta{display:flex;gap:8px;font-size:.78rem;color:var(--tx-2);align-items:center}
.nc-mag-card-meta .sep{color:var(--bd-2)}
.nc-mag-card-title{font-family:var(--f-display);font-weight:700;
font-size:1.1rem;line-height:1.35;color:var(--tx-0)}
.nc-mag-card-hero .nc-mag-card-title{font-size:1.35rem}
.nc-mag-card-excerpt{font-size:.88rem;color:var(--tx-2);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-mag-card-cta{margin-top:auto;padding-top:var(--s-3);font-size:.85rem;
font-weight:600;color:var(--c-blue-600)}
.nc-mag-col-side{display:flex;flex-direction:column;gap:var(--s-4)}
.nc-mag-col-side .nc-mag-card{flex:1}
@media(max-width:900px){.nc-mag-grid{grid-template-columns:1fr}}
/* Tools grid (homepage) */
.nc-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.nc-tool-card{display:flex;flex-direction:column;background:var(--bg-card);
border:1px solid var(--bd-1);border-radius:var(--r-lg);padding:var(--s-5);
text-decoration:none;color:inherit;transition:all var(--t-2);position:relative}
.nc-tool-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--bd-2)}
.nc-tool-card-icon{width:44px;height:44px;border-radius:var(--r-md);
background:var(--c-blue-50);color:var(--c-blue-600);
display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-3)}
.nc-tool-card-icon svg{width:22px;height:22px}
.nc-tool-card-title{font-family:var(--f-display);font-weight:700;
font-size:1rem;color:var(--tx-0);margin-bottom:var(--s-2)}
.nc-tool-card-desc{font-size:.85rem;color:var(--tx-2);line-height:1.55;flex:1}
.nc-tool-card-launch{display:inline-flex;align-items:center;gap:6px;
margin-top:var(--s-4);padding:.55rem .9rem;
background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:var(--tx-0);
width:fit-content;transition:all var(--t-1)}
.nc-tool-card:hover .nc-tool-card-launch{background:var(--c-blue-600);color:#fff;border-color:var(--c-blue-600)}
.nc-tool-card-launch svg{width:12px;height:12px}
@media(max-width:1024px){.nc-tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nc-tools-grid{grid-template-columns:1fr}}
/* Tech chips */
.nc-tech-strip{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;padding:var(--s-5) 0}
.nc-tech-chip{padding:.45rem 1rem;background:var(--bg-1);
border:1px solid var(--bd-1);border-radius:99px;
font-size:.85rem;font-weight:500;color:var(--tx-1);
display:inline-flex;align-items:center;gap:6px;
text-decoration:none;transition:all var(--t-1)}
.nc-tech-chip:hover{background:var(--c-blue-50);color:var(--c-blue-700);border-color:var(--c-blue-200)}
/* Newsletter section */
.nc-newsletter-section{background:var(--bg-1);padding:var(--s-7) 0;
border-top:1px solid var(--bd-1);border-bottom:1px solid var(--bd-1)}
.nc-newsletter-card{max-width:640px;margin:0 auto;text-align:center;padding:0 var(--s-4)}
.nc-newsletter-card h2{font-size:1.75rem;margin-bottom:var(--s-3)}
.nc-newsletter-card p{color:var(--tx-2);margin-bottom:var(--s-5)}
.nc-newsletter-form{display:flex;gap:var(--s-2);max-width:480px;margin:0 auto;flex-wrap:wrap}
.nc-newsletter-form input{flex:1;min-width:200px;padding:.75rem 1rem;
background:var(--bg-0);border:1px solid var(--bd-2);
border-radius:var(--r-md);font-size:.95rem;color:var(--tx-0);outline:none}
.nc-newsletter-form input:focus{border-color:var(--c-blue-500);
box-shadow:0 0 0 3px rgba(59,130,246,.1)}
/* Hide v8 terminal — Sprint 1 replaces with hexagon */
.nc-terminal{display:none}
/* Reading progress / back to top */
#nc-read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1002;
background:linear-gradient(90deg,var(--c-blue-500),var(--c-blue-700));
transition:width .1s linear}
#nc-top{position:fixed;bottom:var(--s-5);right:var(--s-5);
width:42px;height:42px;border-radius:50%;
background:var(--bg-0);border:1px solid var(--bd-2);color:var(--tx-1);
display:flex;align-items:center;justify-content:center;
box-shadow:var(--sh-md);opacity:0;pointer-events:none;
transition:opacity var(--t-2),transform var(--t-2);z-index:500;cursor:pointer}
#nc-top.nc-visible{opacity:1;pointer-events:all}
#nc-top:hover{background:var(--c-blue-600);color:#fff;border-color:var(--c-blue-600)}
/* GDPR */
#nc-gdpr{position:fixed;bottom:var(--s-4);left:var(--s-4);right:var(--s-4);
max-width:520px;margin:0 auto;background:var(--bg-0);
border:1px solid var(--bd-2);border-radius:var(--r-lg);
padding:var(--s-4);box-shadow:var(--sh-lg);z-index:998;
display:flex;align-items:center;gap:var(--s-3);font-size:.85rem;flex-wrap:wrap}
#nc-gdpr p{margin:0;flex:1;min-width:200px;color:var(--tx-1)}
#nc-gdpr a{color:var(--c-blue-600);text-decoration:underline}
.nc-gdpr-actions{display:flex;gap:8px;flex-shrink:0}
/* Post header */
.nc-post-header{padding:var(--s-7) 0 var(--s-5);background:var(--bg-1);border-bottom:1px solid var(--bd-1)}
.nc-post-meta-row{display:flex;align-items:center;gap:var(--s-3);
flex-wrap:wrap;font-size:.82rem;color:var(--tx-2);margin-bottom:var(--s-4)}
.nc-post-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;
line-height:1.15;letter-spacing:-.02em;color:var(--tx-0);margin-bottom:var(--s-4)}
.nc-post-subtitle{font-size:1.08rem;color:var(--tx-1);line-height:1.7;max-width:680px}
.nc-post-author-bar{display:flex;align-items:center;gap:var(--s-3);
margin-top:var(--s-4);font-size:.85rem;color:var(--tx-2)}
.nc-post-author-bar img,.nc-post-author-avatar{border-radius:50%;width:40px;height:40px}
.nc-post-author-name{color:var(--tx-0);font-weight:600}
.nc-post-author-sep{color:var(--bd-2)}
.nc-post-read-time{display:inline-flex;align-items:center;gap:4px;color:var(--tx-2)}
.nc-post-series-pill{padding:.18rem .55rem;background:var(--c-blue-50);
color:var(--c-blue-700);border:1px solid var(--c-blue-100);
border-radius:99px;font-size:.7rem;font-weight:600}
.nc-tts-btn{display:inline-flex;align-items:center;gap:6px;
padding:.35rem .8rem;background:var(--bg-0);border:1px solid var(--bd-2);
border-radius:99px;font-size:.78rem;font-weight:500;color:var(--tx-1);cursor:pointer}
.nc-tts-btn:hover{background:var(--bg-1);color:var(--c-blue-600);border-color:var(--c-blue-500)}
.nc-post-hero-img{padding:0;margin:0 0 var(--s-5)}
.nc-post-hero-img-el{width:100%;max-height:420px;object-fit:cover;
border-radius:var(--r-lg);border:1px solid var(--bd-1);box-shadow:var(--sh-sm)}
.nc-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;
gap:var(--s-6);padding:var(--s-5) 0 var(--s-8);align-items:start}
@media(max-width:1024px){.nc-post-layout{grid-template-columns:1fr}}
.nc-article{min-width:0;max-width:760px}
/* Entry content */
.nc-article .entry-content,.nc-article .nc-prose{font-size:1.02rem;line-height:1.85;color:var(--tx-1)}
.nc-article .entry-content h1{display:none}
.nc-article .entry-content h2{font-family:var(--f-display);font-weight:800;
font-size:1.6rem;line-height:1.25;color:var(--tx-0);
margin:var(--s-8) 0 var(--s-4);padding-bottom:var(--s-3);
border-bottom:1px solid var(--bd-1)}
.nc-article .entry-content h3{font-family:var(--f-display);font-weight:700;
font-size:1.25rem;color:var(--tx-0);margin:var(--s-6) 0 var(--s-3)}
.nc-article .entry-content h4{font-size:1.05rem;font-weight:700;
color:var(--c-blue-600);margin:var(--s-5) 0 var(--s-3)}
.nc-article .entry-content p{margin-bottom:1.3em;color:var(--tx-1)}
.nc-article .entry-content strong{color:var(--tx-0);font-weight:700}
.nc-article .entry-content a{color:var(--c-blue-600);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(37,99,235,.4)}
.nc-article .entry-content a:hover{color:var(--c-blue-700);text-decoration-color:var(--c-blue-700)}
.nc-article .entry-content ul,.nc-article .entry-content ol{margin:var(--s-3) 0 var(--s-4) var(--s-5);padding:0}
.nc-article .entry-content li{margin-bottom:var(--s-2);line-height:1.7;color:var(--tx-1)}
.nc-article .entry-content li::marker{color:var(--c-blue-600)}
.nc-article .entry-content blockquote{margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);
background:var(--c-blue-50);border-left:3px solid var(--c-blue-500);
border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--tx-1)}
.nc-article .entry-content blockquote p{margin:0}
.nc-article .entry-content table{width:100%;border-collapse:collapse;margin:var(--s-5) 0;
border:1px solid var(--bd-1);border-radius:var(--r-md);overflow:hidden}
.nc-article .entry-content th{background:var(--bg-1);font-weight:700;text-align:left;
padding:var(--s-3);font-size:.85rem;color:var(--tx-0)}
.nc-article .entry-content td{padding:var(--s-3);border-top:1px solid var(--bd-1);font-size:.92rem;color:var(--tx-1)}
.nc-article .entry-content img{border-radius:var(--r-md);border:1px solid var(--bd-1);margin:var(--s-5) auto}
.nc-article .entry-content hr{margin:var(--s-7) 0}
.nc-article .entry-content :not(pre)>code{font-family:var(--f-mono);font-size:.86em;
background:var(--bg-1);color:var(--c-blue-700);border:1px solid var(--bd-1);
padding:.1em .4em;border-radius:5px}
/* Legacy code-block styling — neutral defaults only. Premium styling
is applied by the .nc-markdown rules later in this file, which use
their own wrapper (.nc-code-block) and toolbar (.nc-code-toolbar). */
.nc-article .entry-content pre,.nc-article .wp-block-code{
margin:var(--s-5) 0;background:#0F172A;color:#E2E8F0;
border-radius:var(--r-md);overflow:hidden;padding:0;
box-shadow:var(--sh-sm)}
.nc-article .entry-content pre code{display:block;padding:var(--s-4) var(--s-5);
background:transparent;color:#E2E8F0;font-family:var(--f-mono);
font-size:.84rem;line-height:1.75;overflow-x:auto;border:none;border-radius:0;
white-space:pre;tab-size:2}
.nc-copy-code-btn{position:absolute;top:6px;right:8px;z-index:3;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);border-radius:6px;
color:rgba(255,255,255,.75);font-family:var(--f-mono);font-size:.7rem;
cursor:pointer;transition:all var(--t-1)}
.nc-copy-code-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.nc-copy-code-btn.nc-copied{color:var(--c-green);border-color:rgba(16,185,129,.5)}
/* Sidebar */
.nc-post-sidebar{display:flex;flex-direction:column;gap:var(--s-4)}
.nc-sticky-widget{position:sticky;top:calc(var(--nav-h) + var(--topbar-h) + var(--s-4));z-index:1}
.nc-sidebar-widget{background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-lg);padding:var(--s-4)}
.nc-toc-box{background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-lg);overflow:hidden}
.nc-toc-header{display:flex;align-items:center;gap:8px;padding:var(--s-3) var(--s-4);
background:var(--bg-1);border-bottom:1px solid var(--bd-1);
font-family:var(--f-mono);font-size:.68rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--tx-2);margin:0}
.nc-toc-list{display:flex;flex-direction:column;padding:var(--s-2);max-height:55vh;overflow-y:auto}
.nc-toc-link{display:block;padding:.4rem .7rem;font-size:.82rem;color:var(--tx-1);
border-left:2px solid transparent;text-decoration:none;line-height:1.4;transition:all var(--t-1)}
.nc-toc-link:hover{color:var(--tx-0);background:var(--bg-1);border-left-color:var(--bd-2)}
.nc-toc-link.nc-active{color:var(--c-blue-600);background:var(--c-blue-50);border-left-color:var(--c-blue-600);font-weight:600}
.nc-toc-link.nc-toc-h3{padding-left:1.5rem;font-size:.78rem;color:var(--tx-2)}
.nc-toc-empty{font-size:.78rem;color:var(--tx-3);padding:var(--s-3) var(--s-4);font-style:italic;margin:0}
.nc-sidebar-widget-title{display:flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:.68rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--tx-2);margin-bottom:var(--s-3)}
.nc-series-list{display:flex;flex-direction:column;gap:1px}
.nc-series-list-item{display:flex;align-items:flex-start;gap:8px;
padding:.5rem;border-radius:var(--r-sm);text-decoration:none;
transition:background var(--t-1);border-left:2px solid transparent}
.nc-series-list-item:hover{background:var(--bg-1)}
.nc-series-list-item.nc-active{background:var(--c-blue-50);border-left-color:var(--c-blue-600)}
.nc-series-list-num{font-family:var(--f-mono);font-size:.7rem;color:var(--tx-3);
flex-shrink:0;margin-top:1px;min-width:22px;font-weight:700}
.nc-series-list-title{font-size:.82rem;color:var(--tx-1);line-height:1.45}
.nc-series-list-item.nc-active .nc-series-list-num{color:var(--c-blue-600)}
.nc-series-list-item.nc-active .nc-series-list-title{color:var(--tx-0);font-weight:600}
.nc-sidebar-newsletter{background:linear-gradient(135deg,var(--c-blue-50),#fff)}
.nc-sidebar-newsletter p{font-size:.82rem;color:var(--tx-2);line-height:1.6;margin:.5rem 0 var(--s-3)}
.nc-sidebar-nl-form{display:flex;flex-direction:column;gap:var(--s-2)}
.nc-sidebar-nl-form input{padding:.6rem .85rem;background:var(--bg-0);
border:1px solid var(--bd-2);border-radius:var(--r-sm);font-size:.85rem;color:var(--tx-0);outline:none}
.nc-sidebar-nl-form input:focus{border-color:var(--c-blue-500)}
.nc-post-tags{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--bd-1);
display:flex;flex-wrap:wrap;gap:6px}
.nc-tag-pill{padding:.3rem .75rem;background:var(--bg-1);
color:var(--tx-1);font-size:.78rem;font-weight:500;
border:1px solid var(--bd-1);border-radius:99px;text-decoration:none;transition:all var(--t-1)}
.nc-tag-pill:hover{background:var(--c-blue-50);color:var(--c-blue-700);border-color:var(--c-blue-100)}
.nc-share-bar{display:flex;align-items:center;gap:var(--s-3);
margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--bd-1)}
.nc-share-label{font-size:.82rem;color:var(--tx-2);font-weight:600}
.nc-share-links{display:flex;gap:8px}
.nc-share-btn{display:inline-flex;align-items:center;gap:6px;
padding:.45rem .85rem;background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-sm);font-size:.8rem;font-weight:500;color:var(--tx-1);
cursor:pointer;text-decoration:none;transition:all var(--t-1)}
.nc-share-btn:hover{background:var(--c-blue-50);color:var(--c-blue-700);border-color:var(--c-blue-100)}
.nc-series-nav{margin:var(--s-7) 0 var(--s-5);background:var(--bg-1);
border:1px solid var(--bd-1);border-radius:var(--r-lg);padding:var(--s-4)}
.nc-series-nav-header{display:flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:.7rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--tx-2);margin-bottom:var(--s-3)}
.nc-series-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.nc-series-nav-item{display:flex;flex-direction:column;gap:4px;padding:var(--s-3);
background:var(--bg-0);border:1px solid var(--bd-1);border-radius:var(--r-md);
text-decoration:none;transition:all var(--t-1)}
.nc-series-nav-item:hover{border-color:var(--c-blue-500);background:var(--c-blue-50)}
.nc-series-nav-dir{font-size:.72rem;font-weight:600;color:var(--c-blue-600);text-transform:uppercase;letter-spacing:.05em}
.nc-series-nav-title{font-size:.88rem;font-weight:600;color:var(--tx-0);line-height:1.35}
.nc-series-nav-next{text-align:right}
@media(max-width:600px){.nc-series-nav-links{grid-template-columns:1fr}.nc-series-nav-next{text-align:left}}
.nc-related-section{padding:var(--s-8) 0;background:var(--bg-1);border-top:1px solid var(--bd-1)}
.nc-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media(max-width:1024px){.nc-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nc-related-grid{grid-template-columns:1fr}}
.nc-tts-panel{position:fixed;bottom:var(--s-4);left:50%;transform:translateX(-50%);
background:var(--bg-0);border:1px solid var(--bd-2);border-radius:var(--r-xl);
box-shadow:var(--sh-lg);z-index:900;min-width:280px}
.nc-tts-inner{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);flex-wrap:wrap}
#nc-tts-status{font-family:var(--f-mono);font-size:.7rem;color:var(--tx-2);flex:1}
.nc-tts-controls{display:flex;gap:6px}
.nc-tts-ctrl{width:30px;height:30px;border-radius:50%;border:1px solid var(--bd-1);
background:var(--bg-1);color:var(--tx-1);cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:all var(--t-1)}
.nc-tts-ctrl:hover{background:var(--c-blue-50);color:var(--c-blue-600)}
/* Page heroes */
.nc-page-hero,.nc-archive-header,.nc-tool-hero,.nc-search-hero,.nc-about-hero{
padding:var(--s-7) 0 var(--s-5);background:var(--bg-1);border-bottom:1px solid var(--bd-1);margin-bottom:var(--s-5)}
.nc-page-hero h1,.nc-archive-header h1,.nc-tool-hero h1,.nc-search-hero h1,.nc-about-hero h1{
font-family:var(--f-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;color:var(--tx-0)}
.nc-archive-desc{color:var(--tx-2);font-size:1rem;line-height:1.65;max-width:620px;margin-top:var(--s-3)}
.nc-archive-layout{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--s-6);align-items:start}
@media(max-width:1024px){.nc-archive-layout{grid-template-columns:1fr}}
/* 404 */
.nc-404{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:var(--s-7) var(--s-4);gap:var(--s-4)}
.nc-404-code{font-family:var(--f-display);font-size:clamp(5rem,12vw,9rem);font-weight:900;
line-height:1;background:linear-gradient(135deg,var(--c-blue-500),var(--c-blue-700));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}
/* Pagination */
.nav-links{display:flex;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-5) 0;justify-content:center}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 var(--s-3);border-radius:var(--r-sm);
background:var(--bg-1);color:var(--tx-1);font-size:.875rem;
text-decoration:none;border:1px solid var(--bd-1);transition:all var(--t-1)}
.page-numbers:hover,.page-numbers.current{background:var(--c-blue-600);color:#fff;border-color:var(--c-blue-600)}
/* Search overlay */
.nc-search-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2000;
display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;
opacity:0;pointer-events:none;transition:opacity var(--t-2)}
.nc-search-overlay.nc-open{opacity:1;pointer-events:all}
.nc-search-box{width:90%;max-width:600px;background:var(--bg-0);
border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden}
.nc-search-input{width:100%;padding:1rem 1.25rem;border:none;
font-size:1.05rem;color:var(--tx-0);outline:none;background:transparent}
.nc-search-results{max-height:60vh;overflow-y:auto;border-top:1px solid var(--bd-1)}
.nc-search-result-item{display:block;padding:var(--s-3) var(--s-4);
border-bottom:1px solid var(--bd-0);text-decoration:none;color:inherit;transition:background var(--t-1)}
.nc-search-result-item:hover,.nc-search-result-item.nc-active-result{background:var(--bg-1)}
.nc-search-hint{padding:.5rem var(--s-4);font-size:.72rem;color:var(--tx-3);
background:var(--bg-1);border-top:1px solid var(--bd-1);font-family:var(--f-mono)}
/* Forms */
.nc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:640px){.nc-form-row{grid-template-columns:1fr}}
.nc-contact-form input,.nc-contact-form textarea,.nc-contact-form select,
input[type="text"],input[type="email"],textarea,select{
width:100%;padding:.7rem .9rem;background:var(--bg-0);
border:1px solid var(--bd-2);border-radius:var(--r-md);font-size:.92rem;color:var(--tx-0);outline:none;font-family:inherit}
input:focus,textarea:focus,select:focus{
border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.08)}
@media(max-width:560px){
.nc-section{padding:var(--s-6) 0}
.nc-hero{padding:var(--s-6) 0}
}
/* ═══════════════════════════════════════════════════════════
v9.0.0 — SPRINT 2 — Featured Articles, Tools, Topics
═══════════════════════════════════════════════════════════ */
/* ── Featured Articles — 3-column grid ─────────────────────── */
.nc-articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media(max-width:1024px){.nc-articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nc-articles-grid{grid-template-columns:1fr}}
.nc-article-card{display:flex;flex-direction:column;background:var(--bg-card);
border:1px solid var(--bd-1);border-radius:var(--r-lg);overflow:hidden;
text-decoration:none;color:inherit;transition:all var(--t-2);height:100%}
.nc-article-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);
border-color:var(--bd-2);color:inherit}
.nc-article-card-img{position:relative;aspect-ratio:16/9;overflow:hidden;
background:var(--bg-2);flex-shrink:0}
.nc-article-card-img img{width:100%;height:100%;object-fit:cover;
transition:transform var(--t-3)}
.nc-article-card:hover .nc-article-card-img img{transform:scale(1.04)}
.nc-article-card-img-placeholder{width:100%;height:100%;display:flex;
align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--bg-2),var(--bg-3));color:var(--tx-3)}
.nc-article-card-cat{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2;
background:rgba(255,255,255,.95)!important;backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);box-shadow:var(--sh-sm)}
.nc-article-card-body{display:flex;flex-direction:column;flex:1;
padding:var(--s-4) var(--s-5) var(--s-4);gap:var(--s-3)}
.nc-article-card-title{font-family:var(--f-display);font-weight:700;
font-size:1.15rem;line-height:1.35;color:var(--tx-0);margin:0;letter-spacing:-.01em}
.nc-article-card:hover .nc-article-card-title{color:var(--c-blue-700)}
.nc-article-card-excerpt{font-size:.88rem;color:var(--tx-2);line-height:1.6;
margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-article-card-footer{display:flex;align-items:center;gap:8px;
margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--bd-0)}
.nc-article-card-avatar{width:28px;height:28px;border-radius:50%;
border:1px solid var(--bd-1);flex-shrink:0}
.nc-article-card-author{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nc-article-card-author-name{font-size:.8rem;font-weight:600;color:var(--tx-0);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-article-card-meta{font-size:.72rem;color:var(--tx-2);
display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.nc-article-card-meta .sep{color:var(--bd-2)}
/* ── Developer Tools — 4-column simplified ─────────────────── */
.nc-tools-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media(max-width:1024px){.nc-tools-grid-v2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nc-tools-grid-v2{grid-template-columns:1fr}}
.nc-tool-card-v2{display:flex;flex-direction:column;background:var(--bg-card);
border:1px solid var(--bd-1);border-radius:var(--r-lg);padding:var(--s-5);
text-decoration:none;color:inherit;transition:all var(--t-2);height:100%;gap:var(--s-3)}
.nc-tool-card-v2:hover{transform:translateY(-3px);box-shadow:var(--sh-md);
border-color:var(--c-blue-200);color:inherit}
.nc-tool-card-v2-icon{width:44px;height:44px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-tool-card-v2-icon[data-tone="blue"] {background:var(--c-blue-50);color:var(--c-blue-600)}
.nc-tool-card-v2-icon[data-tone="green"] {background:#ECFDF5;color:#059669}
.nc-tool-card-v2-icon[data-tone="red"] {background:#FEF2F2;color:#DC2626}
.nc-tool-card-v2-icon[data-tone="purple"] {background:#F5F3FF;color:#7C3AED}
.nc-tool-card-v2-icon[data-tone="amber"] {background:var(--c-amber-50);color:#D97706}
.nc-tool-card-v2-title{font-family:var(--f-display);font-weight:700;
font-size:1rem;color:var(--tx-0);margin:0;line-height:1.3;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nc-pill-soon{font-size:.6rem;font-weight:600;
padding:.1rem .45rem;border-radius:99px;
background:var(--c-amber-50);color:#92400E;
border:1px solid #FDE68A;text-transform:uppercase;letter-spacing:.05em}
.nc-tool-card-v2-desc{font-size:.85rem;color:var(--tx-2);line-height:1.6;
margin:0;flex:1}
.nc-tool-card-v2-launch{display:inline-flex;align-items:center;gap:6px;
padding:.5rem .85rem;background:var(--bg-1);
border:1px solid var(--bd-1);border-radius:var(--r-sm);
font-size:.82rem;font-weight:600;color:var(--tx-0);
width:fit-content;transition:all var(--t-1);margin-top:auto}
.nc-tool-card-v2:hover .nc-tool-card-v2-launch{
background:var(--c-blue-600);color:#fff;border-color:var(--c-blue-600)}
.nc-tool-card-v2-launch svg{width:12px;height:12px}
.nc-tool-card-v2-launch-disabled{opacity:.65}
.nc-tool-soon:hover .nc-tool-card-v2-launch{
background:var(--c-amber);color:#fff;border-color:var(--c-amber)}
/* ── Popular Topics — chips with icons ─────────────────────── */
.nc-topics-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.nc-topic-chip{display:inline-flex;align-items:center;gap:8px;
padding:.55rem 1.1rem;background:var(--bg-0);
border:1px solid var(--bd-1);border-radius:99px;
font-size:.92rem;font-weight:600;color:var(--tx-0);
text-decoration:none;transition:all var(--t-1);white-space:nowrap}
.nc-topic-chip:hover{transform:translateY(-1px);
border-color:var(--tc,var(--c-blue-600));
box-shadow:var(--sh-sm);color:var(--tc,var(--c-blue-700))}
.nc-topic-chip-icon{width:24px;height:24px;border-radius:50%;
background:var(--tc-bg,var(--c-blue-50));color:var(--tc,var(--c-blue-600));
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:background var(--t-1),color var(--t-1)}
.nc-topic-chip:hover .nc-topic-chip-icon{
background:var(--tc,var(--c-blue-600));color:#fff}
.nc-topic-chip-icon svg{width:14px;height:14px}
/* Per-topic color tones */
.nc-topic-chip[data-tone="mulesoft"] {--tc:#2563EB; --tc-bg:#EFF6FF}
.nc-topic-chip[data-tone="dataweave"] {--tc:#0369A1; --tc-bg:#F0F9FF}
.nc-topic-chip[data-tone="flex-gateway"] {--tc:#1E40AF; --tc-bg:#EFF6FF}
.nc-topic-chip[data-tone="kafka"] {--tc:#92400E; --tc-bg:#FEF3C7}
.nc-topic-chip[data-tone="kubernetes"] {--tc:#3730A3; --tc-bg:#E0E7FF}
.nc-topic-chip[data-tone="aws"] {--tc:#9A3412; --tc-bg:#FFEDD5}
.nc-topic-chip[data-tone="api-design"] {--tc:#0E7490; --tc-bg:#ECFEFF}
.nc-topic-chip[data-tone="architecture"] {--tc:#5B21B6; --tc-bg:#F5F3FF}
/* Mobile — horizontal scrolling row */
@media(max-width:640px){
.nc-topics-row{flex-wrap:nowrap;overflow-x:auto;
padding-bottom:var(--s-3);margin:0 calc(-1 * clamp(1rem,3vw,2rem));
padding-inline:clamp(1rem,3vw,2rem);
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch}
.nc-topics-row::-webkit-scrollbar{display:none}
.nc-topic-chip{scroll-snap-align:start;flex-shrink:0}
}
/* End of Sprint 2 */
/* Section eyebrow (used by legacy sections, kept for Sprint 3) */
.nc-section-eyebrow{font-family:var(--f-mono);font-size:.7rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--c-blue-600);margin-bottom:6px}
/* ═══════════════════════════════════════════════════════════
v9.2.0 — SPRINT 3 — Premium block + Latest Articles + Newsletter
═══════════════════════════════════════════════════════════ */
/* ── Premium grid layout ─────────────────────────────────── */
.nc-premium-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-5);align-items:stretch}
@media(max-width:1024px){.nc-premium-grid{grid-template-columns:1fr}}
/* ── Left navy pitch card ────────────────────────────────── */
.nc-premium-pitch{position:relative;background:var(--c-navy);
border-radius:var(--r-xl);padding:var(--s-7) var(--s-6);
color:#fff;overflow:hidden;display:flex;flex-direction:column;gap:var(--s-4);
box-shadow:var(--sh-lg)}
.nc-premium-pitch::before{content:'';position:absolute;inset:0;
background:radial-gradient(circle at 90% 100%,rgba(37,99,235,.18),transparent 55%);
pointer-events:none}
.nc-premium-eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;
color:var(--c-amber)}
.nc-premium-title{position:relative;font-family:var(--f-display);font-weight:800;
font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;color:#fff;letter-spacing:-.02em;margin:0}
.nc-premium-list{position:relative;list-style:none;padding:0;margin:var(--s-3) 0 var(--s-2);
display:flex;flex-direction:column;gap:var(--s-3)}
.nc-premium-list li{display:flex;align-items:flex-start;gap:10px;
font-size:.95rem;color:rgba(255,255,255,.88);line-height:1.5}
.nc-premium-list li svg{flex-shrink:0;color:var(--c-blue-500);margin-top:3px}
.nc-premium-pitch .btn{position:relative;align-self:flex-start;margin-top:var(--s-3)}
.nc-premium-art{position:absolute;right:-20px;bottom:-10px;width:220px;height:200px;
opacity:.95;pointer-events:none}
@media(max-width:560px){.nc-premium-art{display:none}}
/* ── Right pricing comparison ────────────────────────────── */
.nc-pricing{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:640px){.nc-pricing{grid-template-columns:1fr}}
.nc-plan{position:relative;background:var(--bg-card);border:1px solid var(--bd-1);
border-radius:var(--r-xl);padding:var(--s-6) var(--s-5);
display:flex;flex-direction:column;gap:var(--s-3);transition:all var(--t-2)}
.nc-plan:hover{box-shadow:var(--sh-md);border-color:var(--bd-2)}
.nc-plan-featured{border-color:var(--c-blue-500);box-shadow:var(--sh-lg);
background:linear-gradient(180deg,#fff 0%,var(--c-blue-50) 100%)}
.nc-plan-featured:hover{box-shadow:var(--sh-lg);border-color:var(--c-blue-600)}
.nc-plan-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:var(--c-blue-600);color:#fff;font-family:var(--f-mono);
font-size:.65rem;font-weight:700;letter-spacing:.12em;
padding:5px 14px;border-radius:99px;white-space:nowrap;
box-shadow:0 2px 8px rgba(37,99,235,.3)}
.nc-plan-header{margin-bottom:var(--s-2)}
.nc-plan-name{font-family:var(--f-display);font-weight:800;font-size:1.5rem;
color:var(--tx-0);margin:0 0 4px;letter-spacing:-.01em}
.nc-plan-tag{font-size:.82rem;color:var(--tx-2);margin:0}
.nc-plan-list{list-style:none;padding:0;margin:0;flex:1;
display:flex;flex-direction:column;gap:10px}
.nc-plan-list li{display:flex;align-items:center;gap:8px;font-size:.88rem;line-height:1.45}
.nc-plan-list li svg{flex-shrink:0}
.nc-plan-yes{color:var(--tx-0)}
.nc-plan-yes svg{color:var(--c-green)}
.nc-plan-no{color:var(--tx-3)}
.nc-plan-no svg{color:var(--tx-3)}
.nc-plan-price{display:flex;align-items:baseline;gap:6px;margin-top:var(--s-2)}
.nc-plan-amount{font-family:var(--f-display);font-weight:800;font-size:2rem;color:var(--tx-0);line-height:1}
.nc-plan-period{font-size:.85rem;color:var(--tx-2)}
.nc-plan .btn{margin-top:var(--s-2)}
/* ── Latest Articles + Newsletter grid ───────────────────── */
.nc-latest-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:var(--s-7);align-items:start}
@media(max-width:1024px){.nc-latest-grid{grid-template-columns:1fr;gap:var(--s-5)}}
/* ── List of latest articles ─────────────────────────────── */
.nc-latest-list{display:flex;flex-direction:column;gap:var(--s-3)}
.nc-latest-item{display:grid;grid-template-columns:120px 1fr;gap:var(--s-4);
padding:var(--s-3);border-radius:var(--r-md);text-decoration:none;color:inherit;
transition:background var(--t-1)}
.nc-latest-item:hover{background:var(--bg-1)}
.nc-latest-thumb{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;
background:var(--bg-2);position:relative}
.nc-latest-thumb img{width:100%;height:100%;object-fit:cover}
.nc-latest-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;
justify-content:center;background:linear-gradient(135deg,var(--bg-2),var(--bg-3));color:var(--tx-3)}
.nc-latest-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.nc-latest-title{font-family:var(--f-display);font-weight:700;font-size:1rem;
line-height:1.35;color:var(--tx-0);margin:0;letter-spacing:-.005em}
.nc-latest-item:hover .nc-latest-title{color:var(--c-blue-700)}
.nc-latest-excerpt{font-size:.85rem;color:var(--tx-2);line-height:1.55;margin:0;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nc-latest-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:.75rem;color:var(--tx-2);margin-top:4px}
.nc-latest-meta .sep{color:var(--bd-2)}
.nc-latest-meta .nc-badge{font-size:.62rem;padding:.1rem .5rem}
.nc-latest-meta .nc-badge::before{display:none}
@media(max-width:560px){
.nc-latest-item{grid-template-columns:90px 1fr;gap:var(--s-3)}
}
/* ── Newsletter side card ────────────────────────────────── */
.nc-latest-side{display:flex;flex-direction:column;gap:var(--s-4)}
.nc-latest-side-head{display:flex;justify-content:flex-end;margin-bottom:var(--s-2)}
@media(max-width:1024px){.nc-latest-side-head{display:none}}
.nc-newsletter-aside{background:var(--bg-1);border:1px solid var(--bd-1);
border-radius:var(--r-xl);padding:var(--s-6);text-align:center;
display:flex;flex-direction:column;gap:var(--s-3);align-items:center}
.nc-newsletter-aside-icon{width:54px;height:54px;border-radius:50%;
background:var(--c-blue-50);color:var(--c-blue-600);
display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2)}
.nc-newsletter-aside-title{font-family:var(--f-display);font-weight:800;
font-size:1.25rem;color:var(--tx-0);margin:0;letter-spacing:-.01em}
.nc-newsletter-aside-desc{font-size:.88rem;color:var(--tx-2);line-height:1.6;
margin:0;max-width:300px}
.nc-newsletter-aside-form{width:100%;display:flex;flex-direction:column;
gap:var(--s-2);margin-top:var(--s-2);position:relative}
.nc-newsletter-aside-form input[type="email"]{width:100%;padding:.7rem 1rem;
background:var(--bg-0);border:1px solid var(--bd-2);border-radius:var(--r-md);
font-size:.9rem;color:var(--tx-0);outline:none;transition:all var(--t-1)}
.nc-newsletter-aside-form input[type="email"]:focus{
border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.nc-newsletter-aside-fine{font-size:.72rem;color:var(--tx-3);margin:6px 0 0}
/* ═══════════════════════════════════════════════════════════
v9.3.0 — SPRINT 4 — Single post editorial layout
═══════════════════════════════════════════════════════════ */
/* ── Hero ────────────────────────────────────────────────── */
.nc-post-hero{padding:var(--s-7) 0 var(--s-5);
background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 100%);
border-bottom:1px solid var(--bd-1)}
.nc-post-hero .nc-container{max-width:880px}
.nc-post-cat-link{display:inline-block;margin:var(--s-3) 0 var(--s-4);text-decoration:none}
.nc-post-title{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.85rem,4vw,2.85rem);line-height:1.15;color:var(--tx-0);
letter-spacing:-.025em;margin:0 0 var(--s-4)}
.nc-post-subtitle{font-size:1.12rem;color:var(--tx-1);line-height:1.65;
max-width:680px;margin:0 0 var(--s-5);font-weight:400}
/* Meta row */
.nc-post-meta{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
font-size:.85rem;color:var(--tx-2)}
.nc-post-meta-sep{color:var(--bd-2)}
.nc-post-author{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.nc-post-author-avatar{width:36px;height:36px;border-radius:50%;border:1px solid var(--bd-1)}
.nc-post-author span{display:flex;flex-direction:column;line-height:1.2}
.nc-post-author-name{font-size:.88rem;font-weight:600;color:var(--tx-0)}
.nc-post-author-role{font-size:.72rem;color:var(--tx-3)}
.nc-post-date,.nc-post-read-time{display:inline-flex;align-items:center;gap:5px}
.nc-post-series-pill{padding:.18rem .65rem;background:var(--c-blue-50);
color:var(--c-blue-700);border:1px solid var(--c-blue-100);
border-radius:99px;font-size:.7rem;font-weight:700;font-family:var(--f-mono);letter-spacing:.04em}
.nc-tts-btn{display:inline-flex;align-items:center;gap:6px;
padding:.35rem .8rem;background:var(--bg-0);border:1px solid var(--bd-2);
border-radius:99px;font-size:.78rem;font-weight:500;color:var(--tx-1);
cursor:pointer;transition:all var(--t-1);margin-left:auto}
.nc-tts-btn:hover{background:var(--c-blue-50);color:var(--c-blue-700);border-color:var(--c-blue-200)}
/* Hero image */
.nc-post-hero-img-wrap{padding:var(--s-5) 0 var(--s-2)}
.nc-post-hero-img-wrap .nc-container{max-width:1100px}
.nc-post-hero-img-el{width:100%;max-height:440px;object-fit:cover;
border-radius:var(--r-lg);border:1px solid var(--bd-1);box-shadow:var(--sh-md);display:block}
/* ── Layout ──────────────────────────────────────────────── */
.nc-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;
gap:var(--s-7);padding:var(--s-5) 0 var(--s-8);align-items:start;
max-width:1180px;margin-inline:auto}
@media(max-width:1024px){.nc-post-layout{grid-template-columns:1fr;gap:var(--s-5)}}
.nc-article{min-width:0;max-width:760px}
/* ── Key Takeaways ───────────────────────────────────────── */
.nc-takeaways{background:var(--c-blue-50);border:1px solid var(--c-blue-100);
border-left:3px solid var(--c-blue-600);
border-radius:var(--r-lg);padding:var(--s-5);margin:0 0 var(--s-6)}
.nc-takeaways-header{display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:.7rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--c-blue-700);
margin-bottom:var(--s-3)}
.nc-takeaways ul{list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:10px}
.nc-takeaways li{position:relative;padding-left:1.5rem;font-size:.94rem;
color:var(--tx-0);line-height:1.55}
.nc-takeaways li::before{content:'';position:absolute;left:0;top:.55em;
width:6px;height:6px;border-radius:50%;background:var(--c-blue-600)}
/* ── Mid-article CTA ─────────────────────────────────────── */
.nc-inline-cta{display:flex;align-items:center;gap:var(--s-4);
background:linear-gradient(135deg,var(--c-navy) 0%,#13265B 100%);
color:#fff;border-radius:var(--r-xl);padding:var(--s-5) var(--s-6);
margin:var(--s-7) 0 var(--s-6);position:relative;overflow:hidden;flex-wrap:wrap}
.nc-inline-cta::before{content:'';position:absolute;inset:0;
background:radial-gradient(circle at 90% 50%,rgba(37,99,235,.2),transparent 60%);
pointer-events:none}
.nc-inline-cta-icon{position:relative;width:48px;height:48px;border-radius:var(--r-md);
background:rgba(245,158,11,.15);color:var(--c-amber);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-inline-cta-body{position:relative;flex:1;min-width:220px}
.nc-inline-cta-body h3{font-family:var(--f-display);font-weight:700;
font-size:1.1rem;color:#fff;margin:0 0 4px;line-height:1.3}
.nc-inline-cta-body p{font-size:.88rem;color:rgba(255,255,255,.78);margin:0;line-height:1.5}
.nc-inline-cta .btn{position:relative;flex-shrink:0}
/* ── Author bio ──────────────────────────────────────────── */
.nc-author-bio{display:flex;gap:var(--s-4);align-items:flex-start;
margin:var(--s-7) 0 0;padding:var(--s-5);
background:var(--bg-1);border:1px solid var(--bd-1);border-radius:var(--r-lg)}
.nc-author-bio-avatar{width:64px;height:64px;border-radius:50%;
border:2px solid var(--bd-1);flex-shrink:0}
.nc-author-bio-body{flex:1;min-width:0}
.nc-author-bio-eyebrow{font-family:var(--f-mono);font-size:.68rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2);
display:block;margin-bottom:4px}
.nc-author-bio-name{font-family:var(--f-display);font-weight:700;
font-size:1.15rem;margin:0 0 var(--s-2);line-height:1.3}
.nc-author-bio-name a{color:var(--tx-0);text-decoration:none}
.nc-author-bio-name a:hover{color:var(--c-blue-700)}
.nc-author-bio-text{font-size:.9rem;color:var(--tx-1);line-height:1.65;margin:0}
@media(max-width:560px){.nc-author-bio{flex-direction:column;text-align:center}.nc-author-bio-avatar{margin:0 auto}}
/* ── Mobile sidebar ──────────────────────────────────────── */
@media(max-width:1024px){
.nc-sticky-widget{position:static}
.nc-toc-box{display:none}
}
/* ═══════════════════════════════════════════════════════════
v9.4.0 — SPRINT 5 — About / Contact / Tools / Archives / 404
═══════════════════════════════════════════════════════════ */
/* ── Generic page hero ───────────────────────────────────── */
.nc-page-hero{padding:var(--s-7) 0 var(--s-6);
background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 100%);
border-bottom:1px solid var(--bd-1)}
.nc-page-hero h1{font-family:var(--f-display);font-weight:800;
font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;letter-spacing:-.025em;
color:var(--tx-0);margin:var(--s-3) 0 var(--s-3)}
.nc-page-hero-eyebrow{display:inline-block;font-family:var(--f-mono);
font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--c-blue-600)}
.nc-page-hero .nc-archive-desc{font-size:1.05rem;color:var(--tx-1);
line-height:1.65;max-width:680px;margin:0}
.nc-archive-count{font-family:var(--f-mono);font-size:.78rem;color:var(--tx-3);
margin-top:var(--s-4);letter-spacing:.04em}
/* ── 404 ─────────────────────────────────────────────────── */
.nc-404{min-height:50vh;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;padding:var(--s-7) var(--s-4);gap:var(--s-4)}
.nc-404-code{font-family:var(--f-display);font-size:clamp(5rem,12vw,9rem);
font-weight:900;line-height:1;margin:0;
background:linear-gradient(135deg,var(--c-blue-500),var(--c-blue-700));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nc-404-title{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.25rem);
font-weight:800;color:var(--tx-0);margin:0}
.nc-404-text{font-size:1.05rem;color:var(--tx-2);max-width:480px;margin:0}
.nc-404-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center;margin-top:var(--s-3)}
.nc-404-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
justify-content:center;margin-top:var(--s-4)}
.nc-404-cats-label{font-size:.85rem;color:var(--tx-2);font-weight:500}
/* ── Empty state ─────────────────────────────────────────── */
.nc-empty{text-align:center;padding:var(--s-9) var(--s-4);color:var(--tx-2)}
.nc-empty h2{font-size:1.5rem;color:var(--tx-0);margin-bottom:var(--s-3)}
/* ── Search page form ────────────────────────────────────── */
.nc-search-form-page{display:flex;gap:var(--s-2);max-width:520px;
margin-top:var(--s-4)}
.nc-search-form-page input[type="search"]{flex:1;padding:.75rem 1rem;
background:var(--bg-0);border:1px solid var(--bd-2);border-radius:var(--r-md);
font-size:.95rem;outline:none}
.nc-search-form-page input:focus{border-color:var(--c-blue-500);
box-shadow:0 0 0 3px rgba(59,130,246,.1)}
/* ── About page ──────────────────────────────────────────── */
.nc-about-profile{display:grid;grid-template-columns:auto 1fr;gap:var(--s-6);
align-items:start;padding:var(--s-6);background:var(--bg-1);
border:1px solid var(--bd-1);border-radius:var(--r-xl);margin-bottom:var(--s-6)}
@media(max-width:640px){.nc-about-profile{grid-template-columns:1fr;text-align:center}}
.nc-about-avatar-block{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.nc-about-avatar{width:128px;height:128px;border-radius:50%;
border:3px solid var(--bg-0);box-shadow:var(--sh-lg)}
.nc-about-status{display:inline-flex;align-items:center;gap:6px;
padding:.3rem .8rem;background:#ECFDF5;color:#047857;
border:1px solid #A7F3D0;border-radius:99px;
font-size:.72rem;font-weight:600;white-space:nowrap}
.nc-about-status-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green);
animation:nc-pulse 2s infinite}
.nc-about-eyebrow{font-family:var(--f-mono);font-size:.7rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--c-blue-600);
display:block;margin-bottom:8px}
.nc-about-name{font-family:var(--f-display);font-weight:800;font-size:1.75rem;
color:var(--tx-0);margin:0 0 var(--s-3);letter-spacing:-.02em}
.nc-about-profile-body p{font-size:1rem;color:var(--tx-1);line-height:1.7;margin:0 0 var(--s-4)}
.nc-about-links{display:flex;gap:var(--s-2);flex-wrap:wrap}
.nc-about-link{display:inline-flex;align-items:center;gap:8px;
padding:.5rem 1rem;background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:99px;font-size:.85rem;font-weight:600;color:var(--tx-0);
text-decoration:none;transition:all var(--t-1)}
.nc-about-link:hover{border-color:var(--c-blue-500);color:var(--c-blue-700);
background:var(--c-blue-50)}
/* Stats */
.nc-about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
padding:var(--s-5);background:var(--bg-0);
border:1px solid var(--bd-1);border-radius:var(--r-xl)}
.nc-about-stat{text-align:center;padding:var(--s-3)}
.nc-about-stat-num{font-family:var(--f-display);font-size:2rem;font-weight:800;
line-height:1;display:block;
background:linear-gradient(135deg,var(--c-blue-600),var(--c-blue-700));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nc-about-stat-lbl{font-size:.78rem;color:var(--tx-2);text-transform:uppercase;
letter-spacing:.06em;margin-top:6px;display:block;font-weight:600}
@media(max-width:640px){.nc-about-stats{grid-template-columns:repeat(2,1fr)}}
/* Expertise */
.nc-expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:1024px){.nc-expertise-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nc-expertise-grid{grid-template-columns:1fr}}
.nc-expertise-card{background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-lg);padding:var(--s-5);transition:all var(--t-2)}
.nc-expertise-card:hover{border-color:var(--bd-2);box-shadow:var(--sh-md);transform:translateY(-2px)}
.nc-expertise-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.nc-expertise-icon{width:40px;height:40px;border-radius:var(--r-md);
background:var(--c-blue-50);color:var(--c-blue-700);font-weight:800;
font-family:var(--f-display);font-size:1.1rem;
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-expertise-card h3{font-family:var(--f-display);font-weight:700;
font-size:1rem;color:var(--tx-0);margin:0;line-height:1.3}
.nc-expertise-tags{display:flex;flex-wrap:wrap;gap:6px}
.nc-expertise-tag{font-family:var(--f-mono);font-size:.7rem;
padding:.2rem .6rem;border-radius:99px;
background:var(--bg-1);border:1px solid var(--bd-1);color:var(--tx-1)}
/* Certifications */
.nc-cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
@media(max-width:640px){.nc-cert-grid{grid-template-columns:1fr}}
.nc-cert-card{display:flex;align-items:center;gap:var(--s-3);
padding:var(--s-4);background:var(--bg-0);
border:1px solid var(--bd-1);border-radius:var(--r-lg)}
.nc-cert-icon{width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,var(--c-amber-50),#FEF3C7);
color:var(--c-amber);display:flex;align-items:center;justify-content:center;flex-shrink:0;
border:1px solid #FDE68A}
.nc-cert-card strong{display:block;color:var(--tx-0);font-size:.92rem;font-weight:700;margin-bottom:3px}
.nc-cert-card span{font-size:.78rem;color:var(--tx-2)}
/* CTA card */
.nc-cta-card{background:linear-gradient(135deg,var(--c-navy) 0%,#13265B 100%);
color:#fff;border-radius:var(--r-xl);padding:var(--s-7);
text-align:center;position:relative;overflow:hidden}
.nc-cta-card::before{content:'';position:absolute;inset:0;
background:radial-gradient(circle at 80% 50%,rgba(37,99,235,.25),transparent 60%);
pointer-events:none}
.nc-cta-card h2{position:relative;color:#fff;font-family:var(--f-display);
font-size:clamp(1.5rem,3vw,2.25rem);margin:0 0 var(--s-3);letter-spacing:-.02em}
.nc-cta-card p{position:relative;color:rgba(255,255,255,.8);
font-size:1.05rem;max-width:520px;margin:0 auto var(--s-5)}
.nc-cta-actions{position:relative;display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.nc-cta-card .btn-secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.nc-cta-card .btn-secondary:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
/* ── Contact page ────────────────────────────────────────── */
.nc-contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
margin-bottom:var(--s-7)}
@media(max-width:1024px){.nc-contact-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nc-contact-cards{grid-template-columns:1fr}}
.nc-contact-card{display:flex;align-items:center;gap:var(--s-3);
padding:var(--s-4);background:var(--bg-0);
border:1px solid var(--bd-1);border-radius:var(--r-lg);
text-decoration:none;color:inherit;transition:all var(--t-2)}
.nc-contact-card:hover{border-color:var(--bd-2);box-shadow:var(--sh-md);
transform:translateY(-2px);color:inherit}
.nc-contact-icon{width:44px;height:44px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-contact-icon[data-tone="blue"] {background:var(--c-blue-50);color:var(--c-blue-600)}
.nc-contact-icon[data-tone="blue-deep"] {background:#EFF6FF;color:#0A66C2}
.nc-contact-icon[data-tone="slate"] {background:var(--bg-2);color:var(--tx-0)}
.nc-contact-icon[data-tone="sky"] {background:#F0F9FF;color:#0EA5E9}
.nc-contact-card .nc-contact-label{font-family:var(--f-mono);font-size:.65rem;
font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);display:block;margin-bottom:2px}
.nc-contact-card strong{display:block;color:var(--tx-0);font-size:.92rem;font-weight:700;margin-bottom:2px}
.nc-contact-card span:last-child{font-size:.78rem;color:var(--tx-2)}
.nc-contact-form-wrap{background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-xl);padding:var(--s-7);max-width:760px;margin:0 auto}
.nc-contact-form-wrap h2{font-family:var(--f-display);font-weight:800;
font-size:1.75rem;margin:0 0 var(--s-2)}
.nc-contact-form-intro{color:var(--tx-2);margin:0 0 var(--s-5);font-size:.95rem}
.nc-contact-form{display:flex;flex-direction:column;gap:var(--s-4);position:relative}
.nc-contact-form label{display:flex;flex-direction:column;gap:6px}
.nc-contact-form label span{font-size:.82rem;font-weight:600;color:var(--tx-0)}
.nc-contact-form input,.nc-contact-form select,.nc-contact-form textarea{
width:100%;padding:.75rem 1rem;background:var(--bg-0);
border:1px solid var(--bd-2);border-radius:var(--r-md);
font-size:.95rem;color:var(--tx-0);outline:none;font-family:inherit;transition:all var(--t-1)}
.nc-contact-form input:focus,.nc-contact-form select:focus,.nc-contact-form textarea:focus{
border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.nc-contact-form textarea{resize:vertical;min-height:120px}
.nc-contact-form button[type="submit"]{align-self:flex-start;margin-top:var(--s-2)}
/* ── Resources & Tools page ──────────────────────────────── */
.nc-resources-section{margin-bottom:var(--s-8)}
.nc-resources-section-head{margin-bottom:var(--s-5)}
.nc-resources-section-head h2{font-family:var(--f-display);font-weight:800;
font-size:1.5rem;color:var(--tx-0);margin:0 0 var(--s-2)}
.nc-resources-section-head p{color:var(--tx-2);font-size:.95rem;margin:0}
.nc-resources-grid-featured{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.nc-resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:1024px){.nc-resources-grid{grid-template-columns:repeat(2,1fr)}.nc-resources-grid-featured{grid-template-columns:1fr}}
@media(max-width:560px){.nc-resources-grid{grid-template-columns:1fr}}
.nc-resource-card{display:flex;gap:var(--s-4);align-items:flex-start;
padding:var(--s-5);background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:all var(--t-2)}
.nc-resource-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--bd-2);color:inherit}
.nc-resource-card-featured{background:linear-gradient(135deg,#fff 0%,var(--c-blue-50) 100%);
border-color:var(--c-blue-100)}
.nc-resource-card-featured:hover{border-color:var(--c-blue-500)}
.nc-resource-soon{opacity:.78;cursor:default}
.nc-resource-soon:hover{transform:none;box-shadow:none;border-color:var(--bd-1)}
.nc-resource-card-icon{width:48px;height:48px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-resource-card-icon[data-tone="blue"] {background:var(--c-blue-50);color:var(--c-blue-600)}
.nc-resource-card-icon[data-tone="green"] {background:#ECFDF5;color:#059669}
.nc-resource-card-icon[data-tone="red"] {background:#FEF2F2;color:#DC2626}
.nc-resource-card-icon[data-tone="purple"] {background:#F5F3FF;color:#7C3AED}
.nc-resource-card-icon[data-tone="amber"] {background:var(--c-amber-50);color:#D97706}
.nc-resource-card-type{font-family:var(--f-mono);font-size:.65rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);display:block;margin-bottom:6px}
.nc-resource-card-name{font-family:var(--f-display);font-weight:700;
font-size:1.05rem;color:var(--tx-0);margin:0 0 var(--s-2);line-height:1.3}
.nc-resource-card:hover .nc-resource-card-name{color:var(--c-blue-700)}
.nc-resource-card-desc{font-size:.88rem;color:var(--tx-2);line-height:1.6;margin:0 0 var(--s-3)}
.nc-resource-card-footer{display:flex;flex-wrap:wrap;gap:5px}
.nc-resource-chip{font-family:var(--f-mono);font-size:.65rem;font-weight:600;
padding:.15rem .55rem;border-radius:99px;
background:var(--bg-1);border:1px solid var(--bd-1);color:var(--tx-2)}
/* ── Feed subscribe page ─────────────────────────────────── */
.nc-feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:start}
@media(max-width:900px){.nc-feed-grid{grid-template-columns:1fr}}
.nc-feed-card{background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:var(--r-xl);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3)}
.nc-feed-card-primary{background:linear-gradient(135deg,var(--c-blue-50),#fff);
border-color:var(--c-blue-100)}
.nc-feed-card-icon{width:56px;height:56px;border-radius:var(--r-lg);
display:flex;align-items:center;justify-content:center}
.nc-feed-card-icon[data-tone="blue"]{background:var(--c-blue-600);color:#fff}
.nc-feed-card h2{font-family:var(--f-display);font-weight:800;font-size:1.4rem;
color:var(--tx-0);margin:var(--s-2) 0 0;letter-spacing:-.01em}
.nc-feed-card p{color:var(--tx-1);line-height:1.6;margin:0}
.nc-feed-form{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-2)}
.nc-feed-form input{padding:.75rem 1rem;background:var(--bg-0);
border:1px solid var(--bd-2);border-radius:var(--r-md);font-size:.95rem;outline:none}
.nc-feed-form input:focus{border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.nc-feed-fine{font-size:.75rem;color:var(--tx-3);margin-top:var(--s-2)}
.nc-feed-options{display:flex;flex-direction:column;gap:var(--s-3)}
.nc-feed-option{display:flex;align-items:center;gap:var(--s-3);
padding:var(--s-4);background:var(--bg-0);
border:1px solid var(--bd-1);border-radius:var(--r-lg);
text-decoration:none;color:inherit;transition:all var(--t-2)}
.nc-feed-option:hover{transform:translateY(-2px);box-shadow:var(--sh-md);
border-color:var(--bd-2);color:inherit}
.nc-feed-option-icon{width:44px;height:44px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nc-feed-option[data-tone="amber"] .nc-feed-option-icon{background:var(--c-amber-50);color:#D97706}
.nc-feed-option[data-tone="blue-deep"] .nc-feed-option-icon{background:#EFF6FF;color:#0A66C2}
.nc-feed-option[data-tone="sky"] .nc-feed-option-icon{background:#F0F9FF;color:#0EA5E9}
.nc-feed-option[data-tone="slate"] .nc-feed-option-icon{background:var(--bg-2);color:var(--tx-0)}
.nc-feed-option strong{display:block;color:var(--tx-0);font-size:.95rem;font-weight:700;margin-bottom:2px}
.nc-feed-option span:last-of-type{font-size:.8rem;color:var(--tx-2)}
.nc-feed-option-arrow{margin-left:auto;color:var(--tx-3);font-size:1.2rem;flex-shrink:0}
.nc-feed-option:hover .nc-feed-option-arrow{color:var(--c-blue-600)}
/* ── Tool sub-page hero (DataWeave/Secure/Error) ─────────── */
.nc-tool-hero{padding:var(--s-7) 0 var(--s-5);
background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 100%);
border-bottom:1px solid var(--bd-1)}
.nc-tool-hero-inner{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center}
@media(max-width:768px){.nc-tool-hero-inner{grid-template-columns:1fr}}
.nc-tool-hero h1{font-family:var(--f-display);font-weight:800;
font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.15;
color:var(--tx-0);letter-spacing:-.02em;margin:0 0 var(--s-3)}
.nc-tool-hero-sub{font-size:1rem;color:var(--tx-1);line-height:1.65;
max-width:540px;margin:0 0 var(--s-4)}
.nc-tool-badges{display:flex;flex-wrap:wrap;gap:6px}
.nc-tool-badge{display:inline-flex;align-items:center;gap:5px;
padding:.3rem .75rem;background:var(--bg-0);border:1px solid var(--bd-1);
border-radius:99px;font-size:.78rem;font-weight:500;color:var(--tx-1)}
.nc-tool-hero-stat-group{display:flex;gap:var(--s-5);align-items:center}
@media(max-width:768px){.nc-tool-hero-stat-group{gap:var(--s-4)}}
.nc-tool-stat{text-align:center}
.nc-tool-stat-num{font-family:var(--f-display);font-size:1.75rem;font-weight:800;line-height:1;
background:linear-gradient(135deg,var(--c-blue-600),var(--c-blue-700));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.nc-tool-stat-label{font-size:.68rem;color:var(--tx-2);text-transform:uppercase;
letter-spacing:.06em;margin-top:5px;display:block;font-weight:600}
/* ═══════════════════════════════════════════════════════════════
* v9.5.0 — Mockup-aligned nav: dropdowns, hover underline, chevrons
* Overrides earlier nav rules. Append-only so older versions resolve
* naturally via cascade.
* ═══════════════════════════════════════════════════════════════ */
/* Reset list markers inside nav */
.nc-nav-links ul,
.nc-nav-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.nc-nav-item{position:relative}
/* Top-level link: no underline by default, animated underline on hover/current */
.nc-nav-link{
position:relative;
padding:.55rem .85rem;
border-radius:var(--r-sm);
font-size:.92rem;font-weight:500;
color:var(--tx-1);
text-decoration:none !important;
display:inline-flex;align-items:center;gap:5px;
transition:color var(--t-1);
white-space:nowrap;
}
.nc-nav-link::after{
content:"";position:absolute;left:.85rem;right:.85rem;bottom:.32rem;
height:2px;background:var(--c-blue-600);border-radius:2px;
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-1) ease;
}
.nc-nav-link:hover{color:var(--tx-0);background:transparent}
.nc-nav-link:hover::after,
.nc-nav-link[aria-expanded="true"]::after,
.nc-nav-link.nc-current::after,
.nc-nav-link[aria-current="page"]::after{transform:scaleX(1)}
.nc-nav-link.nc-current,
.nc-nav-link[aria-current="page"]{color:var(--c-blue-600);font-weight:600}
/* Chevron */
.nc-nav-link .chev{
width:11px;height:11px;opacity:.65;flex-shrink:0;
transition:transform var(--t-1) ease,opacity var(--t-1) ease;
}
.nc-nav-item.has-submenu:hover .chev,
.nc-nav-link[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}
/* ── Submenu / dropdown ─────────────────────────────────────── */
.nc-submenu{
list-style:none;margin:0;padding:.5rem;
position:absolute;top:calc(100% + 6px);left:0;min-width:220px;
background:var(--bg-0,#fff);
border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-md,10px);
box-shadow:0 12px 32px -8px rgba(15,23,42,.18),0 4px 12px -4px rgba(15,23,42,.08);
display:flex;flex-direction:column;gap:1px;
opacity:0;visibility:hidden;transform:translateY(-4px);
transition:opacity var(--t-1) ease,transform var(--t-1) ease,visibility 0s linear var(--t-1);
z-index:50;
}
.nc-nav-item.has-submenu:hover > .nc-submenu,
.nc-nav-item.has-submenu:focus-within > .nc-submenu,
.nc-nav-item.has-submenu.is-open > .nc-submenu{
opacity:1;visibility:visible;transform:translateY(0);
transition:opacity var(--t-1) ease,transform var(--t-1) ease,visibility 0s linear 0s;
}
.nc-submenu::before{
content:"";position:absolute;top:-8px;left:0;right:0;height:8px;
}
.nc-submenu-item{margin:0}
.nc-submenu-link{
display:block;padding:.55rem .75rem;border-radius:var(--r-sm,6px);
font-size:.88rem;font-weight:500;color:var(--tx-1);
text-decoration:none;transition:background var(--t-1),color var(--t-1);
white-space:nowrap;
}
.nc-submenu-link:hover,
.nc-submenu-link:focus{background:var(--bg-1,#f3f4f6);color:var(--c-blue-600)}
/* Topbar links — no underline */
.nc-topbar-link{text-decoration:none !important}
/* Mobile: hide dropdowns, expose top-level taps */
@media(max-width:960px){
.nc-nav-link .chev{display:none}
.nc-submenu{display:none !important}
}
/* Touch / no-hover: convert hover dropdowns to click-driven */
@media(hover:none){
.nc-nav-item.has-submenu:hover > .nc-submenu{opacity:0;visibility:hidden;transform:translateY(-4px)}
.nc-nav-item.has-submenu.is-open > .nc-submenu{opacity:1;visibility:visible;transform:translateY(0)}
}
/* ═══════════════════════════════════════════════════════════════
* v9.5.1 — Consulting landing + tool email-gate
* ═══════════════════════════════════════════════════════════════ */
/* Consulting wrapper */
.nc-consulting{max-width:1180px;margin:0 auto;padding:var(--s-6,32px) var(--s-4,20px)}
.nc-consulting-hero{text-align:center;padding:var(--s-6,32px) 0 var(--s-5,28px)}
.nc-consulting-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;
color:var(--c-blue-600);margin:0 0 .8rem}
.nc-consulting-hero h1{font-family:var(--f-display);font-size:clamp(2rem,4vw,2.6rem);
line-height:1.15;font-weight:800;margin:0 0 1rem;color:var(--tx-0)}
.nc-consulting-lede{font-size:1.05rem;color:var(--tx-1);max-width:640px;
margin:0 auto 1.5rem;line-height:1.55}
.nc-consulting-hero-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
/* Package grid */
.nc-consulting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4,20px);
margin:var(--s-5,28px) 0}
@media(max-width:900px){.nc-consulting-grid{grid-template-columns:1fr}}
.nc-consulting-card{position:relative;background:var(--bg-0,#fff);
border:1px solid var(--bd-1,#e5e7eb);border-radius:var(--r-lg,14px);
padding:1.6rem 1.4rem;display:flex;flex-direction:column;
transition:border-color var(--t-1),box-shadow var(--t-1),transform var(--t-1)}
.nc-consulting-card:hover{border-color:var(--c-blue-500);
box-shadow:0 12px 30px -8px rgba(15,23,42,.10);transform:translateY(-2px)}
.nc-consulting-card.is-featured{border-color:var(--c-blue-600);
box-shadow:0 14px 40px -10px rgba(37,99,235,.18)}
.nc-consulting-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
background:var(--c-blue-600);color:#fff;font-size:.7rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:99px}
.nc-consulting-card-title{font-family:var(--f-display);font-size:1.25rem;
font-weight:800;margin:0 0 .6rem;color:var(--tx-0)}
.nc-consulting-card-price{display:flex;align-items:baseline;gap:.5rem;margin:0 0 1rem}
.nc-consulting-card-amount{font-family:var(--f-display);font-size:1.6rem;font-weight:800;color:var(--c-blue-600)}
.nc-consulting-card-unit{font-size:.85rem;color:var(--tx-2)}
.nc-consulting-card-desc{font-size:.92rem;color:var(--tx-1);line-height:1.55;margin:0 0 1rem;flex:0 0 auto}
.nc-consulting-card-list{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto}
.nc-consulting-card-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:var(--tx-1);line-height:1.5}
.nc-consulting-card-list svg{flex-shrink:0;margin-top:3px;color:var(--c-blue-600)}
.nc-consulting-card-cta{margin-top:auto}
/* Inquiry form */
.nc-consulting-prose{max-width:780px;margin:var(--s-5,28px) auto;font-size:1rem;color:var(--tx-1);line-height:1.7}
.nc-consulting-inquiry{margin:var(--s-6,32px) 0 var(--s-4,20px);
background:var(--bg-1,#f8fafc);border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-lg,14px);padding:2rem}
.nc-consulting-inquiry-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:2.2rem;align-items:start}
@media(max-width:780px){.nc-consulting-inquiry-grid{grid-template-columns:1fr;gap:1.4rem}}
.nc-consulting-inquiry-copy h2{font-family:var(--f-display);font-size:1.5rem;font-weight:800;margin:0 0 .6rem;color:var(--tx-0)}
.nc-consulting-inquiry-copy p{font-size:.95rem;color:var(--tx-1);line-height:1.6;margin:0 0 .7rem}
.nc-consulting-form{display:flex;flex-direction:column;gap:.9rem}
.nc-field{display:flex;flex-direction:column;gap:.35rem}
.nc-field span{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.nc-field span em{color:#dc2626;font-style:normal;font-weight:700}
.nc-field input,.nc-field textarea{
width:100%;padding:.6rem .75rem;border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-md,8px);background:#fff;font:inherit;color:var(--tx-0);
transition:border-color var(--t-1),box-shadow var(--t-1)}
.nc-field input:focus,.nc-field textarea:focus{
outline:none;border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.nc-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:540px){.nc-field-row{grid-template-columns:1fr}}
.nc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nc-consulting-form-status{font-size:.85rem;margin:0;min-height:1.2em}
.nc-consulting-form-status.is-ok{color:#15803d}
.nc-consulting-form-status.is-err{color:#dc2626}
/* Tool email-gate */
.nc-tool-gate{display:flex;gap:1rem;align-items:flex-start;
margin:1.4rem 0;padding:1.1rem 1.2rem;
background:linear-gradient(135deg,#eff6ff 0%,#fff 80%);
border:1px solid #dbeafe;border-radius:var(--r-md,10px)}
.nc-tool-gate-icon{flex-shrink:0;width:38px;height:38px;border-radius:8px;
background:var(--c-blue-600);color:#fff;display:flex;align-items:center;justify-content:center}
.nc-tool-gate-body{flex:1;min-width:0}
.nc-tool-gate-title{font-size:1rem;font-weight:700;margin:0 0 .3rem;color:var(--tx-0)}
.nc-tool-gate-desc{font-size:.85rem;color:var(--tx-1);margin:0 0 .75rem;line-height:1.5}
.nc-tool-gate-form{display:flex;gap:.5rem;flex-wrap:wrap}
.nc-tool-gate-form input[type=email]{flex:1;min-width:200px;
padding:.5rem .7rem;border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-md,8px);background:#fff;font:inherit;color:var(--tx-0)}
.nc-tool-gate-form input[type=email]:focus{outline:none;border-color:var(--c-blue-500);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.nc-tool-gate-status{font-size:.82rem;margin:.5rem 0 0;min-height:1em}
.nc-tool-gate-status.is-ok{color:#15803d}
.nc-tool-gate-status.is-err{color:#dc2626}
/* ═══════════════════════════════════════════════════════════════
* v9.5.2 — Premium pricing page + member badge + content gate
* ═══════════════════════════════════════════════════════════════ */
.nc-premium{max-width:1180px;margin:0 auto;padding:var(--s-6,32px) var(--s-4,20px)}
.nc-premium-hero{text-align:center;padding:var(--s-6,32px) 0}
.nc-premium-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--c-blue-600);margin:0 0 .8rem}
.nc-premium-hero h1{font-family:var(--f-display);font-size:clamp(2rem,4.2vw,2.8rem);font-weight:800;line-height:1.12;margin:0 0 1rem;color:var(--tx-0)}
.nc-premium-lede{font-size:1.05rem;color:var(--tx-1);max-width:680px;margin:0 auto;line-height:1.55}
.nc-premium-member-banner{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;padding:.7rem 1.1rem;background:#dcfce7;border:1px solid #86efac;border-radius:99px;color:#14532d;font-size:.92rem}
.nc-premium-soon{display:inline-block;margin-top:1.2rem;padding:.65rem 1.1rem;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;color:#78350f;font-size:.92rem}
.nc-premium-notice{margin:1rem 0;padding:.8rem 1rem;border-radius:8px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:.92rem}
.nc-premium-notice.is-ok{background:#dcfce7;border-color:#86efac;color:#14532d}
.nc-premium-notice.is-err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
/* Plan grid */
.nc-premium-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4,20px);margin:var(--s-5,28px) 0}
@media(max-width:900px){.nc-premium-plans{grid-template-columns:1fr}}
.nc-plan{position:relative;display:flex;flex-direction:column;background:var(--bg-0,#fff);
border:1px solid var(--bd-1,#e5e7eb);border-radius:var(--r-lg,14px);padding:1.8rem 1.4rem;
transition:border-color var(--t-1),box-shadow var(--t-1),transform var(--t-1)}
.nc-plan:hover{border-color:var(--c-blue-500);box-shadow:0 12px 30px -8px rgba(15,23,42,.10);transform:translateY(-2px)}
.nc-plan.is-featured{border-color:var(--c-blue-600);
box-shadow:0 16px 44px -10px rgba(37,99,235,.22);
background:linear-gradient(180deg,#fff 0%,#eff6ff 100%)}
.nc-plan-ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
background:var(--c-blue-600);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;padding:.32rem .75rem;border-radius:99px;white-space:nowrap}
.nc-plan-head{margin-bottom:1.1rem}
.nc-plan-name{font-family:var(--f-display);font-size:1.25rem;font-weight:800;margin:0 0 .6rem;color:var(--tx-0)}
.nc-plan-price{display:flex;align-items:baseline;gap:.4rem;margin:0 0 .5rem}
.nc-plan-amount{font-family:var(--f-display);font-size:2.1rem;font-weight:800;color:var(--tx-0);line-height:1}
.nc-plan-unit{font-size:.85rem;color:var(--tx-2)}
.nc-plan-tag{font-size:.88rem;color:var(--tx-1);margin:.4rem 0 0;line-height:1.45}
.nc-plan-list{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.nc-plan-list li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--tx-1);line-height:1.5}
.nc-plan-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--c-blue-600);font-weight:700}
.nc-plan-list li.is-off{color:var(--tx-3,#9ca3af);text-decoration:line-through}
.nc-plan-list li.is-off::before{content:"×";color:var(--tx-3,#9ca3af)}
.nc-plan .btn.is-current,.nc-plan .btn.is-disabled{opacity:.7;pointer-events:none}
.nc-premium-prose{max-width:780px;margin:var(--s-6,32px) auto;font-size:1rem;color:var(--tx-1);line-height:1.7}
.nc-premium-fineprint{text-align:center;font-size:.82rem;color:var(--tx-2);margin:2rem 0 0}
/* Member badge */
.nc-member-badge{display:inline-block;padding:.2rem .55rem;border-radius:99px;
background:var(--c-blue-600);color:#fff;font-size:.7rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;line-height:1.4;vertical-align:middle}
.nc-member-badge--founding{background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%)}
/* Content gate */
.nc-premium-gate{margin:1.4rem 0;padding:1.6rem 1.4rem;text-align:center;
background:linear-gradient(180deg,#fafafa 0%,#fff 100%);
border:1px solid var(--bd-1,#e5e7eb);border-radius:var(--r-lg,14px)}
.nc-premium-gate-icon{font-size:1.8rem;margin-bottom:.4rem}
.nc-premium-gate-title{font-family:var(--f-display);font-size:1.2rem;font-weight:800;margin:0 0 .4rem;color:var(--tx-0)}
.nc-premium-gate-desc{font-size:.92rem;color:var(--tx-1);margin:0 auto 1rem;max-width:480px;line-height:1.5}
.nc-premium-gate-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
/* ═══════════════════════════════════════════════════════════
v9.6.x — Breadcrumbs · Pillar · 404 redesign · Comments
═══════════════════════════════════════════════════════════ */
.nc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── Breadcrumbs ───────────────────────────────────────── */
.nc-breadcrumb{margin:0 0 1.2rem;font-size:.82rem;color:var(--tx-2)}
.nc-breadcrumb-list{list-style:none;margin:0;padding:0;display:flex;
flex-wrap:wrap;gap:.25rem .35rem;align-items:center}
.nc-breadcrumb-item{display:inline-flex;align-items:center;gap:.35rem;
max-width:100%;overflow:hidden}
.nc-breadcrumb-item a{color:var(--tx-2);text-decoration:none;
border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nc-breadcrumb-item a:hover{color:var(--c-blue-600,#2563eb);
border-bottom-color:currentColor}
.nc-breadcrumb-item.is-current span{color:var(--tx-1);font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.nc-breadcrumb-sep{color:var(--tx-3,#94a3b8);user-select:none;font-weight:400}
@media (max-width:600px){
.nc-breadcrumb{font-size:.78rem}
.nc-breadcrumb-item.is-current span{max-width:200px}
}
/* ── Pillar page ───────────────────────────────────────── */
.nc-pillar-hero{padding:var(--s-7,56px) 0 var(--s-5,28px);
background:linear-gradient(180deg,var(--bg-1,#f8fafc) 0%,var(--bg-0,#fff) 100%);
border-bottom:1px solid var(--bd-1,#e5e7eb)}
.nc-pillar-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--c-blue-600,#2563eb);margin:0 0 .6rem}
.nc-pillar-title{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.8rem);
font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .8rem;
color:var(--tx-0)}
.nc-pillar-lede{font-size:1.1rem;line-height:1.55;color:var(--tx-1);
max-width:720px;margin:0 0 1.2rem}
.nc-pillar-cta-wrap{margin:1rem 0 0}
.nc-pillar-body{padding:var(--s-6,32px) 0 var(--s-8,64px)}
.nc-pillar-grid{display:grid;gap:var(--s-5,28px);grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){
.nc-pillar-grid{grid-template-columns:220px minmax(0,1fr) 300px;align-items:start}
.nc-pillar-grid:not(:has(.nc-pillar-subnav)){grid-template-columns:minmax(0,1fr) 300px}
}
.nc-pillar-subnav{position:sticky;top:96px;font-size:.88rem;line-height:1.5}
.nc-pillar-subnav-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--tx-2);margin:0 0 .65rem}
.nc-pillar-subnav ol{list-style:none;margin:0;padding:0;
border-left:2px solid var(--bd-1,#e5e7eb)}
.nc-pillar-subnav li{margin:0}
.nc-pillar-subnav a{display:block;padding:.45rem .85rem;margin-left:-2px;
border-left:2px solid transparent;color:var(--tx-1);text-decoration:none;
transition:color .15s,border-color .15s,background .15s}
.nc-pillar-subnav a:hover,.nc-pillar-subnav a:focus-visible{
color:var(--c-blue-600,#2563eb);border-left-color:currentColor;
background:var(--bg-1,#f8fafc)}
.nc-pillar-prose{font-size:1rem;line-height:1.75;color:var(--tx-1);min-width:0}
.nc-pillar-prose h2{font-family:var(--f-display);font-size:1.6rem;font-weight:800;
margin:2.2rem 0 .9rem;color:var(--tx-0);scroll-margin-top:96px}
.nc-pillar-prose h3{font-family:var(--f-display);font-size:1.2rem;font-weight:700;
margin:1.6rem 0 .7rem;color:var(--tx-0);scroll-margin-top:96px}
.nc-pillar-prose p{margin:0 0 1rem}
.nc-pillar-prose ul,.nc-pillar-prose ol{padding-left:1.2rem;margin:0 0 1rem}
.nc-pillar-prose li{margin:.3rem 0}
.nc-pillar-prose a{color:var(--c-blue-600,#2563eb);border-bottom:1px solid rgba(37,99,235,.3)}
.nc-pillar-prose a:hover{border-bottom-color:currentColor}
.nc-pillar-cluster{position:sticky;top:96px;
background:var(--bg-1,#f8fafc);border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-lg,14px);padding:1.2rem 1rem}
.nc-pillar-cluster-head{display:flex;justify-content:space-between;align-items:baseline;
gap:.5rem;margin-bottom:.8rem}
.nc-pillar-cluster-head h2{font-family:var(--f-display);font-size:.95rem;font-weight:700;
margin:0;color:var(--tx-0);text-transform:uppercase;letter-spacing:.06em}
.nc-pillar-cluster-all{font-size:.78rem;font-weight:600;color:var(--c-blue-600,#2563eb);
text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.nc-pillar-cluster-all:hover{text-decoration:underline}
.nc-pillar-cluster-list{list-style:none;padding:0;margin:0}
.nc-pillar-cluster-list li{border-top:1px solid var(--bd-1,#e5e7eb)}
.nc-pillar-cluster-list li:first-child{border-top:0}
.nc-pillar-cluster-list a{display:flex;gap:.7rem;padding:.7rem 0;text-decoration:none;
align-items:flex-start;transition:transform .15s}
.nc-pillar-cluster-list a:hover{transform:translateX(2px)}
.nc-pillar-cluster-list a:hover .nc-pillar-cluster-title{color:var(--c-blue-600,#2563eb)}
.nc-pillar-cluster-num{font-family:var(--f-mono,'JetBrains Mono',monospace);
font-size:.78rem;font-weight:700;color:var(--tx-3,#94a3b8);
flex-shrink:0;line-height:1.4;margin-top:.15rem;min-width:1.6rem}
.nc-pillar-cluster-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.nc-pillar-cluster-title{font-size:.9rem;font-weight:600;line-height:1.35;
color:var(--tx-0);transition:color .15s}
.nc-pillar-cluster-meta{font-size:.74rem;color:var(--tx-2);display:flex;
align-items:center;gap:.3rem}
.nc-pillar-cluster-meta .sep{color:var(--tx-3,#94a3b8)}
.nc-pillar-cluster-empty{font-size:.88rem;color:var(--tx-2);font-style:italic;margin:0}
@media (max-width:979px){
.nc-pillar-subnav,.nc-pillar-cluster{position:static}
}
/* ── 404 redesign ──────────────────────────────────────── */
.nc-404{padding:var(--s-7,56px) 0 var(--s-8,64px)}
.nc-404-head{text-align:center;max-width:680px;margin:0 auto var(--s-6,32px)}
.nc-404-code{font-family:var(--f-display);font-size:clamp(4rem,12vw,7rem);
font-weight:900;line-height:1;letter-spacing:-.04em;
background:linear-gradient(135deg,var(--c-blue-600,#2563eb) 0%,#7c3aed 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
margin:0 0 .4rem;opacity:.85}
.nc-404-title{font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,2.2rem);
font-weight:800;line-height:1.2;color:var(--tx-0);margin:0 0 .8rem}
.nc-404-text{font-size:1rem;line-height:1.6;color:var(--tx-1);
margin:0 auto 1.5rem;max-width:560px}
.nc-404-search{display:flex;gap:.5rem;max-width:520px;margin:0 auto 1.2rem}
.nc-404-search input[type=search]{flex:1;min-width:0;padding:.7rem .9rem;
border:1px solid var(--bd-1,#e5e7eb);border-radius:var(--r-md,10px);
background:var(--bg-0,#fff);font-size:.95rem;color:var(--tx-0);
font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.nc-404-search input[type=search]:focus{border-color:var(--c-blue-600,#2563eb);
box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.nc-404-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.nc-404-section{max-width:720px;margin:0 auto var(--s-6,32px)}
.nc-404-section-title{font-family:var(--f-display);font-size:.85rem;font-weight:700;
text-transform:uppercase;letter-spacing:.1em;color:var(--tx-2);
margin:0 0 .8rem;text-align:center}
.nc-404-list{list-style:none;padding:0;margin:0;
border:1px solid var(--bd-1,#e5e7eb);border-radius:var(--r-lg,14px);
background:var(--bg-0,#fff);overflow:hidden}
.nc-404-list li+li{border-top:1px solid var(--bd-1,#e5e7eb)}
.nc-404-list a{display:flex;flex-direction:column;gap:.35rem;
padding:.9rem 1.1rem;text-decoration:none;transition:background .15s}
.nc-404-list a:hover{background:var(--bg-1,#f8fafc)}
.nc-404-list-title{font-size:.98rem;font-weight:600;color:var(--tx-0);line-height:1.35}
.nc-404-list a:hover .nc-404-list-title{color:var(--c-blue-600,#2563eb)}
.nc-404-list-meta{font-size:.75rem;color:var(--tx-2);display:flex;
align-items:center;gap:.4rem;flex-wrap:wrap}
.nc-404-list-meta .sep{color:var(--tx-3,#94a3b8)}
.nc-404-cats{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem}
@media (max-width:600px){
.nc-404-search{flex-direction:column}
.nc-404-search .btn{width:100%}
}
/* ── Comments ──────────────────────────────────────────── */
.nc-comments{max-width:780px;margin:var(--s-6,32px) auto 0;padding:0 0 var(--s-6,32px)}
.nc-comments-title{font-family:var(--f-display);font-size:1.3rem;font-weight:800;
margin:0 0 1.2rem;color:var(--tx-0)}
.nc-comment-list{list-style:none;padding:0;margin:0}
.nc-comment-list .children{list-style:none;padding-left:1.6rem;margin:1rem 0 0;
border-left:2px solid var(--bd-1,#e5e7eb)}
.nc-comment{margin:0 0 1.2rem}
.nc-comment-body{padding:1.1rem 1.2rem;border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-lg,14px);background:var(--bg-0,#fff)}
.nc-comment--reply .nc-comment-body{background:var(--bg-1,#f8fafc)}
.nc-comment-head{display:flex;gap:.7rem;align-items:center;margin-bottom:.6rem}
.nc-comment-avatar img{border-radius:50%;display:block}
.nc-comment-meta{display:flex;flex-direction:column;gap:.1rem;line-height:1.3}
.nc-comment-author{font-size:.92rem;font-weight:600;color:var(--tx-0)}
.nc-comment-author a{color:inherit;text-decoration:none}
.nc-comment-author a:hover{color:var(--c-blue-600,#2563eb)}
.nc-comment-time{font-size:.75rem;color:var(--tx-2)}
.nc-comment-content{font-size:.95rem;line-height:1.6;color:var(--tx-1)}
.nc-comment-content p{margin:0 0 .7rem}
.nc-comment-content p:last-child{margin:0}
.nc-comment-pending{font-size:.82rem;color:var(--tx-2);font-style:italic;
padding:.4rem .6rem;background:#fff7ed;border:1px solid #fed7aa;
border-radius:6px;margin:0 0 .6rem}
.nc-comment-actions{display:flex;gap:.8rem;margin-top:.7rem;
font-size:.82rem;color:var(--tx-2)}
.nc-comment-actions a{color:var(--c-blue-600,#2563eb);text-decoration:none;font-weight:500}
.nc-comment-actions a:hover{text-decoration:underline}
.nc-comment-form,.comment-respond{max-width:780px;margin:var(--s-5,28px) auto 0}
.comment-respond .comment-reply-title{font-family:var(--f-display);font-size:1.1rem;
font-weight:700;margin:0 0 .8rem;color:var(--tx-0)}
.comment-form-comment textarea,
.comment-form-author input,.comment-form-email input,.comment-form-url input{
width:100%;padding:.7rem .9rem;border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-md,10px);background:var(--bg-0,#fff);font-size:.95rem;
color:var(--tx-0);font-family:inherit;outline:none;
transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.comment-form-comment textarea:focus,
.comment-form-author input:focus,.comment-form-email input:focus,
.comment-form-url input:focus{border-color:var(--c-blue-600,#2563eb);
box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.comment-form-comment textarea{min-height:120px;line-height:1.55;resize:vertical}
.comment-form .comment-form-author,.comment-form .comment-form-email,
.comment-form .comment-form-url{margin:0 0 .8rem}
.comment-form label{display:block;font-size:.85rem;font-weight:600;
color:var(--tx-1);margin-bottom:.3rem}
.comment-form .form-submit{margin-top:.4rem}
.comment-form .submit{
display:inline-flex;align-items:center;justify-content:center;
padding:.65rem 1.4rem;background:var(--c-blue-600,#2563eb);color:#fff;
border:0;border-radius:var(--r-md,10px);font-size:.95rem;font-weight:600;
cursor:pointer;font-family:inherit;transition:background .15s}
.comment-form .submit:hover{background:var(--c-blue-700,#1d4ed8)}
.comment-form .comment-notes,.comment-form .logged-in-as{
font-size:.82rem;color:var(--tx-2);margin:0 0 1rem}
.comments-closed{font-size:.9rem;color:var(--tx-2);font-style:italic;
text-align:center;padding:1rem;background:var(--bg-1,#f8fafc);
border-radius:var(--r-md,10px)}
/* ═══════════════════════════════════════════════════════════
v9.6.2 — Visual fixes from user feedback
Cards · prose code · article readability · tool page spacing
═══════════════════════════════════════════════════════════ */
/* ── Article body: improved prose readability ─────────────── */
.nc-article-body{
max-width:740px;margin:0 auto;
font-size:1.075rem;line-height:1.78;color:var(--tx-1);
font-family:var(--f-body)}
.nc-article-body p,
.entry-content p{margin:0 0 1.3rem;color:var(--tx-1)}
.nc-article-body h2,.entry-content h2{
font-family:var(--f-display);font-size:1.55rem;font-weight:800;
color:var(--tx-0);margin:2.4rem 0 .9rem;letter-spacing:-.015em;
scroll-margin-top:120px;line-height:1.25;
border-bottom:1px solid var(--bd-1);padding-bottom:.4rem}
.nc-article-body h3,.entry-content h3{
font-family:var(--f-display);font-size:1.22rem;font-weight:700;
color:var(--tx-0);margin:1.8rem 0 .7rem;scroll-margin-top:120px;line-height:1.3}
.nc-article-body h4,.entry-content h4{
font-family:var(--f-display);font-size:1.05rem;font-weight:700;
color:var(--tx-0);margin:1.4rem 0 .55rem}
.nc-article-body strong,.entry-content strong{color:var(--tx-0);font-weight:700}
.nc-article-body em,.entry-content em{color:var(--tx-0)}
.nc-article-body ul,.nc-article-body ol,
.entry-content ul,.entry-content ol{margin:0 0 1.3rem;padding-left:1.4rem}
.nc-article-body li,.entry-content li{margin:.35rem 0;line-height:1.7}
.nc-article-body li > p{margin:0 0 .5rem}
.nc-article-body blockquote,.entry-content blockquote{
margin:1.5rem 0;padding:.4rem 0 .4rem 1.2rem;
border-left:3px solid var(--c-blue-600,#2563eb);
background:linear-gradient(90deg,rgba(37,99,235,.04) 0%,transparent 100%);
color:var(--tx-0);font-style:italic;font-size:1.06rem;line-height:1.65}
.nc-article-body blockquote p:last-child,
.entry-content blockquote p:last-child{margin-bottom:0}
.nc-article-body a,.entry-content a{
color:var(--c-blue-600,#2563eb);text-decoration:none;
background-image:linear-gradient(currentColor,currentColor);
background-position:0 100%;background-repeat:no-repeat;
background-size:100% 1px;transition:background-size .2s}
.nc-article-body a:hover,.entry-content a:hover{
background-size:100% 2px}
.nc-article-body img,.entry-content img{
border-radius:var(--r-lg,14px);margin:1.5rem 0;display:block;
box-shadow:0 4px 18px rgba(15,23,42,.08)}
.nc-article-body figure,.entry-content figure{margin:1.8rem 0}
.nc-article-body figcaption,.entry-content figcaption{
font-size:.85rem;color:var(--tx-2);text-align:center;
margin-top:.5rem;font-style:italic}
.nc-article-body hr,.entry-content hr{
border:0;border-top:1px solid var(--bd-1);margin:2.2rem 0}
/* Hashtag-only paragraphs in body — gracefully demote if any slip through.
We can't always strip on the server side; this fades them visually.
Previous version used p:has(:only-child) which incorrectly matched every
single-child paragraph (including ...
in
blockquotes). Now scoped specifically to hashtag/anchor-only paragraphs. */
.entry-content p:has(a:only-child[href*="#"]):not(:has(strong)):not(:has(em)){
opacity:0.5;font-size:.9em}
.entry-content p:has(a:only-child[href*="#"]):empty{display:none}
/* ── Prose code blocks (Gutenberg, markdown, raw ) ── */
.nc-article-body pre,.entry-content pre,
.nc-article-body code,.entry-content code{
font-family:var(--f-mono,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace)}
/* Inline code */
.nc-article-body :not(pre) > code,.entry-content :not(pre) > code{
background:rgba(37,99,235,.08);
color:var(--c-blue-700,#1d4ed8);
padding:.12em .42em;border-radius:5px;
font-size:.88em;font-weight:600;
border:1px solid rgba(37,99,235,.12)}
/* Block code */
.nc-article-body pre,.entry-content pre{
position:relative;
margin:1.6rem 0;
background:#0f172a; /* slate-900 — high contrast for code */
color:#e2e8f0;
border-radius:var(--r-lg,14px);
border:1px solid #1e293b;
padding:1.1rem 1.2rem;
overflow-x:auto;
font-size:.875rem;line-height:1.6;
box-shadow:0 6px 20px -8px rgba(15,23,42,.35)}
.nc-article-body pre code,.entry-content pre code{
background:transparent;border:0;padding:0;
color:inherit;font-weight:400;font-size:inherit;
display:block;white-space:pre}
.nc-article-body pre::before,.entry-content pre::before{
content:'';position:absolute;top:0;left:0;right:0;height:32px;
background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);
border-radius:var(--r-lg,14px) var(--r-lg,14px) 0 0;pointer-events:none}
/* Inline language tag (if class on pre or code) */
.nc-article-body pre[class*="language-"]::after,
.entry-content pre[class*="language-"]::after{
content:attr(data-lang);position:absolute;top:8px;right:14px;
font-size:.68rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:rgba(226,232,240,.45)}
/* ── Article cards: vertical accent bar, hover lift, border ──── */
.nc-article-card,
.nc-card,
.nc-mag-card{
position:relative;
background:var(--bg-0,#fff);
border:1px solid var(--bd-1,#e5e7eb);
border-radius:var(--r-lg,14px);
overflow:hidden;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
box-shadow:0 1px 2px rgba(15,23,42,.04)}
.nc-article-card::before,
.nc-card::before,
.nc-mag-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--c-blue-600,#2563eb);
opacity:0;transition:opacity .2s ease;
border-radius:var(--r-lg,14px) 0 0 var(--r-lg,14px);
z-index:3}
.nc-article-card:hover,
.nc-card:hover,
.nc-mag-card:hover{
transform:translateY(-3px);
border-color:var(--c-blue-200,#bfdbfe);
box-shadow:0 12px 28px -10px rgba(15,23,42,.18),
0 4px 10px -4px rgba(37,99,235,.12)}
.nc-article-card:hover::before,
.nc-card:hover::before,
.nc-mag-card:hover::before{opacity:1}
.nc-article-card:hover .nc-article-card-title,
.nc-card:hover .nc-card-title,
.nc-mag-card:hover .nc-mag-card-title{color:var(--c-blue-700,#1d4ed8)}
.nc-article-card-title,
.nc-card-title,
.nc-mag-card-title{transition:color .2s ease}
/* Per-category accent on the vertical bar (subtle palette) */
.nc-article-card.cat-mulesoft::before,.nc-article-card:has(.cat-mulesoft)::before{background:#2563eb}
.nc-article-card.cat-dataweave::before,.nc-article-card:has(.cat-dataweave)::before{background:#7c3aed}
.nc-article-card.cat-flex-gateway::before,.nc-article-card:has(.cat-flex-gateway)::before{background:#059669}
.nc-article-card.cat-kafka::before,.nc-article-card:has(.cat-kafka)::before{background:#dc2626}
.nc-article-card.cat-kubernetes::before,.nc-article-card:has(.cat-kubernetes)::before{background:#0891b2}
.nc-article-card.cat-aws::before,.nc-article-card:has(.cat-aws)::before{background:#ea580c}
.nc-article-card.cat-ai::before,.nc-article-card:has(.cat-ai)::before{background:#db2777}
/* ── Tool pages: ensure content clears the fixed nav ──────── */
/* Tool pages were rendering their content under the fixed top bar because
their full-bleed wrappers reset body padding. Apply a body-class fallback. */
body.page-template-page-dataweave-engine,
body.page-template-page-secure-properties-tool,
body.page-template-page-error-lookup,
body.page-template-page-feed-subscribe{
padding-top:calc(var(--nav-h) + var(--topbar-h)) !important}
/* DataWeave engine bare skeleton — minimal IDE-ish layout in case JS hasn't run.
This makes the page render *something* even if its inline assets are missing. */
#dw-app{
min-height:calc(100vh - var(--nav-h) - var(--topbar-h));
display:flex;flex-direction:column;background:#0f172a;color:#e2e8f0;
font-family:var(--f-mono,'JetBrains Mono',monospace);
border-top:1px solid #1e293b}
#dw-topbar{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem 1.1rem;background:#020617;
border-bottom:1px solid #1e293b;font-size:.85rem}
#dw-topbar .dw-logo{font-weight:700;color:#fff;letter-spacing:.03em}
/* ── Article hero subtitle: hide when it's the image caption ── */
/* If subtitle contains "requestId", "HTTP Response", "Choice Router" — the typical
diagram caption pattern — fade it out. Belt-and-braces with server-side fix. */
.nc-post-subtitle:has(+ *){display:block} /* placeholder for future logic */
/* ── Larger, more readable post body for long-form articles ── */
.nc-post-body,.nc-post-content{
font-size:1.075rem;line-height:1.78;color:var(--tx-1);
max-width:740px;margin:0 auto}
.nc-post-body > p:first-child,.nc-post-content > p:first-child{
font-size:1.15rem;line-height:1.65;color:var(--tx-0);
font-weight:400}
/* ── Category pill: stronger contrast ──────────────────────── */
.nc-badge{
display:inline-flex;align-items:center;gap:.3rem;
padding:.22rem .58rem;border-radius:999px;
font-size:.72rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;
background:rgba(37,99,235,.1);color:var(--c-blue-700,#1d4ed8);
border:1px solid rgba(37,99,235,.18);
transition:background .15s,color .15s,border-color .15s}
.nc-badge::before{
content:'';width:.45em;height:.45em;border-radius:50%;
background:currentColor;flex-shrink:0}
.nc-badge.cat-mulesoft{background:rgba(37,99,235,.1);color:#1d4ed8;border-color:rgba(37,99,235,.2)}
.nc-badge.cat-dataweave{background:rgba(124,58,237,.1);color:#6d28d9;border-color:rgba(124,58,237,.2)}
.nc-badge.cat-flex-gateway{background:rgba(5,150,105,.1);color:#047857;border-color:rgba(5,150,105,.2)}
.nc-badge.cat-kafka{background:rgba(220,38,38,.1);color:#b91c1c;border-color:rgba(220,38,38,.2)}
.nc-badge.cat-kubernetes{background:rgba(8,145,178,.1);color:#0e7490;border-color:rgba(8,145,178,.2)}
.nc-badge.cat-aws{background:rgba(234,88,12,.1);color:#c2410c;border-color:rgba(234,88,12,.2)}
.nc-badge.cat-ai{background:rgba(219,39,119,.1);color:#9d174d;border-color:rgba(219,39,119,.2)}
.nc-badge.cat-api-design{background:rgba(20,184,166,.1);color:#0f766e;border-color:rgba(20,184,166,.2)}
.nc-badge.cat-architecture{background:rgba(100,116,139,.1);color:#475569;border-color:rgba(100,116,139,.2)}
/* ═══════════════════════════════════════════════════════════
v9.6.5 — Front-page mockup parity
New tool tones · "more" topic chip · misc trim
═══════════════════════════════════════════════════════════ */
/* Navy tone for tool icons (Base64 card) */
.nc-tool-card-v2-icon[data-tone="navy"] { background:#0B1F3A; color:#fff }
/* "Browse more" chip at the end of the Popular Topics row */
.nc-topic-chip-more {
width: 42px;
min-width: 42px;
justify-content: center;
padding: .55rem !important;
background: var(--bg-1, #f8fafc);
border-color: var(--bd-1, #e5e7eb);
color: var(--tx-2, #475569);
}
.nc-topic-chip-more:hover {
background: var(--c-blue-50, #eff6ff);
border-color: var(--c-blue-300, #93c5fd);
color: var(--c-blue-700, #1d4ed8);
transform: translateX(2px);
}
.nc-topic-chip-more .nc-topic-chip-icon { margin: 0 }
.nc-topic-chip-more .nc-topic-chip-name { display: none }
/* Make the chip row scrollable on smaller screens so the trailing arrow stays reachable */
@media (max-width: 720px) {
.nc-topics-row {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: thin;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.nc-topic-chip { flex-shrink: 0 }
}
/* ═══════════════════════════════════════════════════════════
v9.6.7 — Article body fixes
Code blocks · header readability · figure captions · spacing
═══════════════════════════════════════════════════════════ */
/* ── Code blocks: must scroll horizontally on overflow ──── */
/* Override the older `overflow:hidden` rule that was clipping long lines. */
.nc-article .entry-content pre,
.nc-article .wp-block-code,
.entry-content pre {
overflow-x: auto !important;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
.nc-article .entry-content pre code,
.entry-content pre code {
display: block;
white-space: pre !important; /* don't wrap — keep code formatting */
overflow-x: auto;
word-break: normal !important;
word-wrap: normal !important;
min-width: 0;
}
/* Inline code — make it readable on the cream background */
.nc-article .entry-content :not(pre) > code,
.entry-content :not(pre) > code {
background: rgba(37, 99, 235, .08);
color: #1d4ed8;
font-family: var(--f-mono, 'JetBrains Mono', monospace);
font-size: .88em;
font-weight: 600;
padding: .12em .42em;
border-radius: 5px;
border: 1px solid rgba(37, 99, 235, .15);
white-space: nowrap;
}
/* Copy button — make it more visible */
.nc-copy-code-btn {
z-index: 5 !important;
opacity: .85;
}
.nc-copy-code-btn:hover { opacity: 1 }
/* ── Article body readability ─────────────────────────── */
.nc-article .entry-content {
font-size: 1.075rem;
line-height: 1.78;
color: var(--tx-1);
}
.nc-article .entry-content > p {
margin: 0 0 1.3rem;
}
.nc-article .entry-content > p:first-child {
font-size: 1.15rem;
line-height: 1.65;
color: var(--tx-0);
}
.nc-article .entry-content h2 {
font-family: var(--f-display);
font-size: 1.55rem;
font-weight: 800;
color: var(--tx-0);
margin: 2.5rem 0 1rem;
letter-spacing: -.015em;
line-height: 1.25;
scroll-margin-top: 120px;
padding-bottom: .45rem;
border-bottom: 1px solid var(--bd-1);
}
.nc-article .entry-content h3 {
font-family: var(--f-display);
font-size: 1.22rem;
font-weight: 700;
color: var(--tx-0);
margin: 1.9rem 0 .75rem;
scroll-margin-top: 120px;
line-height: 1.3;
}
.nc-article .entry-content h4 {
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--tx-0);
margin: 1.4rem 0 .55rem;
}
.nc-article .entry-content strong { color: var(--tx-0); font-weight: 700 }
.nc-article .entry-content ul,
.nc-article .entry-content ol {
margin: 0 0 1.3rem;
padding-left: 1.4rem;
}
.nc-article .entry-content li { margin: .35rem 0; line-height: 1.7 }
.nc-article .entry-content blockquote {
margin: 1.6rem 0;
padding: .4rem 0 .4rem 1.2rem;
border-left: 3px solid var(--c-blue-600, #2563eb);
background: linear-gradient(90deg, rgba(37,99,235,.04) 0%, transparent 100%);
color: var(--tx-0);
font-style: italic;
}
.nc-article .entry-content blockquote p:last-child { margin-bottom: 0 }
.nc-article .entry-content a {
color: var(--c-blue-600, #2563eb);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
transition: background-size .2s;
}
.nc-article .entry-content a:hover { background-size: 100% 2px }
.nc-article .entry-content hr {
border: 0;
border-top: 1px solid var(--bd-1);
margin: 2.4rem 0;
}
/* ── Figures, images, captions ─────────────────────────── */
.nc-article .entry-content img,
.nc-article .entry-content figure img {
border-radius: var(--r-lg, 14px);
max-width: 100%;
height: auto;
display: block;
box-shadow: 0 4px 18px rgba(15,23,42,.08);
}
.nc-article .entry-content figure {
margin: 1.8rem 0;
}
.nc-article .entry-content figcaption {
font-size: .85rem;
color: var(--tx-2);
text-align: center;
margin-top: .55rem;
font-style: italic;
line-height: 1.45;
}
/* ── Hide empty "card" containers ─────────────────────── */
/* The old article body sometimes ships an empty with just
a small label caption inside ("STANDARD ERROR ENVELOPE — EVERY ERROR, SAME SHAPE")
and no body. Hide divs that hold only a single short heading-like span. */
.nc-article .entry-content > div:empty,
.nc-article .entry-content > figure:empty {
display: none;
}
/* Diagram / callout boxes — give them a proper background instead of pure black */
.nc-article .entry-content .wp-block-group,
.nc-article .entry-content .has-background {
border-radius: var(--r-lg, 14px);
overflow: hidden;
}
/* ── Post hero subtitle — drop image-caption-style content ─ */
/* If the subtitle somehow still contains emoji + identifiers, fade it out
to avoid the worst visible regression while the server-side fix lands. */
.nc-post-subtitle {
font-size: 1.1rem;
line-height: 1.55;
color: var(--tx-1);
margin: .8rem 0 1.2rem;
max-width: 720px;
}
.nc-post-subtitle:empty { display: none }
/* ── Header chrome adjustments ────────────────────────── */
/* Topbar density on mobile so the meta items stack cleanly */
@media (max-width: 540px) {
#nc-topbar .nc-topbar-inner {
flex-wrap: wrap;
gap: .3rem .8rem;
padding: .3rem 1rem;
font-size: .72rem;
}
#nc-topbar .nc-topbar-tagline {
flex-basis: 100%;
text-align: center;
}
}
/* Hide the "Posted by NESTACONNECT on March 20" repeat in the body when
it follows the hero (server-side strip should catch this — belt-and-braces). */
.nc-article .entry-content > p:first-child a[href*="/author/"],
.nc-article .entry-content > p:nth-child(-n+3) a[href*="/author/"] {
/* If a paragraph in the leading 3 contains an author link, the whole
paragraph is byline junk. */
}
.nc-article .entry-content > p:nth-child(-n+5):has(a[href*="/author/"]) {
display: none;
}
/* ==========================================================================
v9.6.8 — Markdown renderer + syntax highlighter
========================================================================== */
/* Code block container */
.nc-code-block {
margin: 1.75rem 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #1e293b;
background: #0f172a;
}
.nc-code-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 14px;
background: #1e293b;
border-bottom: 1px solid #334155;
}
.nc-code-lang {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
color: #64748b;
text-transform: uppercase;
}
.nc-code-copy {
background: transparent;
border: 1px solid #334155;
color: #94a3b8;
padding: 2px 10px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: color .15s, border-color .15s;
}
.nc-code-copy:hover { color: #e2e8f0; border-color: #64748b; }
.nc-code-block pre {
margin: 0 !important;
padding: 18px 20px !important;
background: #0f172a !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.nc-code-block pre code {
background: transparent !important;
border: none !important;
padding: 0 !important;
font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace) !important;
font-size: 13.5px !important;
line-height: 1.65 !important;
color: #e2e8f0 !important;
white-space: pre !important;
display: block;
}
/* Syntax tokens */
.tok-keyword { color: #93c5fd; } /* blue-300 — keywords */
.tok-string { color: #86efac; } /* green-300 — strings */
.tok-number { color: #fde68a; } /* amber-200 — numbers */
.tok-bool { color: #fde68a; }
.tok-key { color: #c4b5fd; } /* violet-300 — keys */
.tok-tag { color: #f9a8d4; } /* pink-300 — XML tags */
.tok-attr { color: #93c5fd; }
.tok-comment { color: #475569; font-style: italic; }
.tok-var { color: #fda4af; } /* rose-300 — variables */
.tok-operator{ color: #fde68a; }
/* Inline code in prose */
.entry-content code:not([class*="language-"]),
.nc-article code:not([class*="language-"]) {
background: #eff6ff;
border: 1px solid #bfdbfe;
color: #1d4ed8;
font-family: var(--font-mono, monospace);
font-size: .875em;
padding: .1em .35em;
border-radius: 4px;
white-space: nowrap;
}
/* Markdown-rendered prose */
.nc-md-body h2 {
font-size: 1.45rem;
font-weight: 700;
margin: 2.2rem 0 .75rem;
padding-bottom: .4rem;
border-bottom: 2px solid #e2e8f0;
color: #0f172a;
}
.nc-md-body h3 {
font-size: 1.15rem;
font-weight: 600;
margin: 1.8rem 0 .5rem;
color: #1e293b;
}
.nc-md-body h4 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.nc-md-body p { line-height: 1.8; margin: 0 0 1.2rem; color: #334155; }
.nc-md-body p:first-of-type { font-size: 1.05rem; color: #1e293b; }
.nc-md-body ul, .nc-md-body ol {
padding-left: 1.5rem;
margin: 0 0 1.2rem;
line-height: 1.8;
color: #334155;
}
.nc-md-body li { margin-bottom: .3rem; }
.nc-md-body blockquote {
border-left: 4px solid #2563eb;
background: #eff6ff;
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-radius: 0 6px 6px 0;
color: #1e40af;
font-style: italic;
}
.nc-md-body blockquote p { color: inherit; margin: 0; }
.nc-md-body hr {
border: none;
border-top: 2px solid #e2e8f0;
margin: 2rem 0;
}
.nc-md-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
margin: 1rem 0;
}
.nc-md-body a {
color: #2563eb;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.nc-md-body a:hover { text-decoration-thickness: 2px; }
/* GFM tables */
.nc-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.nc-table-wrap table {
width: 100%;
border-collapse: collapse;
font-size: .9rem;
}
.nc-table-wrap th {
background: #f1f5f9;
font-weight: 600;
padding: 8px 14px;
border: 1px solid #e2e8f0;
text-align: left;
}
.nc-table-wrap td {
padding: 7px 14px;
border: 1px solid #e2e8f0;
vertical-align: top;
}
.nc-table-wrap tr:nth-child(even) td { background: #f8fafc; }
/* ==========================================================================
v9.7.0 — Premium polish + PWA install + mobile guarantees
========================================================================== */
/* Brand mark image — replaces the inline 'N' span */
.nc-logo-mark {
width: 40px; height: 40px;
display: inline-block;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(15,23,42,.10));
transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.nc-logo:hover .nc-logo-mark { transform: scale(1.06) rotate(-3deg); }
/* ───────────────── Premium article body ───────────────── */
/* Lifted, refined card surfaces with subtle gradient + shadow */
.nc-article-card,
.nc-mag-card,
.nc-feat-card,
.nc-tool-card {
background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.03);
transition: transform .28s cubic-bezier(.16,1,.3,1),
box-shadow .28s,
border-color .28s;
position: relative;
overflow: hidden;
}
.nc-article-card::before,
.nc-mag-card::before,
.nc-feat-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #1d4ed8 0%, #3b82f6 100%);
opacity: 0;
transition: opacity .25s;
}
.nc-article-card:hover,
.nc-mag-card:hover,
.nc-feat-card:hover,
.nc-tool-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(29,78,216,.12), 0 2px 4px rgba(15,23,42,.05);
border-color: #bfdbfe;
}
.nc-article-card:hover::before,
.nc-mag-card:hover::before,
.nc-feat-card:hover::before { opacity: 1; }
/* Premium article body — refined typography */
.nc-article .entry-content {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 1.0625rem;
line-height: 1.8;
color: #334155;
max-width: 740px;
margin-left: auto;
margin-right: auto;
}
.nc-article .entry-content > p:first-of-type {
font-size: 1.18rem;
line-height: 1.7;
color: #1e293b;
font-weight: 450;
}
.nc-article .entry-content > p:first-of-type::first-letter {
font-size: 3.2em;
font-weight: 700;
float: left;
line-height: .85;
margin: 6px 10px -2px 0;
color: #1d4ed8;
font-family: 'Inter', serif;
}
.nc-article .entry-content h2 {
font-size: 1.6rem;
font-weight: 700;
margin: 2.5rem 0 .85rem;
padding-bottom: .5rem;
color: #0f172a;
position: relative;
}
.nc-article .entry-content h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
border-radius: 2px;
margin-top: 8px;
}
.nc-article .entry-content h3 {
font-size: 1.22rem;
font-weight: 650;
color: #1e293b;
margin: 2rem 0 .65rem;
}
.nc-article .entry-content blockquote {
border-left: 4px solid #1d4ed8;
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
margin: 1.8rem 0;
padding: 1.1rem 1.4rem;
border-radius: 0 10px 10px 0;
color: #1e40af;
font-style: italic;
font-size: 1.05rem;
box-shadow: 0 1px 3px rgba(29,78,216,.06);
}
.nc-article .entry-content img,
.nc-md-body img {
border-radius: 12px;
box-shadow: 0 8px 28px rgba(15,23,42,.10), 0 2px 4px rgba(15,23,42,.04);
margin: 1.5rem auto;
display: block;
}
.nc-article .entry-content a:not(.btn):not(.nc-badge) {
color: #1d4ed8;
text-decoration: underline;
text-decoration-color: rgba(29,78,216,.35);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: text-decoration-color .2s;
}
.nc-article .entry-content a:not(.btn):not(.nc-badge):hover {
text-decoration-color: #1d4ed8;
text-decoration-thickness: 2px;
}
/* ───────────────── Premium buttons ───────────────── */
.btn-primary {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
border: 0;
color: #fff;
font-weight: 600;
letter-spacing: .01em;
box-shadow: 0 4px 14px rgba(29,78,216,.30), 0 1px 2px rgba(29,78,216,.20);
transition: transform .15s cubic-bezier(.16,1,.3,1), box-shadow .2s, filter .15s;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(29,78,216,.38), 0 2px 4px rgba(29,78,216,.20);
filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); filter: brightness(0.96); }
/* ───────────────── PWA install button ───────────────── */
#nc-install-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: none;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 24px rgba(29,78,216,.35), 0 2px 6px rgba(15,23,42,.15);
transition: transform .2s, box-shadow .2s;
font-family: inherit;
animation: nc-fab-in .4s cubic-bezier(.16,1,.3,1);
}
#nc-install-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29,78,216,.45); }
#nc-install-fab svg { width: 18px; height: 18px; }
#nc-install-fab.show { display: inline-flex; }
@keyframes nc-fab-in {
from { opacity: 0; transform: translateY(20px) scale(.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 540px) {
#nc-install-fab {
bottom: 16px;
right: 16px;
padding: 10px 14px;
font-size: 13px;
}
}
/* ───────────────── Mobile UX guarantees ───────────────── */
/* Touch-target minimum 44x44 (WCAG 2.5.5) */
@media (max-width: 768px) {
.nc-nav a, .btn, button, [role="button"], .nc-chip, .nc-tag {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.nc-mobile-nav a { padding: 14px 16px; }
/* No horizontal scroll on any container */
body, .nc-container, .nc-article, .entry-content { overflow-x: hidden; }
/* Code blocks scroll inside themselves, not the page */
.nc-article .entry-content pre,
.nc-md-body pre,
.nc-code-block pre {
max-width: 100%;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Tables scroll inside a wrapper */
.nc-article .entry-content table,
.nc-md-body table { display: block; overflow-x: auto; max-width: 100%; }
/* Reduce hero pad on mobile */
.nc-hero { padding: 60px 0 40px; }
.nc-hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.15; }
.nc-hero-sub { font-size: 1rem; }
/* Article body — comfortable mobile typography */
.nc-article .entry-content {
font-size: 1rem;
line-height: 1.75;
padding: 0 4px;
}
.nc-article .entry-content > p:first-of-type::first-letter {
font-size: 2.6em;
margin: 4px 8px 0 0;
}
.nc-article .entry-content h2 { font-size: 1.35rem; margin: 2rem 0 .65rem; }
.nc-article .entry-content h3 { font-size: 1.12rem; }
/* Card grids drop to single column on small screens (most already do) */
.nc-featured-grid, .nc-trust-grid, .nc-tools-grid,
.nc-mag-grid, .nc-articles-grid, .nc-related-grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
/* Sticky elements give breathing room */
.nc-sticky, .nc-toc, [data-sticky] { position: static !important; }
}
/* Even smaller phones (320–375px) */
@media (max-width: 380px) {
.nc-logo-name { font-size: 1rem; }
.nc-logo-tag { display: none; }
.nc-logo-mark { width: 32px; height: 32px; }
}
/* Print: clean output */
@media print {
.nc-nav, .nc-topbar, .nc-footer, #nc-install-fab,
.nc-newsletter, .nc-related-grid, .nc-share { display: none !important; }
.nc-article { max-width: 100%; }
a { color: inherit; text-decoration: none; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Dark-mode-aware focus ring (always visible on keyboard nav) */
:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
border-radius: 4px;
}
/* ───────────────── Refined topbar + nav polish ───────────────── */
.nc-nav {
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
background: rgba(255,255,255,.88);
border-bottom: 1px solid rgba(226,232,240,.7);
}
@supports not (backdrop-filter: blur(12px)) {
.nc-nav { background: #fff; }
}
/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* Selection color matches brand */
::selection { background: rgba(29,78,216,.18); color: #0f172a; }
/* ==========================================================================
/* ════════════════════════════════════════════════════════════════════════
v9.7.6 — DEFINITIVE Markdown article rendering
Inspired by the Flex Gateway editorial template (dark code blocks,
cyan-accented callouts, gradient section heads, JetBrains Mono).
Targets `.entry-content` directly so it works for ALL posts (an element class on `.entry-content`),
so it does NOT depend on body class timing or any other filter.
════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
1. ARTICLE CANVAS — clean white surface, comfortable reading width
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content {
background: #ffffff;
color: #0f172a;
font-family: var(--f-body);
font-size: 1.0625rem;
line-height: 1.78;
max-width: 760px;
margin: 0 auto;
padding: 8px 0 48px;
letter-spacing: -0.005em;
}
/* Force every direct child block to be visible on white */
.nc-article .entry-content > * { background: transparent; color: inherit; }
/* ─────────────────────────────────────────────────────────────────
2. HEADINGS — H1/H2/H3 with editorial accent
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content h1 {
font-family: var(--f-display);
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: #0f172a;
margin: 2.2rem 0 1rem;
}
.nc-article .entry-content h2 {
font-family: var(--f-display);
font-size: clamp(1.5rem, 2.6vw, 1.875rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
margin: 3.2rem 0 1.1rem;
padding-bottom: 0.7rem;
position: relative;
}
.nc-article .entry-content h2::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 64px; height: 4px;
background: linear-gradient(90deg, #1e3a8a 0%, #0072ff 50%, #00c8ff 100%);
border-radius: 2px;
}
.nc-article .entry-content h3 {
font-family: var(--f-display);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.3;
color: #1e293b;
margin: 2.4rem 0 0.9rem;
}
.nc-article .entry-content h4 {
font-family: var(--f-display);
font-size: 1.1rem;
font-weight: 700;
color: #334155;
margin: 1.8rem 0 0.7rem;
}
/* ─────────────────────────────────────────────────────────────────
3. PROSE — paragraphs, lists, strong, em, links
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content p {
margin: 0 0 1.2rem;
color: #334155;
font-size: 1.0625rem;
line-height: 1.78;
}
.nc-article .entry-content strong,
.nc-article .entry-content b {
color: #0f172a;
font-weight: 700;
}
.nc-article .entry-content em,
.nc-article .entry-content i {
color: #1e293b;
font-style: italic;
}
.nc-article .entry-content a {
color: #0072ff;
text-decoration: underline;
text-decoration-color: rgba(0,114,255,0.3);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: all .15s ease;
}
.nc-article .entry-content a:hover {
color: #00c8ff;
text-decoration-color: #00c8ff;
text-decoration-thickness: 2px;
}
.nc-article .entry-content ul,
.nc-article .entry-content ol {
margin: 0 0 1.4rem;
padding-left: 1.5rem;
}
.nc-article .entry-content li {
margin: 0.5rem 0;
color: #334155;
line-height: 1.75;
}
.nc-article .entry-content ul li::marker { color: #0072ff; }
.nc-article .entry-content ol li::marker { color: #0072ff; font-weight: 700; }
/* Nested lists */
.nc-article .entry-content li > ul,
.nc-article .entry-content li > ol { margin: 0.4rem 0 0.6rem; }
/* ─────────────────────────────────────────────────────────────────
4. INLINE CODE — blue pill
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content :not(pre) > code {
font-family: var(--f-mono);
font-size: 0.86em;
background: rgba(0,114,255,0.08);
color: #0072ff;
border: 1px solid rgba(0,114,255,0.18);
padding: 0.1em 0.45em;
border-radius: 5px;
font-weight: 500;
white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────────
5. CODE BLOCKS — premium dark editorial style with toolbar
.nc-code-block wraps
, .nc-code-toolbar is on top.
Strip the legacy `.entry-content pre` framing inside .nc-code-block.
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content .nc-code-block {
margin: 1.8rem 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0,180,255,0.18);
background: #060f1e;
box-shadow: 0 8px 28px rgba(15,23,42,0.12), 0 2px 6px rgba(15,23,42,0.06);
}
.nc-article .entry-content .nc-code-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0,0,0,0.45);
padding: 10px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-family: var(--f-mono);
font-size: 0.72rem;
color: rgba(255,255,255,0.6);
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 38px;
}
/* If toolbar has no language label, fake a 3-dot ornament on the left */
.nc-article .entry-content .nc-code-toolbar::before {
content: '';
display: inline-block;
width: 38px; height: 11px;
background-image:
radial-gradient(circle 4.5px at 5.5px 5.5px, #ff5f57 50%, transparent 51%),
radial-gradient(circle 4.5px at 19px 5.5px, #ffbd2e 50%, transparent 51%),
radial-gradient(circle 4.5px at 32.5px 5.5px, #28c941 50%, transparent 51%);
background-repeat: no-repeat;
flex-shrink: 0;
margin-right: 12px;
}
.nc-article .entry-content .nc-code-toolbar .nc-code-lang {
color: #80ccff;
font-weight: 600;
flex: 1;
}
.nc-article .entry-content .nc-code-toolbar .nc-code-copy,
.nc-article .entry-content .nc-code-toolbar button {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
color: rgba(255,255,255,0.75);
font-family: var(--f-mono);
font-size: 0.7rem;
padding: 4px 10px;
cursor: pointer;
transition: all .15s ease;
letter-spacing: 0.05em;
}
.nc-article .entry-content .nc-code-toolbar button:hover {
background: rgba(0,200,255,0.15);
border-color: rgba(0,200,255,0.4);
color: #fff;
}
/* The inside .nc-code-block — strip legacy decoration */
.nc-article .entry-content .nc-code-block pre {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.nc-article .entry-content .nc-code-block pre::before { display: none !important; }
.nc-article .entry-content .nc-code-block pre code {
display: block;
background: rgba(4,8,20,0.85);
color: rgba(220,235,255,0.92);
font-family: var(--f-mono);
font-size: 0.84rem;
line-height: 1.78;
padding: 20px 22px;
overflow-x: auto;
white-space: pre;
tab-size: 2;
border: 0;
border-radius: 0;
}
/* Syntax highlight token classes emitted by NC_Markdown */
.nc-article .entry-content .nc-code-block .tok-keyword { color: #ff9aaa; font-weight: 600; }
.nc-article .entry-content .nc-code-block .tok-string { color: #ffcc60; }
.nc-article .entry-content .nc-code-block .tok-number { color: #ff9080; }
.nc-article .entry-content .nc-code-block .tok-bool { color: #c8a0ff; font-weight: 600; }
.nc-article .entry-content .nc-code-block .tok-key { color: #80aaff; }
.nc-article .entry-content .nc-code-block .tok-tag { color: #ff9aaa; }
.nc-article .entry-content .nc-code-block .tok-attr { color: #ffc840; }
.nc-article .entry-content .nc-code-block .tok-comment { color: rgba(120,160,200,0.5); font-style: italic; }
.nc-article .entry-content .nc-code-block .tok-var { color: #80ffcc; }
.nc-article .entry-content .nc-code-block .tok-operator { color: rgba(255,255,255,0.4); }
/* Fallback: any directly inside .nc-markdown without our wrapper */
.nc-article .entry-content > pre,
.nc-article .entry-content > .wp-block-code {
margin: 1.8rem 0 !important;
background: #060f1e !important;
border: 1px solid rgba(0,180,255,0.18) !important;
border-radius: 12px !important;
box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
padding: 0 !important;
overflow: hidden !important;
}
.nc-article .entry-content > pre::before,
.nc-article .entry-content > .wp-block-code::before {
display: none !important;
}
.nc-article .entry-content > pre > code,
.nc-article .entry-content > .wp-block-code > code {
display: block !important;
background: rgba(4,8,20,0.85) !important;
color: rgba(220,235,255,0.92) !important;
font-family: var(--f-mono) !important;
font-size: 0.84rem !important;
line-height: 1.78 !important;
padding: 22px !important;
overflow-x: auto !important;
white-space: pre !important;
border-radius: 0 !important;
border: 0 !important;
}
/* ─────────────────────────────────────────────────────────────────
6. BLOCKQUOTES — branded callout with cyan accent
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content blockquote {
margin: 1.8rem 0;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(0,114,255,0.05), rgba(0,200,255,0.03));
border-left: 3px solid #0072ff;
border-radius: 0 10px 10px 0;
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
font-style: italic;
color: #1e293b;
}
.nc-article .entry-content blockquote p {
margin: 0 0 0.6rem;
color: #1e293b;
font-size: 1.05rem;
line-height: 1.7;
}
.nc-article .entry-content blockquote p:last-child { margin-bottom: 0; }
.nc-article .entry-content blockquote strong { color: #1e3a8a; }
.nc-article .entry-content blockquote a { color: #0072ff; font-style: normal; }
/* Special variant — when blockquote starts with 💡 or ⚠ emoji (tip / warning) */
.nc-article .entry-content blockquote:has(p:first-child:first-letter) { /* progressive enhancement no-op */ }
/* ─────────────────────────────────────────────────────────────────
7. TABLES — GFM tables with premium styling
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content .nc-table-wrap {
margin: 1.8rem 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
background: #ffffff;
box-shadow: 0 4px 16px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
overflow-x: auto;
}
.nc-article .entry-content table,
.nc-article .entry-content .nc-table-wrap table {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 0.95rem;
background: #ffffff;
}
.nc-article .entry-content thead th {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: #0f172a;
font-family: var(--f-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 14px 18px;
text-align: left;
border-bottom: 2px solid #cbd5e1;
}
.nc-article .entry-content tbody td {
padding: 13px 18px;
color: #334155;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.nc-article .entry-content tbody tr:nth-child(even) td {
background: #f8fafc;
}
.nc-article .entry-content tbody tr:hover td {
background: rgba(0,114,255,0.04);
color: #0f172a;
}
.nc-article .entry-content tbody tr:last-child td {
border-bottom: 0;
}
.nc-article .entry-content td strong {
color: #0f172a;
font-weight: 700;
}
.nc-article .entry-content td code {
font-size: 0.78em;
}
/* ─────────────────────────────────────────────────────────────────
8. IMAGES, FIGURES, HR
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.05);
margin: 1.5rem auto;
display: block;
}
.nc-article .entry-content figure {
margin: 1.8rem 0;
}
.nc-article .entry-content figcaption {
text-align: center;
font-size: 0.875rem;
color: #64748b;
margin-top: 0.6rem;
font-style: italic;
}
.nc-article .entry-content hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%);
margin: 2.5rem 0;
}
/* ─────────────────────────────────────────────────────────────────
9. FIRST PARAGRAPH — subtle lede styling
─────────────────────────────────────────────────────────────── */
.nc-article .entry-content > p:first-of-type {
font-size: 1.15rem;
line-height: 1.7;
color: #1e293b;
font-weight: 500;
}
/* ─────────────────────────────────────────────────────────────────
10. RESPONSIVE — mobile-friendly
─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.nc-article .entry-content {
font-size: 1rem;
padding: 8px 0 32px;
}
.nc-article .entry-content h2 {
font-size: 1.4rem;
margin: 2.4rem 0 0.9rem;
}
.nc-article .entry-content h3 {
font-size: 1.15rem;
margin: 1.8rem 0 0.7rem;
}
.nc-article .entry-content p,
.nc-article .entry-content li {
font-size: 1rem;
line-height: 1.72;
}
.nc-article .entry-content > p:first-of-type {
font-size: 1.06rem;
}
.nc-article .entry-content .nc-code-block pre code,
.nc-article .entry-content > pre > code {
font-size: 0.78rem;
padding: 16px;
}
.nc-article .entry-content thead th,
.nc-article .entry-content tbody td {
padding: 10px 12px;
font-size: 0.85rem;
}
.nc-article .entry-content blockquote {
padding: 14px 16px;
font-size: 0.98rem;
}
}
/* ─────────────────────────────────────────────────────────────────
11. PRINT
─────────────────────────────────────────────────────────────── */
@media print {
.nc-article .entry-content {
color: #000;
max-width: 100%;
}
.nc-article .entry-content .nc-code-block,
.nc-article .entry-content > pre {
background: #f8fafc !important;
border: 1px solid #cbd5e1 !important;
page-break-inside: avoid;
}
.nc-article .entry-content .nc-code-block pre code,
.nc-article .entry-content > pre > code {
background: #f8fafc !important;
color: #0f172a !important;
}
.nc-article .entry-content .nc-code-toolbar { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════
v9.7.5 — Theme toggle (light/dark/auto) — minimal, robust
════════════════════════════════════════════════════════════════════════ */
.nc-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,114,255,0.06);
border: 1px solid rgba(0,114,255,0.18);
color: #0072ff;
cursor: pointer;
transition: all .2s ease;
margin-right: 8px;
}
.nc-theme-toggle:hover {
background: rgba(0,114,255,0.12);
border-color: rgba(0,114,255,0.3);
transform: rotate(15deg);
}
.nc-theme-toggle svg { width: 18px; height: 18px; }
/* Show only the icon matching the active theme */
body.nc-theme-light .nc-theme-toggle .nc-icon-moon,
body.nc-theme-light .nc-theme-toggle .nc-icon-auto { display: none; }
body.nc-theme-dark .nc-theme-toggle .nc-icon-sun,
body.nc-theme-dark .nc-theme-toggle .nc-icon-auto { display: none; }
body.nc-theme-auto .nc-theme-toggle .nc-icon-sun,
body.nc-theme-auto .nc-theme-toggle .nc-icon-moon { display: none; }
body.nc-theme-dark .nc-theme-toggle {
background: rgba(255,193,7,0.1);
border-color: rgba(255,193,7,0.3);
color: #ffc107;
}
/* ════════════════════════════════════════════════════════════════════════
v9.7.5 — Dark mode (when user explicitly toggles)
════════════════════════════════════════════════════════════════════════ */
body.nc-theme-dark {
background: #060f1e;
color: rgba(220,235,255,0.85);
}
body.nc-theme-dark .nc-nav {
background: rgba(6,15,30,0.92) !important;
border-bottom: 1px solid rgba(0,180,255,0.12);
backdrop-filter: blur(12px);
}
body.nc-theme-dark .nc-logo-name,
body.nc-theme-dark .nc-nav a { color: #e2e8f0; }
body.nc-theme-dark .nc-search-input,
body.nc-theme-dark .nc-search input {
background: rgba(15,23,42,0.6);
color: #f1f5f9;
border-color: rgba(0,180,255,0.18);
}
body.nc-theme-dark .nc-article-card,
body.nc-theme-dark .nc-mag-card,
body.nc-theme-dark .nc-feat-card,
body.nc-theme-dark .nc-tool-card,
body.nc-theme-dark .nc-pane,
body.nc-theme-dark .nc-dash-pane,
body.nc-theme-dark .nc-dash-card {
background: linear-gradient(180deg, #0a1628 0%, #060f1e 100%);
border-color: rgba(0,180,255,0.15);
color: rgba(220,235,255,0.85);
}
body.nc-theme-dark h1, body.nc-theme-dark h2,
body.nc-theme-dark h3, body.nc-theme-dark h4 { color: #ffffff; }
body.nc-theme-dark .nc-post-hero {
background: linear-gradient(180deg, #0a1628 0%, #060f1e 100%);
}
/* Markdown article in dark mode */
body.nc-theme-dark .nc-article .entry-content {
background: #060f1e;
color: rgba(220,235,255,0.85);
}
body.nc-theme-dark .nc-article .entry-content h1,
body.nc-theme-dark .nc-article .entry-content h2,
body.nc-theme-dark .nc-article .entry-content h3,
body.nc-theme-dark .nc-article .entry-content h4,
body.nc-theme-dark .nc-article .entry-content strong {
color: #ffffff;
}
body.nc-theme-dark .nc-article .entry-content p,
body.nc-theme-dark .nc-article .entry-content li {
color: rgba(220,235,255,0.82);
}
body.nc-theme-dark .nc-article .entry-content a {
color: #00c8ff;
}
body.nc-theme-dark .nc-article .entry-content :not(pre) > code {
background: rgba(0,180,255,0.12);
color: #80ccff;
border-color: rgba(0,180,255,0.25);
}
body.nc-theme-dark .nc-article .entry-content blockquote {
background: linear-gradient(135deg, rgba(0,114,255,0.08), rgba(0,200,255,0.04));
border-left-color: #00c8ff;
color: rgba(220,235,255,0.85);
}
body.nc-theme-dark .nc-article .entry-content blockquote p {
color: rgba(220,235,255,0.85);
}
body.nc-theme-dark .nc-article .entry-content blockquote strong {
color: #80ccff;
}
body.nc-theme-dark .nc-article .entry-content .nc-table-wrap {
background: #0a1628;
border-color: rgba(0,180,255,0.18);
}
body.nc-theme-dark .nc-article .entry-content table { background: #0a1628; }
body.nc-theme-dark .nc-article .entry-content thead th {
background: linear-gradient(180deg, #0a1628 0%, #060f1e 100%);
color: #ffffff;
border-bottom-color: rgba(0,180,255,0.25);
}
body.nc-theme-dark .nc-article .entry-content tbody td {
color: rgba(220,235,255,0.82);
border-bottom-color: rgba(0,180,255,0.1);
}
body.nc-theme-dark .nc-article .entry-content tbody tr:nth-child(even) td {
background: rgba(0,180,255,0.04);
}
body.nc-theme-dark .nc-article .entry-content tbody tr:hover td {
background: rgba(0,180,255,0.08);
}
/* Theme color meta tag follows toggle */
body.nc-theme-dark { color-scheme: dark; }
body.nc-theme-light { color-scheme: light; }
/* Auto-mode: only apply dark styles when OS prefers dark */
@media (prefers-color-scheme: dark) {
body.nc-theme-auto { background: #060f1e; color: rgba(220,235,255,0.85); }
body.nc-theme-auto .nc-nav { background: rgba(6,15,30,0.92) !important; }
body.nc-theme-auto .nc-article .entry-content { background: #060f1e; color: rgba(220,235,255,0.85); }
body.nc-theme-auto .nc-article .entry-content h1,
body.nc-theme-auto .nc-article .entry-content h2,
body.nc-theme-auto .nc-article .entry-content h3 { color: #ffffff; }
body.nc-theme-auto .nc-article .entry-content p,
body.nc-theme-auto .nc-article .entry-content li { color: rgba(220,235,255,0.82); }
}
/* ════════════════════════════════════════════════════════════════════════
v9.7.5 — Dashboard top spacing fix (header was overlapping content)
════════════════════════════════════════════════════════════════════════ */
.nc-dashboard {
padding-top: calc(var(--nav-h) + var(--topbar-h) + 24px);
}
/* End of v9.7.5 */
/* ════════════════════════════════════════════════════════════════════════
v9.7.6 — Native Gutenberg block styling
AI Autopilot now emits native wp:code / wp:heading / wp:table / wp:quote
block markup, parsed by WordPress core. We style the resulting CSS classes
here. These rules complement (don't replace) the v9.7.6 .entry-content rules
above — those handle prose, these handle the Gutenberg-specific wrappers.
════════════════════════════════════════════════════════════════════════ */
/* ─── Code blocks — Gutenberg wraps as ─── */
.nc-article .entry-content .wp-block-code {
margin: 1.8rem 0;
background: #060f1e;
color: rgba(220, 235, 255, 0.92);
border: 1px solid rgba(0, 180, 255, 0.18);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
padding: 0;
position: relative;
}
.nc-article .entry-content .wp-block-code::before {
/* macOS-style 3-dot ornament across the top */
content: '';
display: block;
height: 36px;
background:
radial-gradient(circle 5px at 18px 18px, #ff5f57 50%, transparent 51%),
radial-gradient(circle 5px at 36px 18px, #ffbd2e 50%, transparent 51%),
radial-gradient(circle 5px at 54px 18px, #28c941 50%, transparent 51%),
rgba(0, 0, 0, 0.45);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nc-article .entry-content .wp-block-code > code {
display: block;
font-family: var(--f-mono);
font-size: 0.86rem;
line-height: 1.78;
padding: 18px 22px;
background: rgba(4, 8, 20, 0.85);
color: rgba(220, 235, 255, 0.92);
white-space: pre;
overflow-x: auto;
tab-size: 2;
border: 0;
border-radius: 0;
}
/* Language hint shown in top-right (set via the lang attribute) */
.nc-article .entry-content .wp-block-code[data-lang]::after,
.nc-article .entry-content .wp-block-code > code[lang]::before {
content: attr(lang);
position: absolute;
top: 10px;
right: 14px;
font-family: var(--f-mono);
font-size: 0.7rem;
color: #80ccff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
pointer-events: none;
}
/* ─── Headings — Gutenberg uses bare h2/h3 inside .entry-content ─── */
/* Already covered by the v9.7.6 universal rules above (lines ~2780-2820). */
/* ─── Tables — Gutenberg wraps as ─── */
.nc-article .entry-content .wp-block-table {
margin: 1.8rem 0;
}
.nc-article .entry-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
font-size: 0.95rem;
}
.nc-article .entry-content .wp-block-table thead th {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: #0f172a;
font-family: var(--f-display);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 14px 18px;
text-align: left;
border-bottom: 2px solid #cbd5e1;
}
.nc-article .entry-content .wp-block-table tbody td {
padding: 13px 18px;
color: #334155;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.nc-article .entry-content .wp-block-table tbody tr:nth-child(even) td { background: #f8fafc; }
.nc-article .entry-content .wp-block-table tbody tr:hover td { background: rgba(0, 114, 255, 0.04); color: #0f172a; }
.nc-article .entry-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
/* ─── Quotes — Gutenberg uses ─── */
.nc-article .entry-content .wp-block-quote {
margin: 1.8rem 0;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(0, 114, 255, 0.05), rgba(0, 200, 255, 0.03));
border-left: 3px solid #0072ff;
border-radius: 0 10px 10px 0;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
font-style: italic;
color: #1e293b;
}
.nc-article .entry-content .wp-block-quote p { margin: 0 0 0.6rem; color: #1e293b; font-size: 1.05rem; line-height: 1.7; }
.nc-article .entry-content .wp-block-quote p:last-child { margin-bottom: 0; }
.nc-article .entry-content .wp-block-quote strong { color: #1e3a8a; font-style: normal; }
.nc-article .entry-content .wp-block-quote a { color: #0072ff; font-style: normal; }
.nc-article .entry-content .wp-block-quote cite {
display: block;
margin-top: 0.6rem;
font-size: 0.85rem;
color: #64748b;
font-style: normal;
}
/* ─── Separator — Gutenberg uses
─── */
.nc-article .entry-content .wp-block-separator,
.nc-article .entry-content hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%);
margin: 2.5rem 0;
}
/* ─── Lists — Gutenberg uses / similar ─── */
.nc-article .entry-content .wp-block-list,
.nc-article .entry-content ul,
.nc-article .entry-content ol {
margin: 0 0 1.4rem;
padding-left: 1.5rem;
}
.nc-article .entry-content .wp-block-list li,
.nc-article .entry-content ul li,
.nc-article .entry-content ol li {
margin: 0.5rem 0;
color: #334155;
line-height: 1.75;
}
.nc-article .entry-content ul li::marker { color: #0072ff; }
.nc-article .entry-content ol li::marker { color: #0072ff; font-weight: 700; }
/* ─── Inline code in paragraphs ─── */
.nc-article .entry-content :not(pre) > code {
font-family: var(--f-mono);
font-size: 0.86em;
background: rgba(0, 114, 255, 0.08);
color: #0072ff;
border: 1px solid rgba(0, 114, 255, 0.18);
padding: 0.1em 0.45em;
border-radius: 5px;
font-weight: 500;
white-space: nowrap;
}
/* ─── Mobile — already mostly covered; tighten code padding ─── */
@media (max-width: 768px) {
.nc-article .entry-content .wp-block-code > code { padding: 14px 16px; font-size: 0.78rem; }
.nc-article .entry-content .wp-block-table thead th,
.nc-article .entry-content .wp-block-table tbody td { padding: 10px 12px; font-size: 0.85rem; }
.nc-article .entry-content .wp-block-quote { padding: 14px 16px; font-size: 0.98rem; }
}
/* End of v9.7.6 Gutenberg block styling */