/* ============================================================================
   Software4.net — Blog premium layer
   ----------------------------------------------------------------------------
   Covers /Blog (listing) and /Blog/{slug} (post). Shares the palette used
   across the redesigned pages: #071A33, #0B3B73, #1677FF, #18BFE8.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.blog-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(112px, 13vw, 164px) 0 clamp(60px, 7vw, 88px);
}
.blog-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 76% at 50% 42%, #000 16%, transparent 72%);
}
.blog-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 50% 0%, rgba(24,191,232,.15), transparent 62%);
}
.blog-hero > .container { position: relative; z-index: 2; }
.blog-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.blog-hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.88);
    padding: .4rem .9rem; border-radius: 6px;
    font-size: .71rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.blog-hero-title {
    margin: 1.3rem 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800; line-height: 1.08; letter-spacing: -.032em; color: #fff;
}
.blog-hero-sub {
    font-size: clamp(.97rem, 1.1vw, 1.08rem);
    line-height: 1.72; color: rgba(255,255,255,.68);
    max-width: 34em; margin: 0 auto;
}

.blog-body { padding: clamp(56px, 6.5vw, 84px) 0; background: #F7F9FC; }

/* ── Search ──────────────────────────────────────────────────────────── */
.blog-search { position: relative; margin-bottom: 1.75rem; }
.blog-search i {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: #94A3B8; font-size: .9rem; pointer-events: none;
}
.blog-search-input {
    width: 100%; padding: .95rem 1.1rem .95rem 2.85rem;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
    font-size: .95rem; color: #071A33;
    transition: border-color .24s ease, box-shadow .24s ease;
}
.blog-search-input::placeholder { color: #94A3B8; }
.blog-search-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12);
}

/* ── Shared meta row ─────────────────────────────────────────────────── */
.blog-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.blog-cat {
    background: rgba(22,119,255,.09); color: #1677FF;
    padding: .24rem .7rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.blog-date { color: #94A3B8; font-size: .78rem; }

/* ── Featured post ───────────────────────────────────────────────────── */
.blog-featured {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    overflow: hidden; margin-bottom: 1.5rem;
    transition: transform .34s cubic-bezier(.22,1,.36,1),
                box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-featured:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 28px 54px -26px rgba(7,26,51,.26);
}
.blog-featured-media {
    position: relative; display: block; height: 280px;
    /* `contain`, not `cover`. Several of these article images are generated
       artwork with the headline baked into the picture, and cover crops the
       sides — which sliced the first character off the title in the featured
       card. contain shows the whole image; the tinted panel behind it fills
       whatever letterboxing that leaves. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none;
}
.blog-featured-image {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
.blog-featured-media.no-img { background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%); }
.blog-featured-media.no-img::before,
.blog-card-media.no-img::before {
    content: 'SOFTWARE4 INSIGHTS'; position: absolute; inset: 0; z-index: 1;
    display: grid; place-items: center; padding: 1rem; text-align: center;
    color: #d8f3ff; font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 800; letter-spacing: .16em;
}
/* Scrim only where it's needed — over the fallback gradient. Across a real
   image it dulled the artwork and tinted the letterbox bars. */
.blog-featured-media.no-img::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(7,26,51,.1) 0%, rgba(7,26,51,.45) 100%);
}
.blog-featured-tag {
    position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
    /* Solid rather than translucent: with the scrim gone it may now sit over
       a light area of the artwork, where white-on-white would vanish. */
    background: #071A33;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 6px 18px -8px rgba(7,26,51,.8);
    color: #fff; padding: .3rem .8rem; border-radius: 6px;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.blog-featured-body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.blog-featured-title { font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.25; margin: 0 0 .85rem; }
.blog-featured-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-featured-title a:hover { color: #1677FF; }
.blog-featured-excerpt {
    font-size: .94rem; line-height: 1.8; color: #64748B; margin: 0 0 1.4rem;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-read-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .72rem 1.4rem; border-radius: 8px;
    font-size: .86rem; font-weight: 650; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-read-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22,119,255,.92); }
.blog-read-btn i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-read-btn:hover i { transform: translateX(3px); }

/* ── Post grid ───────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.blog-library-bar {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.65rem 0 1rem; padding: .9rem 1rem;
    border: 1px solid rgba(101,183,244,.2); border-radius: 13px;
    background: linear-gradient(135deg, rgba(14,43,74,.94), rgba(8,29,53,.94));
}
.blog-library-count { margin: 0; color: #bed1e5; font-size: .86rem; font-weight: 700; }
.blog-library-count::before {
    content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .55rem;
    border-radius: 50%; background: #36d3f4; box-shadow: 0 0 13px rgba(54,211,244,.8);
}
.blog-pagination {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    margin: 2.25rem 0 .5rem; padding: 1rem;
    border: 1px solid rgba(101,183,244,.2); border-radius: 14px;
    background: linear-gradient(135deg, rgba(14,43,74,.94), rgba(8,29,53,.94));
}
.blog-page-numbers { display: flex; align-items: center; justify-content: center; gap: .42rem; flex-wrap: wrap; }
.blog-page-number, .blog-page-nav {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-width: 42px; min-height: 42px; padding: .6rem .78rem;
    border: 1px solid rgba(111,188,244,.24); border-radius: 9px;
    color: #c5d8eb; background: rgba(8,28,51,.78);
    font-size: .8rem; font-weight: 800; cursor: pointer;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-page-number:hover, a.blog-page-nav:hover {
    transform: translateY(-2px); color: #fff; border-color: rgba(65,211,247,.52); background: rgba(22,119,255,.18);
}
.blog-page-number.is-current {
    color: #fff; border-color: transparent; background: linear-gradient(105deg, #087eff, #18bfe8);
    box-shadow: 0 12px 25px -15px #087eff;
}
.blog-page-nav[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.blog-page-number:focus-visible, .blog-page-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.blog-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    overflow: hidden;
    transition: transform .32s cubic-bezier(.22,1,.36,1),
                box-shadow .32s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.blog-card:hover {
    transform: translateY(-4px); border-color: #D6E3F5;
    box-shadow: 0 24px 46px -24px rgba(7,26,51,.24);
}
/* Article cards are primary content, not decorative animation targets. When a
   previously hidden pagination page becomes visible, an observer may not run
   before the user scrolls; never leave cards transparent while it catches up. */
.blog-main .blog-card[data-animate],
.blog-main .blog-featured[data-animate] { opacity: 1; transform: none; }
.blog-main .blog-card[data-animate]:hover,
.blog-main .blog-featured[data-animate]:hover { transform: translateY(-4px); }
.blog-card-media {
    position: relative; display: flex; align-items: center; justify-content: center;
    height: auto; aspect-ratio: 1200 / 630;
    /* Same reasoning as the featured card: these article images frequently
       carry their headline in the artwork, so contain avoids cropping words
       off the edge. The tinted panel fills any letterboxing. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #EEF2F8;
    text-decoration: none; color: rgba(255,255,255,.65); font-size: 1.9rem;
}
.blog-card-image {
    display: block; width: 100%; height: 100%; min-width: 0;
    object-fit: contain; object-position: center;
}
/* Icon fallback rather than an emoji — emoji render inconsistently across
   platforms and read as placeholder art on a professional site. */
.blog-card-media.no-img { background: linear-gradient(135deg, #0B3B73 0%, #1677FF 120%); }
.blog-card-media.no-img > i { display: none; }
.blog-card[hidden], .blog-featured[hidden], .blog-pagination[hidden] { display: none !important; }
.blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-title { font-size: 1.02rem; font-weight: 750; letter-spacing: -.018em; line-height: 1.32; margin: 0 0 .55rem; }
.blog-card-title a { color: #071A33; text-decoration: none; transition: color .22s ease; }
.blog-card-title a:hover { color: #1677FF; }
.blog-card-excerpt {
    font-size: .84rem; line-height: 1.7; color: #64748B; margin: 0 0 1.1rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: auto;
    color: #1677FF; font-weight: 650; font-size: .84rem; text-decoration: none;
}
.blog-card-link i { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.blog-card-link:hover i { transform: translateX(3px); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.blog-side {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 14px;
    padding: 1.35rem; margin-bottom: 1.25rem;
}
.blog-side-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: #94A3B8; margin: 0 0 1rem;
}
.blog-cats { list-style: none; margin: 0; padding: 0; }
.blog-cats li + li { border-top: 1px solid #F1F5F9; }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .72rem .2rem; text-decoration: none;
    transition: padding-left .24s ease;
}
.blog-cats a:hover { padding-left: .5rem; }
.blog-cat-name { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 600; color: #334155; }
.blog-cat-name i { color: #1677FF; width: 16px; font-size: .82rem; }
.blog-cats a:hover .blog-cat-name { color: #1677FF; }
.blog-cat-count {
    background: #F1F5F9; color: #64748B;
    padding: .16rem .55rem; border-radius: 6px;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.blog-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.blog-tag {
    background: #F1F5F9; color: #475569;
    padding: .34rem .8rem; border-radius: 7px;
    font-size: .77rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.blog-tag:hover { background: #1677FF; color: #fff; transform: translateY(-1px); }

/* Newsletter card */
.blog-news {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.7rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.blog-news-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(380px circle at 50% 0%, rgba(24,191,232,.24), transparent 62%);
}
.blog-news-inner { position: relative; z-index: 1; }
.blog-news-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.05rem; margin-bottom: .9rem;
    backdrop-filter: blur(8px);
}
.blog-news-title { font-size: 1.05rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.blog-news-sub { font-size: .82rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.2rem; }
.blog-news-input {
    width: 100%; text-align: center;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 9px; padding: .68rem .9rem;
    font-size: .875rem; margin-bottom: .6rem;
    transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
.blog-news-input::placeholder { color: rgba(255,255,255,.45); }
.blog-news-input:focus {
    outline: none; background: rgba(255,255,255,.12);
    border-color: rgba(24,191,232,.6); box-shadow: 0 0 0 4px rgba(24,191,232,.14);
}
.blog-news-btn {
    width: 100%; border: none; border-radius: 9px; cursor: pointer;
    background: linear-gradient(120deg, #F59E0B, #F0731A);
    color: #fff; padding: .72rem; font-size: .87rem; font-weight: 700;
    box-shadow: 0 10px 24px -10px rgba(240,115,26,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.blog-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(240,115,26,.92); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-featured-media { height: 208px; }
    .blog-pagination { align-items: stretch; flex-direction: column; }
    .blog-page-nav { width: 100%; }
}
@media (max-width: 575.98px) {
    .blog-search-input { font-size: 16px; }   /* stops iOS zoom-on-focus */
    .blog-news-input { font-size: 16px; }
}

.blog-search-input:focus-visible, .blog-read-btn:focus-visible,
.blog-tag:focus-visible, .blog-news-btn:focus-visible {
    outline: 2px solid #1677FF; outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .blog-featured:hover, .blog-card:hover, .blog-read-btn:hover,
    .blog-tag:hover, .blog-news-btn:hover { transform: none; }
    .blog-cats a:hover { padding-left: .2rem; }
}

/* ============================================================================
   BLOG POST (/Blog/{slug})
   ========================================================================== */
.post-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #050F1F 0%, #071A33 46%, #0B3B73 100%);
    padding: clamp(108px, 12vw, 152px) 0 clamp(48px, 6vw, 72px);
}
.post-hero-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 40%, #000 14%, transparent 72%);
}
.post-hero > .container { position: relative; z-index: 2; }
.post-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.post-hero-cat {
    display: inline-block;
    background: rgba(24,191,232,.16);
    border: 1px solid rgba(24,191,232,.38);
    color: #A8E4F7;
    padding: .34rem .85rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.post-hero-title {
    margin: 1.2rem 0 1.1rem;
    font-size: clamp(1.8rem, 3.9vw, 3rem);
    font-weight: 800; line-height: 1.16; letter-spacing: -.03em;
    color: #fff; text-wrap: balance;
}
.post-hero-meta {
    display: flex; align-items: center; justify-content: center;
    gap: .75rem; flex-wrap: wrap;
    font-size: .82rem; color: rgba(255,255,255,.62);
}
.post-hero-meta i { margin-right: .4rem; color: rgba(255,255,255,.45); }
.post-hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

/* ── Share row ───────────────────────────────────────────────────────── */
.post-share {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #fff; border: 1px solid #E8EEF6; border-radius: 12px;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.post-share-label {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #94A3B8;
}
.post-share-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.post-share-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #F1F5F9; border: 1px solid transparent; color: #475569;
    padding: .48rem .95rem; border-radius: 8px;
    font-size: .82rem; font-weight: 600; text-decoration: none;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.post-share-btn:hover { background: #1677FF; color: #fff; transform: translateY(-2px); }

.post-back {
    display: inline-flex; align-items: center; gap: .55rem;
    color: #475569; font-size: .87rem; font-weight: 650; text-decoration: none;
    padding: .6rem 1.15rem; border: 1px solid #DCE5F0; border-radius: 8px;
    transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.post-back:hover { color: #1677FF; border-color: #1677FF; transform: translateX(-3px); }

/* ── Sidebar CTA ─────────────────────────────────────────────────────── */
.post-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, #071A33 0%, #0B3B73 100%);
    border-radius: 16px; padding: 1.8rem 1.4rem; margin-bottom: 1.25rem;
    text-align: center;
    box-shadow: 0 26px 52px -26px rgba(7,26,51,.5);
}
.post-cta-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at 50% 0%, rgba(24,191,232,.26), transparent 62%);
}
.post-cta-inner { position: relative; z-index: 1; }
.post-cta-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 13px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
    color: #18BFE8; font-size: 1.1rem; margin-bottom: .95rem;
    backdrop-filter: blur(8px);
}
.post-cta-title { font-size: 1.1rem; font-weight: 750; color: #fff; margin: 0 0 .45rem; letter-spacing: -.018em; }
.post-cta-sub { font-size: .83rem; line-height: 1.65; color: rgba(255,255,255,.64); margin: 0 0 1.25rem; }
.post-cta-btn {
    display: inline-block; background: #fff; color: #0B3B73;
    padding: .66rem 1.4rem; border-radius: 8px;
    font-size: .855rem; font-weight: 650; text-decoration: none;
    transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.post-cta-btn:hover { color: #0B3B73; background: #F2F7FF; transform: translateY(-2px); }

/* Sidebar newsletter (light variant of the listing card) */
.post-news-sub { font-size: .82rem; line-height: 1.6; color: #64748B; margin: 0 0 1rem; }
.post-news-input {
    width: 100%; background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 9px; padding: .66rem .9rem; font-size: .875rem;
    color: #071A33; margin-bottom: .55rem;
    transition: border-color .22s ease, box-shadow .22s ease;
}
.post-news-input:focus {
    outline: none; border-color: rgba(22,119,255,.55);
    box-shadow: 0 0 0 4px rgba(22,119,255,.12); background: #fff;
}
.post-news-btn {
    width: 100%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #1677FF, #0E5FD8); color: #fff;
    padding: .68rem; border-radius: 9px; font-size: .86rem; font-weight: 650;
    box-shadow: 0 10px 22px -10px rgba(22,119,255,.8);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.post-news-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(22,119,255,.92); }

.blog-side-title i { color: #18BFE8; margin-right: .3rem; }

@media (max-width: 575.98px) {
    .post-news-input { font-size: 16px; }
    .post-share { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .post-share-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .post-share-btn:hover, .post-cta-btn:hover, .post-news-btn:hover { transform: none; }
    .post-back:hover { transform: none; }
}

/* ============================================================================
   FULL-WIDTH LAYOUT (sidebar removed)
   ----------------------------------------------------------------------------
   The right column is gone on both blog pages. Content now spans the
   container, but capped at a comfortable reading measure — a blog running
   edge to edge at 1200px gives very long line lengths, which hurts
   readability far more than the extra width helps.
   ========================================================================== */
.blog-main { max-width: 1280px; margin: 0 auto; }

/* With the extra room, cards go three-up on wide screens. */
.blog-main .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991.98px) { .blog-main .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .blog-main .blog-grid { grid-template-columns: 1fr; } }

/* Featured post becomes a side-by-side split at desktop width. */
@media (min-width: 992px) {
    .blog-main .blog-featured {
        display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
    }
    .blog-main .blog-featured-media { height: 100%; min-height: 340px; }
    .blog-main .blog-featured-body { display: flex; flex-direction: column; justify-content: center; }
}

/* Article page. The 74ch cap that used to sit on the running text has been
   removed — inside an already-constrained panel it produced visible empty
   gutters on both sides of the paragraphs. The panel width alone now sets
   the measure, and slightly looser line-height keeps longer lines readable. */
.post-main { max-width: 1240px; margin: 0 auto; }
.post-main .blog-content { line-height: 1.9; }

/* ── Newsletter band (listing) ───────────────────────────────────────── */
.blog-news-band {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #071A33 0%, #0B3B73 100%);
    padding: clamp(2.6rem, 5vw, 4rem) 0;
}
.blog-news-band-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px circle at 25% 0%, rgba(24,191,232,.2), transparent 62%);
}
.blog-news-band > .container { position: relative; z-index: 1; }
.blog-news-band-inner {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
    max-width: 1000px; margin: 0 auto;
}
.blog-news-band-copy .blog-news-icon { margin-bottom: .8rem; }
.blog-news-band-copy .blog-news-title { font-size: clamp(1.2rem, 2vw, 1.55rem); margin-bottom: .4rem; }
.blog-news-band-copy .blog-news-sub { margin-bottom: 0; }
.blog-news-band-form { display: flex; gap: .6rem; }
.blog-news-band-form .blog-news-input { margin-bottom: 0; text-align: left; flex: 1; }
.blog-news-band-form .blog-news-btn { width: auto; white-space: nowrap; padding: .72rem 1.5rem; }

@media (max-width: 767.98px) {
    .blog-news-band-inner { grid-template-columns: 1fr; text-align: center; }
    .blog-news-band-form { flex-direction: column; }
    .blog-news-band-form .blog-news-btn { width: 100%; }
}

/* ── Post footer conversion blocks ───────────────────────────────────── */
.post-foot { padding: 0 0 clamp(3rem, 6vw, 5rem); background: #F7F9FC; }
.post-foot-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.25rem; max-width: 1240px; margin: 0 auto;
}
.post-foot .post-cta { margin-bottom: 0; }
.post-news-card {
    background: #fff; border: 1px solid #E8EEF6; border-radius: 16px;
    padding: 1.8rem 1.4rem;
    display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 767.98px) {
    .post-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   ARTICLE CONTENT SAFETY (author-supplied HTML)
   ----------------------------------------------------------------------------
   .blog-content is rendered with @Html.Raw from CMS/API content, so its
   markup isn't controlled here — a pasted wide table, a data URI image, a
   long code sample or an unbroken URL can all push the page wider than the
   viewport and cause horizontal scroll on mobile. These are containment
   guards for that content, not styling preferences.
   ========================================================================== */
.blog-content img {
    max-width: 100%; height: auto;
    border-radius: 10px;
}
/* Tables scroll inside their own box rather than stretching the page. */
.blog-content table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9rem;
}
.blog-content th, .blog-content td {
    padding: .65rem .8rem; border: 1px solid #E8EEF6; text-align: left;
    white-space: nowrap;
}
.blog-content th { background: #F7F9FC; color: #071A33; font-weight: 700; }

.blog-content pre {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #071A33; color: #E2E8F0;
    padding: 1rem 1.15rem; border-radius: 10px;
    font-size: .84rem; line-height: 1.6; margin: 0 0 1.4rem;
}
.blog-content code { word-break: break-word; }
.blog-content pre code { word-break: normal; }

/* A long unbroken URL in body copy is a classic source of mobile overflow. */
.blog-content a, .blog-content p { overflow-wrap: anywhere; word-break: break-word; }

.blog-content iframe,
.blog-content video { max-width: 100%; }

/* Same guards for the legal pages, which also render CMS HTML via Html.Raw. */
.legal-doc img { max-width: 100%; height: auto; }
.legal-doc table { display: block; overflow-x: auto; max-width: 100%; }
.legal-doc a, .legal-doc p { overflow-wrap: anywhere; }

/* Dark editorial treatment shared with the homepage. */
body.public-inner-page .blog-body { background: transparent; }
body.public-inner-page .blog-search-input,
body.public-inner-page .blog-featured,
body.public-inner-page .blog-card,
body.public-inner-page .blog-side,
body.public-inner-page .blog-news {
    background: rgba(13,34,61,.84);
    border-color: rgba(117,181,231,.18);
    color: #edf6ff;
    box-shadow: 0 26px 62px -38px rgba(0,0,0,.95);
}
body.public-inner-page .blog-search-input { color: #edf6ff; }
body.public-inner-page .blog-search-input::placeholder { color: #7288a3; }
body.public-inner-page .blog-featured-title a,
body.public-inner-page .blog-card-title a,
body.public-inner-page .blog-side-title,
body.public-inner-page .blog-cat-name { color: #f5f9ff; }
body.public-inner-page .blog-featured-excerpt,
body.public-inner-page .blog-card-excerpt,
body.public-inner-page .blog-date { color: #a9bad0; }
body.public-inner-page .blog-cats li + li { border-color: rgba(117,181,231,.13); }
body.public-inner-page .blog-cat-count,
body.public-inner-page .blog-tag {
    background: rgba(117,181,231,.1);
    color: #bcd0e8;
}
body.public-inner-page .blog-featured-media,
body.public-inner-page .blog-card-media { background-color: rgba(5,18,34,.78); }
body.public-inner-page .blog-content,
body.public-inner-page .blog-post-body {
    color: #b7c7db;
}
body.public-inner-page .blog-content h1,
body.public-inner-page .blog-content h2,
body.public-inner-page .blog-content h3,
body.public-inner-page .blog-content h4 { color: #f5f9ff; }
body.public-inner-page .blog-content th,
body.public-inner-page .blog-content td { border-color: rgba(117,181,231,.18); }
body.public-inner-page .blog-content th { background: rgba(117,181,231,.08); color: #edf6ff; }
body.public-inner-page .blog-content td {
    color: #c9daea;
    background: rgba(4,23,43,.38);
}
body.public-inner-page .blog-content tr:hover td {
    color: #eef8ff;
    background: rgba(33,101,157,.18);
}

/* ============================================================================
   BLOG 10/10 POLISH — editorial artwork, balanced rhythm and interaction
   ========================================================================== */
body.public-inner-page .blog-hero { min-height: 410px; display: grid; place-items: center; }
.blog-trust-row {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: .65rem 1.15rem; margin-top: 1.35rem;
    color: #a9bdd2; font-size: .78rem; font-weight: 650;
}
.blog-trust-row span { display: inline-flex; align-items: center; gap: .42rem; }
.blog-trust-row i { color: #2fd0f5; font-size: .72rem; }

body.public-inner-page .blog-body { padding: clamp(3rem, 5vw, 5rem) 0; }
body.public-inner-page .blog-search {
    position: relative; margin-bottom: 1.5rem;
}
body.public-inner-page .blog-search-input {
    height: 58px; padding-left: 3.1rem; border-radius: 14px;
    background: linear-gradient(135deg, rgba(15,42,73,.92), rgba(9,30,55,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 44px -32px rgba(0,0,0,.9);
}
body.public-inner-page .blog-search i { color: #36cef4; }

body.public-inner-page .blog-featured,
body.public-inner-page .blog-card {
    border-color: rgba(101,183,244,.22);
    background: linear-gradient(145deg, rgba(15,43,76,.96), rgba(8,28,52,.96));
    box-shadow: 0 22px 60px -38px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.035);
}
body.public-inner-page .blog-featured:hover,
body.public-inner-page .blog-card:hover {
    transform: translateY(-7px);
    border-color: rgba(47,208,245,.52);
    box-shadow: 0 30px 70px -34px rgba(0,126,255,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
body.public-inner-page .blog-featured { border-radius: 20px; margin-bottom: 1.4rem; }
body.public-inner-page .blog-card { border-radius: 18px; }
body.public-inner-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }

/* Code-native illustrations replace missing raster assets and stay crisp. */
.blog-editorial-art {
    isolation: isolate; overflow: hidden; min-height: 230px;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(36,198,255,.2), transparent 29%),
        linear-gradient(135deg, #06182d, #0a3464) !important;
    background-size: auto !important;
}
.blog-editorial-art--erp {
    background-image: radial-gradient(circle at 50% 48%, rgba(97,113,255,.25), transparent 31%),
                      linear-gradient(135deg, #09162e, #23346d) !important;
}
.blog-editorial-art--seo {
    background-image: radial-gradient(circle at 50% 48%, rgba(23,214,186,.22), transparent 31%),
                      linear-gradient(135deg, #061c2d, #07556b) !important;
}
.blog-art-grid {
    position: absolute; inset: 0; z-index: -1; opacity: .42;
    background-image: linear-gradient(rgba(98,183,248,.15) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(98,183,248,.15) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, #000, transparent 76%);
}
.blog-art-orbit {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: 230px; aspect-ratio: 1; border: 1px solid rgba(83,201,255,.24);
    border-radius: 50%; animation: blog-orbit 18s linear infinite;
}
.blog-art-orbit::before,
.blog-art-orbit::after {
    content: ''; position: absolute; width: 8px; aspect-ratio: 1;
    border-radius: 50%; background: #2fd0f5; box-shadow: 0 0 18px #2fd0f5;
}
.blog-art-orbit::before { left: 15%; top: 13%; }
.blog-art-orbit::after { right: 7%; bottom: 26%; width: 5px; }
.blog-art-orbit--two { width: 330px; opacity: .58; animation-duration: 26s; animation-direction: reverse; }
.blog-art-node {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    display: grid; place-items: center; width: 106px; aspect-ratio: 1;
    border: 1px solid rgba(152,224,255,.54); border-radius: 28px;
    color: #fff; font-size: 2.25rem;
    background: linear-gradient(145deg, rgba(35,148,255,.92), rgba(18,78,185,.9));
    box-shadow: 0 25px 55px rgba(0,82,205,.44), inset 0 1px 0 rgba(255,255,255,.32);
    transform: rotate(-4deg);
}
.blog-editorial-art--erp .blog-art-node { background: linear-gradient(145deg, #6d6df6, #344bd1); }
.blog-editorial-art--seo .blog-art-node { background: linear-gradient(145deg, #18c9bd, #087f9b); }
.blog-art-node i { transform: rotate(4deg); filter: drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.blog-art-kicker {
    position: absolute; left: 50%; bottom: 1.15rem; translate: -50% 0;
    color: rgba(224,246,255,.82); font-size: .65rem; font-weight: 800;
    letter-spacing: .18em; white-space: nowrap;
}
@keyframes blog-orbit { to { transform: rotate(360deg); } }

.blog-featured-tag {
    border-radius: 999px; padding: .38rem .8rem;
    background: rgba(4,22,42,.8); border-color: rgba(98,205,255,.35);
    backdrop-filter: blur(10px);
}
body.public-inner-page .blog-featured-title a,
body.public-inner-page .blog-card-title a { color: #f4f9ff; }
body.public-inner-page .blog-featured-title a:hover,
body.public-inner-page .blog-card-title a:hover { color: #4bd9f9; }
body.public-inner-page .blog-cat {
    color: #59dcfb; background: rgba(34,188,255,.11);
    border: 1px solid rgba(57,201,255,.14); border-radius: 999px;
}
.blog-read-btn {
    justify-content: center; border-radius: 10px;
    background: linear-gradient(105deg, #087eff, #1bc5ed);
}
body.public-inner-page .blog-card-link { color: #4bd9f9; }

body.public-inner-page .blog-news-band {
    border-top: 1px solid rgba(99,187,248,.18);
    border-bottom: 1px solid rgba(99,187,248,.18);
    background: linear-gradient(120deg, #06182d, #0a3564);
}
.blog-news-btn {
    border: 0 !important; color: #fff !important;
    background: linear-gradient(105deg, #087eff, #1bc5ed) !important;
    box-shadow: 0 13px 30px -12px rgba(23,188,239,.72) !important;
}
.blog-news-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

@media (max-width: 991.98px) {
    body.public-inner-page .blog-hero { min-height: 360px; }
    body.public-inner-page .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    body.public-inner-page .blog-hero { min-height: 330px; }
    body.public-inner-page .blog-grid { grid-template-columns: 1fr; }
    .blog-trust-row { gap: .55rem .8rem; }
    .blog-art-orbit { width: 190px; }
    .blog-art-orbit--two { width: 270px; }
    .blog-art-node { width: 88px; border-radius: 23px; font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-art-orbit { animation: none; }
}

/* Long-form content components generated by the editorial pipeline. */
.post-toc, .post-insight, .post-cta, .post-faq, .post-comments {
    border: 1px solid rgba(99,187,248,.2); border-radius: 18px;
    background: linear-gradient(145deg, rgba(15,43,76,.88), rgba(8,28,52,.9));
}
.post-toc { padding: 1.35rem 1.5rem; margin: 1.8rem 0 2.2rem; }
.post-toc-title, .post-faq-eyebrow, .post-cta-eyebrow, .post-comments-eyebrow {
    margin: 0 0 .75rem; color: #44d5f6; font-size: .7rem; font-weight: 800; letter-spacing: .13em;
}
.post-toc ol { columns: 2; gap: 2rem; margin: 0; padding-left: 1.25rem; }
.post-toc li { break-inside: avoid; margin: .42rem 0; color: #9fe9fa; }
.post-toc li::marker { color: #78dff7; font-weight: 800; }
.post-toc a { color: #d7eafa; text-decoration: none; text-underline-offset: .18em; }
.post-toc a:hover { color: #44d5f6; }
.post-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    border-radius: 14px;
}
.post-table-wrap table { width: 100%; min-width: 640px; }
body.public-inner-page .post-toc li::marker { color: #7fe8ff !important; opacity: 1; }
body.public-inner-page .post-toc a { color: #d7eafa; }
body.public-inner-page .blog-content th { color: #f2f8ff; }
body.public-inner-page .blog-content td { color: #d6e4f3; }
.post-steps li { margin-bottom: .85rem; }
.post-insight { padding: 1.25rem 1.4rem; border-left: 3px solid #33cdf2; margin: 1.7rem 0; color: #c9dced; }
.post-cta { padding: clamp(1.5rem,4vw,2.5rem); margin: 2.5rem 0; text-align: center; }
.post-cta h2 { margin-top: 0 !important; }
.post-faq { padding: clamp(1.4rem,3vw,2rem); margin: 2.5rem 0; }
.post-faq details { border-top: 1px solid rgba(99,187,248,.16); padding: 1rem 0; }
.post-faq summary { color: #f3f8ff; font-weight: 700; cursor: pointer; }
.post-faq details p { margin: .75rem 0 0; }

.post-comments { max-width: 1240px; margin: 2.5rem auto 4rem; padding: clamp(1.4rem,4vw,2.4rem); color: #b9cce0; }
.post-comments-head h2 { color: #f4f9ff; margin: 0 0 .55rem; }
.post-comments-list { margin: 1.75rem 0; }
.post-comments-empty { color: #829ab2; margin: 0; }
.post-comment { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; padding: 1rem 0; border-top: 1px solid rgba(99,187,248,.14); }
.post-comment-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; font-weight: 800; background: linear-gradient(135deg,#087eff,#1bc5ed); }
.post-comment-meta { display: flex; justify-content: space-between; gap: 1rem; color: #edf6ff; }
.post-comment-meta time { color: #7890aa; font-size: .8rem; }
.post-comment p { margin: .35rem 0 0; overflow-wrap: anywhere; }
.post-comment-form { padding-top: 1.5rem; border-top: 1px solid rgba(99,187,248,.18); }
.post-comment-grid { display: grid; grid-template-columns: 1fr; }
.post-comment-form label { display: grid; gap: .45rem; margin-bottom: 1rem; color: #dceaff; font-weight: 650; font-size: .85rem; }
.post-comment-form input, .post-comment-form textarea { width: 100%; color: #edf7ff; background: rgba(3,18,34,.72); border: 1px solid rgba(117,181,231,.24); border-radius: 11px; padding: .85rem 1rem; }
.post-comment-form input:focus, .post-comment-form textarea:focus { outline: none; border-color: #32cef3; box-shadow: 0 0 0 4px rgba(50,206,243,.1); }
.post-comment-honeypot { position: absolute !important; left: -10000px !important; }
.post-comment-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.post-comment-status { margin: 0; color: #9fb5cb; font-size: .85rem; }
.post-comment-submit { border: 0; border-radius: 10px; padding: .8rem 1.2rem; color: #fff; font-weight: 750; background: linear-gradient(105deg,#087eff,#1bc5ed); }
.post-comment-submit:disabled {
    opacity: 1;
    color: rgba(255,255,255,.76);
    background: linear-gradient(105deg, rgba(8,126,255,.55), rgba(27,197,237,.5));
    border: 1px solid rgba(126,217,247,.18);
    cursor: not-allowed;
}
.post-recaptcha {
    min-height: 78px;
    max-width: 100%;
    overflow: hidden;
}
.post-recaptcha iframe { max-width: 100%; }
.post-recaptcha.is-fallback {
    min-height: 0;
    padding: .9rem 1rem;
    color: #bdd2e6;
    background: rgba(3,18,34,.58);
    border: 1px solid rgba(117,181,231,.22);
    border-radius: 11px;
}
.post-recaptcha.is-fallback > * { display: none !important; }
.post-recaptcha.is-fallback::before {
    content: attr(data-message);
    display: block;
    font-size: .84rem;
    line-height: 1.5;
}
@media (max-width: 767.98px) {
    .post-toc ol { columns: 1; }
    .blog-card-media { height: auto; aspect-ratio: 1200 / 630; }
    body.public-inner-page .post-main .blog-content { width: 100%; max-width: 100%; }
    .post-comment-actions { align-items: stretch; flex-direction: column; }
    .post-comment-submit { width: 100%; }
}

/* ── Article reading experience ─────────────────────────────────────────
   The recovered Razor view wraps every article in Bootstrap's white .card.
   Article typography is intentionally light, so the wrapper must use the
   same dark editorial surface as the rest of the public site. */
body.public-inner-page .post-main > article.card {
    overflow: hidden;
    color: #c5d5e7;
    background: linear-gradient(155deg, rgba(15,43,76,.98), rgba(6,24,45,.99)) !important;
    border: 1px solid rgba(105,190,248,.25) !important;
    border-radius: 22px !important;
    box-shadow: 0 34px 85px -48px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.045);
}
body.public-inner-page .post-main > article.card > .card-body {
    padding: clamp(1.35rem, 4vw, 3rem) !important;
}
body.public-inner-page .post-main .blog-content {
    width: min(100%, 920px);
    max-width: 920px;
    margin-inline: auto;
    color: #c5d5e7;
    font-size: 1.04rem;
    line-height: 1.82;
}
body.public-inner-page .post-main .blog-content > p,
body.public-inner-page .post-main .blog-content > h2,
body.public-inner-page .post-main .blog-content > h3,
body.public-inner-page .post-main .blog-content > ul,
body.public-inner-page .post-main .blog-content > ol:not(.post-toc ol) {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
body.public-inner-page .post-main .blog-content :is(p, h2, h3, h4, ul, ol) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
body.public-inner-page .post-main .blog-content > h2 {
    margin-top: 2.6rem;
    margin-bottom: .85rem;
    color: #f5f9ff;
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.025em;
}
body.public-inner-page .post-main .blog-content > p { color: #c5d5e7; }
body.public-inner-page .post-main .blog-content > ul,
body.public-inner-page .post-main .blog-content > ol { color: #c5d5e7; }
body.public-inner-page .post-main .blog-content > ul li::marker,
body.public-inner-page .post-main .blog-content > ol li::marker { color: #3bd4f5; }
.post-main .blog-content .post-lead {
    color: #dce9f6 !important;
    font-size: clamp(1.08rem, 1.8vw, 1.28rem);
    line-height: 1.72;
}
.post-main .card-body > img,
.post-main .blog-content img {
    display: block;
    width: 100%;
    max-height: 580px;
    object-fit: cover;
    border: 1px solid rgba(111,198,251,.2);
    box-shadow: 0 28px 60px -38px rgba(0,0,0,.9);
}
.post-editorial-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem 1rem;
    align-items: start;
    margin: 1.4rem 0 1.8rem;
    padding: 1rem 1.15rem;
    color: #a9bfd5;
    background: rgba(52,202,243,.065);
    border: 1px solid rgba(76,206,244,.19);
    border-radius: 13px;
}
.post-editorial-note span {
    color: #45d7f7;
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .12em;
    white-space: nowrap;
}
.post-editorial-note p { margin: 0; font-size: .84rem; line-height: 1.55; }
.post-use-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.35rem 0 1.6rem;
}
.post-use-cases article {
    min-width: 0;
    padding: 1.15rem;
    color: #d8e6f4;
    background: linear-gradient(145deg, rgba(22,62,104,.68), rgba(9,34,61,.82));
    border: 1px solid rgba(100,190,248,.19);
    border-radius: 14px;
}
.post-use-cases span { color: #44d5f6; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.post-use-cases p { margin: .65rem 0 0; color: #d8e6f4; font-size: .92rem; line-height: 1.58; }
.post-related {
    margin: 2.5rem 0 .5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(99,187,248,.17);
}
.post-related h2 { margin: 0 0 1.2rem !important; color: #f5f9ff; }
.post-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.post-related a {
    display: flex;
    flex-direction: column;
    min-height: 168px;
    padding: 1.1rem;
    color: #f4f9ff;
    text-decoration: none;
    background: linear-gradient(145deg, rgba(17,54,94,.85), rgba(8,31,57,.92));
    border: 1px solid rgba(99,187,248,.2);
    border-radius: 14px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-related a:hover {
    transform: translateY(-3px);
    border-color: rgba(63,211,245,.5);
    box-shadow: 0 20px 42px -30px rgba(32,186,239,.72);
}
.post-related a span { color: #42d2f3; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.post-related a strong { margin: .55rem 0 1rem; line-height: 1.38; }
.post-related a small { margin-top: auto; color: #83def4; font-weight: 750; }
.post-sources {
    margin: 2rem 0 .5rem;
    padding: 1.35rem 1.5rem;
    color: #a9bfd5;
    background: rgba(4,21,39,.46);
    border: 1px solid rgba(99,187,248,.16);
    border-radius: 14px;
}
.post-sources h2 { margin: 0 0 .5rem !important; color: #f5f9ff; font-size: 1.25rem !important; }
.post-sources > p:not(.post-faq-eyebrow) { margin: 0 0 .9rem; color: #a9bfd5; font-size: .88rem; }
.post-sources ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.post-sources a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .7rem;
    color: #9cecff;
    text-decoration: none;
    font-size: .8rem; font-weight: 700;
    background: rgba(48,194,237,.07);
    border: 1px solid rgba(73,208,245,.18);
    border-radius: 8px;
}
.post-sources a:hover { color: #fff; border-color: rgba(73,208,245,.48); }
body.public-inner-page .post-comments {
    max-width: 1040px;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.post-comment-form textarea { min-height: 130px; resize: vertical; }

@media (max-width: 767.98px) {
    body.public-inner-page .post-main > article.card { border-radius: 16px !important; }
    body.public-inner-page .post-main > article.card > .card-body { padding: 1.15rem !important; }
    body.public-inner-page .post-main .blog-content { font-size: 1rem; line-height: 1.76; }
    body.public-inner-page .post-main .blog-content > h2 { margin-top: 2.15rem; font-size: 1.5rem; }
    .post-editorial-note { grid-template-columns: 1fr; }
    .post-use-cases, .post-related > div { grid-template-columns: 1fr; }
    .post-use-cases article, .post-related a { min-height: 0; }
}

/* ── Final article component consistency ─────────────────────────────── */
/* The compiled controller increments this raw counter for every request,
   including refreshes and automated checks. Do not present it as readership. */
body.public-inner-page .post-hero-meta > span:last-child,
body.public-inner-page .post-hero-meta > .sep:nth-last-child(2) { display: none; }

body.public-inner-page .post-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .72rem 1.35rem;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(105deg, #087eff, #1bc5ed) !important;
    border: 1px solid rgba(145,230,255,.34) !important;
    border-radius: 10px;
    box-shadow: 0 15px 32px -16px rgba(24,191,232,.82);
}
body.public-inner-page .post-cta-btn:hover {
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

body.public-inner-page .post-share {
    color: #c5d5e7;
    background: linear-gradient(145deg, rgba(15,43,76,.92), rgba(7,27,50,.94));
    border-color: rgba(99,187,248,.2);
    box-shadow: 0 20px 50px -38px rgba(0,0,0,.95);
}
body.public-inner-page .post-share-label { color: #9fb6cc; }
body.public-inner-page .post-share-btn {
    color: #bfefff;
    background: rgba(56,197,239,.08);
    border-color: rgba(72,207,245,.18);
}
body.public-inner-page .post-share-btn:hover { color: #fff; background: #1677ff; }
body.public-inner-page .post-back { color: #8ce7fb; }
body.public-inner-page .post-back:hover { color: #fff; }

/* Keep the server-rendered Bootstrap tag badges inside the article palette. */
body.public-inner-page .post-main .badge.bg-light.text-dark.border {
    color: #ccefff !important;
    background: rgba(48, 194, 237, .08) !important;
    border-color: rgba(73, 208, 245, .22) !important;
    font-weight: 700;
}
body.public-inner-page .post-main .text-muted { color: #9fb6cc !important; }

body.public-inner-page .post-foot {
    background: transparent;
    border-top: 1px solid rgba(75,216,255,.1);
}
body.public-inner-page .post-foot .post-cta,
body.public-inner-page .post-news-card {
    color: #c5d5e7;
    background: linear-gradient(145deg, rgba(15,43,76,.9), rgba(7,27,50,.94));
    border-color: rgba(99,187,248,.2);
    box-shadow: 0 24px 58px -42px rgba(0,0,0,.96);
}
body.public-inner-page .post-news-card h2,
body.public-inner-page .post-news-card h3,
body.public-inner-page .post-news-card .post-news-title { color: #f5f9ff; }
body.public-inner-page .post-news-sub { color: #a9bad0; }
body.public-inner-page .post-news-input {
    color: #edf7ff;
    background: rgba(3,18,34,.72);
    border-color: rgba(117,181,231,.24);
}
body.public-inner-page .post-news-input::placeholder { color: #7890aa; }

.post-worked-example {
    margin: 1.75rem 0 2.1rem;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    color: #c8d9e9;
    background: linear-gradient(145deg, rgba(35,83,126,.5), rgba(11,39,68,.76));
    border: 1px solid rgba(91,203,244,.22);
    border-left: 3px solid #39d0f2;
    border-radius: 15px;
}
.post-worked-example > h3 { margin: 0 0 1rem; color: #f5f9ff; font-size: 1.25rem; }
.post-worked-example > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.post-worked-example > div > p { margin: 0; padding: .9rem; background: rgba(4,22,41,.42); border-radius: 10px; }
.post-worked-example strong { display: block; margin-bottom: .35rem; color: #74e3fb; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.post-worked-example span { display: block; color: #c8d9e9; font-size: .86rem; line-height: 1.55; }

.post-author {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: center;
    margin: 1.4rem 0 .5rem;
    padding: 1.4rem 1.5rem;
    color: #b9cde0;
    background: linear-gradient(145deg, rgba(19,55,94,.76), rgba(7,28,52,.86));
    border: 1px solid rgba(99,187,248,.18);
    border-radius: 15px;
}
body.public-inner-page .post-main .blog-content .post-author img {
    width: min(100%, 180px);
    height: 90px;
    max-height: none;
    margin: 0 auto;
    object-fit: cover;
    object-position: center 52%;
    border: 0;
    box-shadow: none;
}
.post-author h2 { margin: 0 0 .45rem !important; color: #f5f9ff; font-size: 1.35rem !important; }
.post-author > div > p:not(.post-faq-eyebrow) { margin: 0 0 .65rem; color: #b9cde0; font-size: .9rem; line-height: 1.6; }
.post-author a { color: #78e2f9; font-size: .84rem; font-weight: 750; text-decoration: none; }
.post-author a:hover { color: #fff; }

body.public-inner-page .post-comments { max-width: 960px; padding: clamp(1.3rem, 3vw, 2rem); }
body.public-inner-page .post-comments.is-empty .post-comments-list { margin: 1rem 0 1.25rem; }
body.public-inner-page .post-comments.is-empty .post-comment-form { padding-top: 1.15rem; }
body.public-inner-page .post-comment-form textarea { min-height: 108px; }

@media (max-width: 767.98px) {
    .post-worked-example > div { grid-template-columns: 1fr; }
    .post-author { grid-template-columns: 1fr; text-align: center; }
    body.public-inner-page .post-share { align-items: stretch; }
    body.public-inner-page .post-share-links { width: 100%; }
    body.public-inner-page .post-share-btn { flex: 1; justify-content: center; }
    body.public-inner-page #s4-chat-bubble {
        right: 10px !important; bottom: 10px !important;
        width: 48px !important; height: 48px !important;
    }
}

/* Keep article headings clear of the fixed global navigation on first paint.
   The rendered navbar is taller than the base theme's compact placeholder. */
body.public-inner-page .post-hero {
    padding-top: 112px !important;
}

@media (min-width: 992px) {
    body.public-inner-page .post-hero {
        padding-top: 144px !important;
    }
}

/* The restored library WebPs are photographs, not headline artwork. Fill the
   card and keep the older editorial-art ornaments behind the actual photo. */
.blog-featured-image[src*="/images/blog/library/"],
.blog-card-image[src*="/images/blog/library/"] {
    object-fit: cover;
}
.blog-featured-image[src*="/images/blog/library/"] {
    position: relative;
    z-index: 1;
}
.blog-featured-image[src*="/images/blog/library/"] ~ .blog-art-grid,
.blog-featured-image[src*="/images/blog/library/"] ~ .blog-art-orbit,
.blog-featured-image[src*="/images/blog/library/"] ~ .blog-art-node,
.blog-featured-image[src*="/images/blog/library/"] ~ .blog-art-kicker {
    display: none;
}


/* Compact archive cards: five complete articles per row on wide desktops.
   Keep larger touch-friendly cards on phones instead of forcing five columns. */
@media (min-width: 576px) {
    body.public-inner-page .blog-main .blog-grid { gap: .8rem; }
    body.public-inner-page .blog-main .blog-card { border-radius: 12px; }
    body.public-inner-page .blog-main .blog-card-body { padding: .82rem; }
    body.public-inner-page .blog-main .blog-meta {
        gap: .35rem; margin-bottom: .55rem; flex-wrap: nowrap;
    }
    body.public-inner-page .blog-main .blog-cat {
        padding: .18rem .43rem; font-size: .59rem; white-space: nowrap;
    }
    body.public-inner-page .blog-main .blog-date { font-size: .66rem; white-space: nowrap; }
    body.public-inner-page .blog-main .blog-card-title {
        font-size: .9rem; line-height: 1.3; margin-bottom: .45rem;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; overflow: hidden;
    }
    body.public-inner-page .blog-main .blog-card-excerpt {
        font-size: .77rem; line-height: 1.45; margin-bottom: .7rem;
        -webkit-line-clamp: 2;
    }
    body.public-inner-page .blog-main .blog-card-link { font-size: .76rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    body.public-inner-page .blog-main .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.public-inner-page .blog-main .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.public-inner-page .blog-main .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    body.public-inner-page .blog-main .blog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body.public-inner-page .blog-main .blog-grid > .blog-card:last-child:nth-child(5n + 1) {
        grid-column: 3;
    }
}
@media (min-width: 992px) {
    .blog-main .blog-featured-media { min-height: 260px; }
    body.public-inner-page .blog-main .blog-featured-body { padding: 1.3rem; }
    body.public-inner-page .blog-main .blog-featured-excerpt {
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; overflow: hidden; margin-bottom: .9rem;
    }
    body.public-inner-page .blog-main .blog-featured-title { font-size: 1.4rem; }
}