/* _article.html — extracted internal + inline styles */
    /* ===== Blog article — scoped bespoke components ===== */

    /* Mobile: let long CTA buttons wrap instead of overflowing the viewport. */
    @media (max-width: 575.98px) {
        .article-page .btn { white-space: normal; }
    }

    /* reading progress bar */
    .reading-progress {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 4px;
        background: transparent;
        z-index: 1050;
        pointer-events: none;
    }

    .reading-progress > span {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .55));
        transition: width .1s linear;
    }

    /* hero */
    .article-hero { position: relative; overflow: hidden; }

    .article-hero__blob {
        position: absolute;
        width: 420px; height: 420px;
        border-radius: 50%;
        filter: blur(90px);
        opacity: .5;
        pointer-events: none;
        z-index: 0;
        background: rgba(var(--accent-rgb), .30);
    }

    .article-hero__blob.b1 { top: -160px; left: -120px; }
    .article-hero__blob.b2 { top: -120px; right: -120px; background: rgba(var(--scb-grape-rgb), .22); }

    .article-breadcrumb {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .4rem;
        font-size: .82rem;
        color: #8a94a6;
    }

    .article-breadcrumb a { color: #8a94a6; transition: color .2s ease; }
    .article-breadcrumb a:hover { color: var(--accent); }
    .article-breadcrumb .sep { color: #cbd2dd; }

    .article-cat {
        display: inline-flex;
        align-items: center;
        padding: .34rem .9rem;
        border-radius: 2rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--accent);
        background: rgba(var(--accent-rgb), .12);
    }

    .article-title {
        font-size: clamp(1.9rem, 4vw, 2.9rem);
        font-weight: 800;
        line-height: 1.16;
        letter-spacing: -.015em;
    }

    .article-byline {
        display: inline-flex;
        align-items: center;
        gap: .7rem;
        font-size: .9rem;
        color: #64708a;
    }

    .article-byline__avatar {
        width: 40px; height: 40px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .82rem;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), .6));
    }

    .article-byline .sep { color: #cbd2dd; }

    /* overlapping hero image */
    .article-hero__img {
        margin: 0;
        border-radius: 1.25rem;
        overflow: hidden;
        box-shadow: 0 1.6rem 3.2rem rgba(30, 34, 40, .16);
    }

    .article-hero__img img { width: 100%; height: auto; display: block; }

    /* share row */
    .article-share {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .article-share__label {
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #9aa4b4;
        margin-right: .25rem;
    }

    .article-share a, .article-share button {
        width: 38px; height: 38px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #64708a;
        background: #f4f6fa;
        border: 0;
        font-size: 1rem;
        transition: all .25s ease;
        cursor: pointer;
    }

    .article-share a:hover, .article-share button:hover {
        color: #fff;
        background: var(--accent);
        transform: translateY(-2px);
    }

    /* ===== prose typography ===== */
    .article-prose { color: #3f4a5c; font-size: 1.06rem; line-height: 1.85; }

    .article-prose > p:first-of-type {
        font-size: 1.2rem;
        line-height: 1.7;
        color: #2a3242;
    }

    .article-prose p { margin-bottom: 1.35rem; }

    .article-prose h1, .article-prose h2, .article-prose h3,
    .article-prose h4, .article-prose h5 {
        color: #1e2531;
        line-height: 1.25;
        scroll-margin-top: 90px;
    }

    .article-prose h2, .article-prose .h1 {
        font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
        font-weight: 800;
        margin: 2.8rem 0 1rem;
        padding-top: 1.4rem;
        border-top: 1px solid #eef1f6;
    }

    .article-prose h3, .article-prose .h3 {
        font-size: 1.28rem !important;
        font-weight: 700;
        margin: 2rem 0 .85rem;
    }

    .article-prose h4 { font-size: 1.12rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
    .article-prose h5 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }

    /* inline icons inside headings (e.g. check marks) — accent, not positioned */
    .article-prose h2 > i.uil, .article-prose h3 > i.uil,
    .article-prose h4 > i.uil, .article-prose h5 > i.uil {
        position: static !important;
        color: var(--accent);
        margin-right: .45rem;
        font-size: .95em;
        background: none !important;
        width: auto !important;
        height: auto !important;
    }

    .article-prose a:not(.btn) {
        color: var(--accent);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    .article-prose ul, .article-prose ol { margin: 0 0 1.5rem; padding-left: 0; }
    .article-prose ul { list-style: none; }

    .article-prose ul > li {
        position: relative;
        padding-left: 1.9rem;
        margin-bottom: .6rem;
    }

    .article-prose ul > li::before {
        content: "";
        position: absolute;
        left: 0; top: .62em;
        width: 9px; height: 9px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
    }

    .article-prose ol { counter-reset: li; list-style: none; padding-left: 0; }
    .article-prose ol > li {
        position: relative;
        padding-left: 2.4rem;
        margin-bottom: .7rem;
        counter-increment: li;
    }
    .article-prose ol > li::before {
        content: counter(li);
        position: absolute;
        left: 0; top: -.05em;
        width: 1.7rem; height: 1.7rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .82rem;
        font-weight: 700;
        color: var(--accent);
        background: rgba(var(--accent-rgb), .12);
    }

    /* neutralise messy nested bootstrap columns inside prose so
       every figure spans the full reading width */
    .article-prose .row { margin-left: 0; margin-right: 0; }
    .article-prose [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .article-prose figure, .article-prose img { max-width: 100%; }
    .article-prose figure {
        margin: 2rem 0;
        border-radius: 1rem;
        overflow: hidden;
    }
    .article-prose figure img { width: 100%; height: auto; display: block; border-radius: 1rem; }

    .article-prose .icon-list { list-style: none; padding-left: 0; }
    .article-prose .icon-list > li { padding-left: 0; }
    .article-prose .icon-list > li::before { display: none; }

    .article-prose blockquote {
        position: relative;
        margin: 2rem 0;
        padding: 1.5rem 1.75rem;
        border-radius: 1rem;
        border-left: 4px solid var(--accent);
        background: rgba(var(--accent-rgb), .06);
        font-size: 1.12rem;
        font-style: italic;
        color: #2a3242;
    }

    .article-prose blockquote .blockquote-footer { margin-top: .6rem; font-style: normal; }

    .article-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
    .article-tags a {
        padding: .4rem 1rem;
        border-radius: 2rem;
        font-size: .82rem;
        font-weight: 600;
        color: #64708a;
        background: #f4f6fa;
        transition: all .25s ease;
    }
    .article-tags a:hover { color: #fff; background: var(--accent); }

    /* CTA */
    .article-cta {
        border-radius: 1.5rem;
        overflow: hidden;
        background:
            radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), .18), transparent 55%),
            radial-gradient(120% 160% at 100% 100%, rgba(var(--scb-grape-rgb), .16), transparent 55%),
            #0f1523;
    }

/* inline-style classes */
.gen-1 { z-index: 2; }
.gen-2 { z-index: 3; }