*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#163B63;--navy-dark:#0f2c4d;--ink:#0d1b2a;--slate:#4b5563;--border:#e5e7eb;--bg-soft:#f8fafc;--ease:cubic-bezier(.4,0,.2,1);--white:#ffffff;
  /* ── Blog-only tokens — a white, NVIDIA-style theme: bold oversized
     headlines, generous whitespace, image-led tiles, and pill-shaped
     category tabs, on a clean white/light-gray surface instead of the
     rest of the site's product-photography look. IBM Plex Mono still
     carries every piece of metadata (dates, read time, spec references —
     the way a datasheet would set them), Space Grotesk carries headlines,
     brand navy is the primary interactive color, and hazard-amber is a
     secondary accent reserved for tags/callouts — a nod to the amber/black
     marking on the machines themselves. */
  --blog-bg:#ffffff;            /* page background */
  --blog-bg-deep:#f2f4f6;       /* light-gray section/recessed surfaces */
  --blog-panel:#ffffff;         /* raised panel — cards, article body */
  --blog-panel-line:rgba(0,0,0,.09);   /* hairlines on light surfaces */
  --blog-ink:#0d1b2a;           /* near-black headings */
  --blog-text:#454f5a;          /* dark-gray body copy */
  --blog-text-dim:#767f89;      /* dimmer secondary/meta text */
  --blog-amber:#E8A320;         /* hazard-plate amber — secondary accent */
  --blog-amber-dark:#B97C0E;
  --blog-mono:'IBM Plex Mono',ui-monospace,monospace;
  --blog-display:'Space Grotesk',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:#111827;line-height:1.6;font-size:16px;zoom:.9}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:550}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ─── NAV (shared across the whole site) ─── */
nav{background:#fff;border-bottom:1px solid var(--border);padding:0 40px;height:60px;display:flex;align-items:center;justify-content:flex-start;gap:40px;position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;gap:10px}
.torqx-wordmark{display:flex;align-items:flex-start;font-family:'Open Sans',sans-serif;font-size:22px;font-weight:800;line-height:1;letter-spacing:-1px;text-decoration:none}
.torqx-logo-img{height:26px;width:auto;display:block}
.footer-logo-img{height:48px}
.nav-menu{display:flex;gap:26px;list-style:none;margin-left:auto;align-items:center}
.nav-menu a{font-size:13px;font-weight:500;color:#374151;position:relative;padding:4px 0}
.nav-menu a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.nav-menu a:hover,.nav-menu a.active{color:var(--navy)}
.nav-menu a:hover::after,.nav-menu a.active::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn-primary{font-size:12px;font-weight:600;color:#fff;background:var(--navy);border:none;border-radius:0;padding:9px 18px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.btn-primary:hover{background:var(--navy-dark);box-shadow:0 6px 16px rgba(22,59,99,.22);transform:translateY(-1px)}
.nav-item-dropdown{position:relative}
.nav-item-dropdown>a{display:flex;align-items:center;gap:6px;cursor:pointer}
.nav-caret{width:9px;height:9px;border-right:1.6px solid #374151;border-bottom:1.6px solid #374151;transform:rotate(45deg);margin-left:2px;transition:transform .2s var(--ease),border-color .2s var(--ease),margin .2s var(--ease)}
.nav-item-dropdown:hover .nav-caret{border-color:var(--navy);transform:rotate(225deg);margin-top:4px}
.dropdown-panel{position:absolute;top:100%;left:0;right:auto;transform:translateY(8px);width:250px;background:#fff;border:1px solid var(--border);border-radius:0px;box-shadow:var(--shadow-lg,0 24px 56px rgba(13,27,42,.14));padding:10px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;display:flex;flex-direction:column;gap:2px;z-index:200}
.nav-item-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:translateY(4px)}
.nav-item-dropdown.open .nav-caret{border-color:var(--navy);transform:rotate(225deg);margin-top:4px}
.nav-item-dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(4px)}
.dropdown-panel a{display:flex;align-items:center;padding:11px 12px;border-radius:0px;transition:background .15s var(--ease);font-weight:500}
.dropdown-panel a::after{content:none}
.dropdown-panel a:hover{background:var(--bg-soft)}
.dropdown-series-name{font-size:13.5px;font-weight:550;color:#111827}
.dropdown-cat{position:relative}
.dropdown-cat-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:0px;cursor:pointer;transition:background .15s ease}
.dropdown-cat-link:hover,.dropdown-cat.open>.dropdown-cat-link{background:#eef4fb}
.dropdown-cat-link:hover .dropdown-cat-name,.dropdown-cat.open>.dropdown-cat-link .dropdown-cat-name{color:var(--navy)}
.dropdown-cat-name{font-size:13.5px;font-weight:550;color:#111827;transition:color .15s ease}
.dropdown-chevron{width:6px;height:6px;border-right:1.6px solid #9aa4b2;border-bottom:1.6px solid #9aa4b2;transform:rotate(-45deg);flex-shrink:0;transition:border-color .15s ease}
.dropdown-cat-link:hover .dropdown-chevron,.dropdown-cat.open>.dropdown-cat-link .dropdown-chevron{border-color:var(--navy)}
.dropdown-flyout{position:absolute;top:0;left:100%;margin-left:6px;width:230px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:0px;box-shadow:0 22px 48px rgba(15,44,77,.16);padding:10px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateX(4px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:210}
.dropdown-cat:hover .dropdown-flyout,.dropdown-cat.open .dropdown-flyout{opacity:1;visibility:visible;transform:translateX(0)}
.dropdown-flyout a{display:flex;align-items:center;padding:11px 12px;border-radius:0px;transition:background .15s ease}
.dropdown-flyout a:hover{background:#eef4fb}

/* Mobile hamburger menu (shared) */
.mobile-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.mobile-menu-toggle span{display:block;width:22px;height:2px;background:#111827;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.mobile-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.open span:nth-child(2){opacity:0}
.mobile-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;background:#fff;z-index:999;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.mobile-menu.open{pointer-events:auto;opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu-list{list-style:none;padding:8px 24px 32px;margin:0}
.mobile-menu-list>li{border-bottom:1px solid var(--border)}
.mobile-menu-list>li>a{display:block;padding:18px 4px;font-size:16px;font-weight:600;color:#111827;text-decoration:none}
.mobile-menu-accordion-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;padding:18px 4px;font-size:16px;font-weight:600;color:#111827}
.mobile-menu-caret{width:9px;height:9px;border-right:1.6px solid #6b7280;border-bottom:1.6px solid #6b7280;transform:rotate(-45deg);transition:transform .2s var(--ease);flex-shrink:0}
.mobile-menu-accordion.open .mobile-menu-caret{transform:rotate(135deg)}
.mobile-submenu{list-style:none;max-height:0;overflow:hidden;transition:max-height .3s var(--ease);padding-left:10px;margin:0}
.mobile-menu-accordion.open .mobile-submenu{max-height:420px}
.mobile-submenu li a{display:block;padding:13px 4px 13px 14px;font-size:14.5px;color:#4b5563;border-left:2px solid var(--border);text-decoration:none}
.mobile-submenu-heading{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9aa4b2;padding:14px 4px 6px 14px}
.mobile-menu-cta{margin-top:22px}
.mobile-menu-cta a{display:flex;justify-content:center;text-decoration:none}

/* ─── FOOTER (shared across the whole site) ─── */
footer{background:#0d1b2a;padding:40px 64px 0}
footer a{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-tagline{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.75;max-width:260px}
.footer-address{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.6;margin-top:8px}
.footer-col-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
.footer-col ul{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
.footer-col ul li a:hover{color:#fff}
.footer-col ul li span.footer-static{font-size:13.5px;color:rgba(255,255,255,.55);display:inline-block}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.footer-copy{font-size:12px;color:rgba(255,255,255,.3)}
.footer-legal{display:flex;gap:22px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.3);transition:color .2s var(--ease)}
.footer-legal a:hover{color:rgba(255,255,255,.6)}

@media (max-width:900px){
  nav{padding:0 24px}
  .nav-menu{display:none}
  .nav-right{display:none}
  .mobile-menu-toggle{display:flex}
}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px;padding-bottom:22px}footer{padding:30px 48px 0}}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:20px}
  footer{padding:22px 20px 0}
  .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start;padding:10px 0}
}

/* ══════════════════════════════════════════════════════════════════
   BLOG — signature design system starts here.
   Concept: "the night shift reference shelf" — a dark navy (#163b63)
   surface instead of the rest of the site's white product-photography
   look, with IBM Plex Mono for every piece of metadata (dates, read
   time, spec references — the way a datasheet would set them), Space
   Grotesk for headlines, and a single hazard-amber accent standing in
   for the amber/black marking you'd find on the machines themselves.
   The signature element is the corner "spec plate" tag on the featured
   card / article header — a nod to the physical nameplates riveted to
   every TorqX actuator.
   ══════════════════════════════════════════════════════════════════ */

.blog-body{background:var(--blog-bg);color:var(--blog-text)}

/* ─── Blog top strip / breadcrumb ─── */
.blog-crumb-strip{max-width:1180px;margin:0 auto;padding:22px 40px 0}
.blog-crumb{font-family:var(--blog-mono);font-size:12px;color:var(--blog-text-dim);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.blog-crumb a{color:var(--blog-text-dim);transition:color .2s var(--ease)}
.blog-crumb a:hover{color:var(--navy)}
.blog-crumb span.sep{opacity:.5}
.blog-crumb span.current{color:var(--blog-ink)}

/* ─── Listing page header ─── */
.blog-hub-head{max-width:1400px;margin:0 auto;padding:28px 40px 44px;border-bottom:1px solid var(--blog-panel-line)}
.blog-hub-eyebrow{font-family:var(--blog-mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blog-amber-dark);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.blog-hub-eyebrow::before{content:'';width:22px;height:2px;background:var(--blog-amber)}
.blog-hub-head h1{font-family:var(--blog-display);font-size:clamp(34px,5vw,58px);font-weight:600;letter-spacing:-1.5px;line-height:1.05;color:var(--blog-ink);max-width:820px}
.blog-hub-sub{font-size:16px;color:var(--blog-text);line-height:1.7;max-width:620px;margin-top:16px}

/* ══════════════════════════════════════════════════════════════════
   NVIDIA-style stacked sections: bold heading + intro paragraph on the
   left, a horizontally-scrolling row of cards with prev/next arrows on
   the right, and a thin progress bar tracking scroll position underneath.
   Three sections stacked top to bottom: Article, Product Articles,
   Industries — each its own section, divided by a hairline.
   ══════════════════════════════════════════════════════════════════ */

.nv-section{max-width:1400px;margin:0 auto;padding:56px 40px;border-bottom:1px solid var(--blog-panel-line)}
.nv-section:last-of-type{border-bottom:none}
.nv-section-head{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start;margin-bottom:32px}
.nv-section-copy h2{font-family:'Inter',sans-serif;font-size:clamp(28px,2.8vw,38px);font-weight:700;letter-spacing:-.6px;color:var(--blog-ink);margin-bottom:16px}
.nv-section-copy p{font-size:15px;color:var(--blog-text);line-height:1.75}
.nv-section-cards-wrap{display:flex;flex-direction:column;gap:16px;min-width:0}
.nv-section-cards{display:flex;justify-content:flex-end;align-items:flex-start;gap:10px}
.nv-arrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--blog-panel-line);background:#fff;color:var(--blog-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.nv-arrow:hover{border-color:var(--navy);background:var(--blog-bg-deep)}
.nv-arrow:disabled{opacity:.35;cursor:default}
.nv-arrow:disabled:hover{border-color:var(--blog-panel-line);background:#fff}

.nv-row{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.nv-row::-webkit-scrollbar{display:none}
.nv-card{flex:0 0 320px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--blog-panel-line);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.nv-card:hover{box-shadow:0 20px 40px rgba(13,27,42,.12);transform:translateY(-3px)}
.nv-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blog-bg-deep)}
.nv-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.nv-card .blog-spec-plate{position:absolute;top:14px;left:14px}
.nv-card-body{padding:20px 22px 24px}
.nv-card-label{font-family:var(--blog-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--blog-amber-dark);margin-bottom:10px}
.nv-card-body h3{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;line-height:1.35;color:var(--blog-ink);margin-bottom:10px}
.nv-card-desc{font-size:13.5px;color:var(--blog-text);line-height:1.6}

.nv-progress{max-width:520px;height:2px;background:var(--blog-panel-line);margin-top:18px;position:relative;overflow:hidden}
.nv-progress-fill{position:absolute;top:0;left:0;height:100%;width:30%;background:var(--navy)}

.nv-empty p{font-size:14px;color:var(--blog-text-dim);font-style:italic}

/* ─── Shared: tag chips + spec-plate corner tag (used on both the
   listing-page cards and the article header/hero) ─── */
.blog-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.blog-tag{font-family:var(--blog-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--blog-amber-dark);border:1px solid rgba(232,163,32,.4);padding:4px 9px}
.blog-spec-plate{position:absolute;top:18px;left:18px;background:var(--blog-amber);color:#231a04;font-family:var(--blog-mono);font-size:11px;font-weight:600;letter-spacing:.5px;padding:6px 10px;line-height:1;box-shadow:0 6px 16px rgba(0,0,0,.25)}

@media (max-width:900px){
  .nv-section-head{grid-template-columns:1fr;gap:20px}
  .nv-section-cards{justify-content:flex-start}
  .nv-card{flex-basis:78vw}
}

/* ─── Single article layout ─── */
.blog-article-head{max-width:900px;margin:0 auto;padding:36px 40px 0}
.blog-article-head .blog-tag-row{margin-bottom:20px}
.blog-article-head h1{font-family:var(--blog-display);font-size:clamp(32px,4.6vw,54px);font-weight:600;letter-spacing:-1.5px;line-height:1.08;color:var(--blog-ink)}
.blog-article-dek{font-size:17px;color:var(--blog-text);line-height:1.75;margin-top:18px;max-width:760px}
.blog-byline{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid var(--blog-panel-line)}
.blog-byline-avatar{width:38px;height:38px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--blog-mono);font-size:13px;font-weight:700;flex-shrink:0}
.blog-byline-name{font-size:13.5px;font-weight:600;color:var(--blog-ink)}
.blog-byline-meta{font-family:var(--blog-mono);font-size:12px;color:var(--blog-text-dim);margin-top:2px}

.blog-article-media{max-width:1180px;margin:36px auto 0;padding:0 40px}
.blog-article-media-inner{position:relative;background:var(--blog-bg-deep)}
.blog-article-media-inner img{width:100%;max-height:460px;object-fit:cover;display:block;opacity:.9}
.blog-article-media .blog-spec-plate{top:18px;left:18px}

.blog-article-wrap{max-width:1180px;margin:56px auto 0;padding:0 40px 100px;display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}

/* Table of contents rail — styled like a blueprint legend */
.blog-toc{position:sticky;top:84px;border-left:2px solid var(--blog-amber);padding-left:18px}
.blog-toc-label{font-family:var(--blog-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blog-text-dim);margin-bottom:14px}
.blog-toc ol{list-style:none;display:flex;flex-direction:column;gap:11px;counter-reset:toc}
.blog-toc li{counter-increment:toc}
.blog-toc a{font-size:13px;color:var(--blog-text);line-height:1.4;display:flex;gap:8px;transition:color .2s var(--ease)}
.blog-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--blog-mono);font-size:11px;color:var(--blog-text-dim);flex-shrink:0}
.blog-toc a:hover{color:var(--navy)}
@media (max-width:960px){.blog-article-wrap{grid-template-columns:1fr}.blog-toc{position:static;border-left:none;border-top:2px solid var(--blog-amber);padding:18px 0 0}.blog-toc ol{flex-direction:row;flex-wrap:wrap;gap:14px}}

/* Article prose */
.blog-prose{background:var(--blog-panel);border:1px solid var(--blog-panel-line);padding:48px 56px;max-width:100%}
.blog-prose h2{font-family:var(--blog-display);font-size:26px;font-weight:600;letter-spacing:-.4px;color:var(--blog-ink);margin:44px 0 18px;scroll-margin-top:90px}
.blog-prose h2:first-child{margin-top:0}
.blog-prose h3{font-family:var(--blog-display);font-size:19px;font-weight:600;letter-spacing:-.2px;color:var(--blog-ink);margin:30px 0 12px;scroll-margin-top:90px}
.blog-prose h4{font-size:15.5px;font-weight:700;color:var(--blog-amber);margin:22px 0 10px;text-transform:uppercase;letter-spacing:.4px}
.blog-prose p{font-size:15.5px;color:var(--blog-text);line-height:1.8;margin-bottom:16px}
.blog-prose ul,.blog-prose ol{margin:0 0 18px 22px}
.blog-prose ul{list-style:disc}
.blog-prose ol{list-style:decimal}
.blog-prose li{font-size:15.5px;color:var(--blog-text);line-height:1.75;margin-bottom:8px}
.blog-prose li strong{color:var(--blog-ink)}
.blog-prose strong{color:var(--blog-ink)}
.blog-prose a.inline-link{color:var(--navy);border-bottom:1px solid rgba(22,59,99,.35);font-weight:550}
.blog-prose a.inline-link:hover{border-color:var(--navy)}

/* "Why it matters" / key-takeaway callouts — amber hazard-stripe rule */
.blog-callout{border-left:3px solid var(--blog-amber);background:rgba(232,163,32,.1);padding:16px 20px;margin:20px 0 26px;font-size:14.5px;color:var(--blog-text);line-height:1.7}
.blog-callout strong{color:var(--blog-ink)}

/* Data tables — deep-navy header, mono numerals, matches the spec-sheet
   language already used on the product pages, applied here to editorial
   content instead of product specs */
.blog-table-wrap{overflow-x:auto;margin:22px 0 30px;border:1px solid var(--blog-panel-line)}
.blog-prose table{width:100%;border-collapse:collapse;font-size:14px}
.blog-prose thead th{background:var(--blog-bg-deep);color:var(--blog-ink);font-family:var(--blog-mono);font-size:12px;font-weight:600;text-align:left;padding:12px 16px;letter-spacing:.3px}
.blog-prose tbody td{padding:13px 16px;border-bottom:1px solid var(--blog-panel-line);color:var(--blog-text);vertical-align:top;line-height:1.6}
.blog-prose tbody tr:last-child td{border-bottom:none}
.blog-prose tbody tr:nth-child(even){background:rgba(0,0,0,.02)}
.blog-prose tbody td:first-child{font-weight:600;color:var(--blog-ink);white-space:nowrap}

/* FAQ — native details/summary accordion, +/- monospace toggle
   (deliberately different from the chevron accordion on product pages) */
.blog-faq{margin-top:6px}
.blog-faq details{border-bottom:1px solid var(--blog-panel-line);padding:18px 0}
.blog-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15.5px;font-weight:600;color:var(--blog-ink)}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary .toggle{font-family:var(--blog-mono);font-size:16px;color:var(--blog-amber);flex-shrink:0;width:20px;text-align:center}
.blog-faq details[open] summary .toggle::before{content:'\2212'}
.blog-faq summary .toggle::before{content:'\002B'}
.blog-faq .faq-a{font-size:14.5px;color:var(--blog-text);line-height:1.75;margin-top:12px;padding-right:36px}
.blog-faq .faq-a ul{margin:10px 0 0 20px;list-style:disc}
.blog-faq .faq-a li{font-size:14.5px;color:var(--blog-text);margin-bottom:6px}

/* Tag chips at the end of the article */
.blog-tags-end{margin-top:40px;padding-top:28px;border-top:1px solid var(--blog-panel-line)}
.blog-tags-end .label{font-family:var(--blog-mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blog-text-dim);margin-bottom:14px}
.blog-tags-end .chips{display:flex;flex-wrap:wrap;gap:8px}
.blog-tags-end .chip{font-size:12.5px;color:var(--blog-amber);border:1px solid rgba(232,163,32,.35);padding:5px 11px;background:rgba(232,163,32,.08)}

/* Inline process-flow chips, e.g. "Motor → Screw → Nut → Linear Output" */
.blog-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0;padding:18px 20px;background:var(--blog-bg-deep);border-left:3px solid var(--blog-amber)}
.blog-flow .step{font-family:var(--blog-mono);font-size:12.5px;font-weight:600;color:var(--blog-ink);background:#fff;border:1px solid var(--blog-panel-line);padding:6px 11px;white-space:nowrap}
.blog-flow .arrow{color:var(--blog-amber-dark);font-size:14px;flex-shrink:0}

/* Related Products — image-led clickable boxes shown inside the article,
   same card language as the product pages' "Related Products" module but
   built with plain <a> links since blog pages sit outside the SPA router */
.blog-related{margin:48px 0 8px}
.blog-related-h{font-family:var(--blog-display);font-size:15px;font-weight:700;letter-spacing:.3px;color:var(--blog-ink);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.blog-related-h::before{content:'';width:4px;height:16px;background:var(--blog-amber)}
.blog-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.blog-related-card{border:1px solid var(--blog-panel-line);border-radius:0;padding:22px;display:flex;flex-direction:column;gap:16px;background:#fff;cursor:pointer;transition:border-color .3s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.blog-related-card:hover{border-color:transparent;box-shadow:0 18px 40px rgba(13,27,42,.12);transform:translateY(-3px)}
.blog-related-icon{width:100%;height:120px;background:var(--blog-bg-deep);display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-related-icon img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply}
.blog-related-name{font-size:15.5px;font-weight:600;color:var(--blog-ink);line-height:1.25}
.blog-related-fam{font-size:12px;color:var(--blog-text-dim);margin-top:3px}
@media (max-width:900px){.blog-related-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.blog-related-grid{grid-template-columns:1fr}}

/* Cross-link series cards at bottom of article */
.blog-series-cta{max-width:1180px;margin:0 auto;padding:0 40px 100px}
.blog-series-cta-inner{background:var(--blog-bg-deep);padding:52px 48px;position:relative;overflow:hidden}
.blog-series-cta-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,163,32,.14),transparent 55%);pointer-events:none}
.blog-series-cta-inner h3{position:relative;font-family:var(--blog-display);color:#fff;font-size:24px;font-weight:600;margin-bottom:10px}
.blog-series-cta-inner>p{position:relative;color:rgba(255,255,255,.6);font-size:14.5px;max-width:560px;margin-bottom:28px}
.blog-series-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.blog-series-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:20px 18px;transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.blog-series-card:hover{background:rgba(255,255,255,.08);border-color:rgba(232,163,32,.5);transform:translateY(-4px)}
.blog-series-card .name{color:#fff;font-size:14.5px;font-weight:600;margin-bottom:6px}
.blog-series-card .desc{color:rgba(255,255,255,.5);font-size:12.5px;line-height:1.5}
@media (max-width:900px){.blog-series-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.blog-series-grid{grid-template-columns:1fr}}

@media (max-width:900px){
  .blog-crumb-strip,.blog-hub-head,.nv-section,.blog-article-head,.blog-article-media,.blog-article-wrap,.blog-series-cta{padding-left:20px;padding-right:20px}
  .blog-prose{padding:30px 24px}
}