/* =========================================================
   ALL KLEER COMPUTER SYSTEMS
   INSIGHTS / KNOWLEDGE BASE
   Matches the main site light/dark theme system:
   default = light
   body.dark-theme = dark
   ========================================================= */


/* =========================================================
   INSIGHTS THEME TOKENS
   Inherit the main site's variables wherever possible.
   ========================================================= */

/* Important:
   These aliases live on BODY, not :root.
   The main site applies dark-theme variables on body.dark-theme,
   so putting the Insights aliases on body lets them recalculate
   correctly whenever the theme class changes.
*/

body {
    --insight-bg: var(--background, #f3f1eb);
    --insight-surface: var(--surface, #faf8f3);
    --insight-surface-soft: var(--surface-soft, rgba(255, 255, 255, 0.32));

    --insight-text: var(--text, #292929);
    --insight-text-strong: var(--text-strong, #1f1f1f);
    --insight-muted: var(--muted, #70706d);

    --insight-line: var(--border, rgba(38, 38, 38, 0.18));
    --insight-grid-line: var(--grid-line, rgba(38, 38, 38, 0.065));

    --insight-accent: var(--green, #52b052);

    --insight-max: var(--max-width, 1640px);
    --insight-copy: 860px;

    --insight-radius: 0px;
    --insight-card-radius: 18px;
}


/* =========================================================
   BASE / SHARED
   ========================================================= */

.insights-library,
.insight-article-shell {
    width: 100%;
    background: var(--insight-bg);
    color: var(--insight-text);
}

.insights-library-inner,
.insights-library-hero__inner,
.insight-article__inner {
    width: min(calc(100% - 6rem), var(--insight-max));
    margin: 0 auto;
}

.insight-eyebrow {
    margin: 0 0 1rem;

    color: var(--insight-accent);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.insight-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 0.9rem 1.6rem;

    border: 1px solid var(--insight-accent);
    border-radius: 999px;

    background: var(--insight-accent);
    color: #ffffff;

    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

.insight-button:hover,
.insight-button:focus-visible {
    transform: translateY(-2px);

    background: var(--insight-text);
    border-color: var(--insight-text);
    color: var(--insight-bg);
}


/* =========================================================
   INSIGHTS LANDING PAGE HERO
   ========================================================= */

.insights-library-hero {
    position: relative;
    overflow: hidden;

    border-bottom: 1px solid var(--insight-line);
}

.insights-library-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.75;

    background-image:
        linear-gradient(var(--insight-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--insight-grid-line) 1px, transparent 1px);

    background-size: 56px 56px;

    mask-image: linear-gradient(to right, black, transparent 88%);
}

.insights-library-hero__inner {
    position: relative;
    z-index: 1;

    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(4.5rem, 7vw, 7rem);
}

.insights-library-hero h1 {
    margin: 0;

    max-width: 1200px;

    color: var(--insight-text-strong);

    font-size: clamp(4rem, 7.6vw, 8.4rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.insights-library-hero h1 span {
    display: block;
}

.insights-library-intro {
    max-width: 920px;

    margin: 2.4rem 0 0;

    color: var(--insight-muted);

    font-size: clamp(1.15rem, 1.55vw, 1.45rem);
    line-height: 1.7;
}


/* =========================================================
   LANDING PAGE SECTION STRUCTURE
   ========================================================= */

.insights-topic-section,
.insights-featured,
.insights-article-list,
.insights-field-notes,
.insights-library-cta {
    border-bottom: 1px solid var(--insight-line);
}

.insights-topic-section,
.insights-featured,
.insights-article-list,
.insights-field-notes {
    padding:
        clamp(4.5rem, 7vw, 7rem)
        0;
}

.insights-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 2.5rem;
}

.insights-section-heading h2,
.insights-field-notes h2,
.insights-library-cta h2 {
    margin: 0;

    color: var(--insight-text-strong);

    font-size: clamp(2.6rem, 4.5vw, 5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.insights-clear-filter {
    padding-bottom: 0.25rem;

    border-bottom: 1px solid var(--insight-accent);

    color: var(--insight-accent);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.insights-result-count {
    margin: 0;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* =========================================================
   TOPIC FILTER CARDS
   ========================================================= */

.insights-topic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--insight-line);
    border-left: 1px solid var(--insight-line);
}

.insights-topic-card {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.25rem 1.4rem;

    border-right: 1px solid var(--insight-line);
    border-bottom: 1px solid var(--insight-line);

    background: transparent;
    color: var(--insight-text);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.06em;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.insights-topic-card span:last-child {
    flex: 0 0 auto;

    color: var(--insight-accent);

    opacity: 0.45;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.insights-topic-card:hover,
.insights-topic-card:focus-visible,
.insights-topic-card.is-active {
    position: relative;
    z-index: 1;

    background: var(--insight-surface-soft);
    color: var(--insight-accent);

    border-color: var(--insight-accent);
}

.insights-topic-card:hover span:last-child,
.insights-topic-card:focus-visible span:last-child,
.insights-topic-card.is-active span:last-child {
    opacity: 1;
    transform: translate(2px, -2px);
}


/* =========================================================
   FEATURED ARTICLE
   ========================================================= */

.insights-featured-card {
    min-height: 360px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;

    border: 1px solid var(--insight-line);

    background: var(--insight-surface-soft);
    color: var(--insight-text);

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.insights-featured-card:hover,
.insights-featured-card:focus-visible {
    transform: translateY(-3px);

    border-color: var(--insight-accent);
    background: var(--insight-surface);
}

.insights-featured-card__copy {
    padding: clamp(2rem, 4vw, 4rem);
}

.insights-card-category {
    display: inline-block;

    color: var(--insight-accent);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.insights-featured-card h2 {
    max-width: 1050px;

    margin: 1.2rem 0 1.5rem;

    color: var(--insight-text-strong);

    font-size: clamp(2.6rem, 5vw, 5.6rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.insights-featured-card__copy > p:not(.insights-card-category) {
    max-width: 820px;

    margin: 0;

    color: var(--insight-muted);

    font-size: clamp(1.08rem, 1.35vw, 1.25rem);
    line-height: 1.7;
}

.insights-featured-card__arrow {
    width: clamp(90px, 9vw, 150px);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 2rem;

    border-left: 1px solid var(--insight-line);

    color: var(--insight-accent);

    font-family: "Courier New", Courier, monospace;
    font-size: clamp(2rem, 3vw, 3.5rem);
}


/* =========================================================
   ARTICLE CARD GRID
   ========================================================= */

.insights-article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--insight-line);
    border-left: 1px solid var(--insight-line);
}

.insights-article-card {
    min-width: 0;

    border-right: 1px solid var(--insight-line);
    border-bottom: 1px solid var(--insight-line);
}

.insights-article-card__link {
    min-height: 370px;

    display: flex;
    flex-direction: column;

    padding: 2rem;

    background: transparent;
    color: var(--insight-text);

    transition:
        background 180ms ease,
        color 180ms ease;
}

.insights-article-card__link:hover,
.insights-article-card__link:focus-visible {
    background: var(--insight-surface-soft);
}

.insights-article-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.insights-article-card__arrow {
    color: var(--insight-accent);

    font-family: "Courier New", Courier, monospace;
    font-size: 1.25rem;

    opacity: 0.45;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.insights-article-card__link:hover .insights-article-card__arrow,
.insights-article-card__link:focus-visible .insights-article-card__arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

.insights-article-card h3 {
    margin: 2.2rem 0 1.15rem;

    color: var(--insight-text-strong);

    font-size: clamp(1.65rem, 2.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.insights-article-card p {
    margin: 0;

    color: var(--insight-muted);

    font-size: 1.02rem;
    line-height: 1.65;
}

.insights-card-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.45rem;

    margin-top: auto;
    padding-top: 2rem;
}

.insights-card-tags span {
    padding: 0.35rem 0.6rem;

    border: 1px solid var(--insight-line);
    border-radius: 999px;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.insights-card-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem 1rem;

    margin-top: 1.3rem;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.78rem;
    font-weight: 700;
}

.insights-card-meta span + span::before {
    content: "•";

    margin-right: 1rem;

    color: var(--insight-accent);
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.insights-empty-state {
    max-width: 860px;

    padding:
        clamp(2.5rem, 5vw, 4rem);

    border: 1px solid var(--insight-line);

    background: var(--insight-surface-soft);
}

.insights-empty-state h3 {
    margin: 0 0 1rem;

    color: var(--insight-text-strong);

    font-size: clamp(2rem, 3.5vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.insights-empty-state p:not(.insight-eyebrow) {
    max-width: 720px;

    margin: 0 0 1.8rem;

    color: var(--insight-muted);

    font-size: 1.08rem;
    line-height: 1.7;
}


/* =========================================================
   NOTES FROM THE FIELD
   ========================================================= */

.insights-field-notes {
    background: var(--insight-surface-soft);
}

.insights-field-notes__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: clamp(3rem, 7vw, 7rem);

    align-items: start;
}

.insights-field-notes__copy p {
    max-width: 760px;

    margin: 0 0 1.5rem;

    color: var(--insight-muted);

    font-size: 1.12rem;
    line-height: 1.75;
}


/* =========================================================
   LANDING PAGE CTA
   ========================================================= */

.insights-library-cta {
    padding:
        clamp(5rem, 8vw, 8rem)
        0
        clamp(6rem, 9vw, 9rem);
}

.insights-library-cta p:not(.insight-eyebrow) {
    max-width: 800px;

    margin: 1.5rem 0 2.3rem;

    color: var(--insight-muted);

    font-size: 1.15rem;
    line-height: 1.75;
}


/* =========================================================
   ARTICLE PAGE
   ========================================================= */

.insight-article {
    width: 100%;
}

.insight-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(4.5rem, 8vw, 7.5rem)
        0
        clamp(4rem, 7vw, 6.5rem);

    border-bottom: 1px solid var(--insight-line);
}

.insight-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.68;

    background-image:
        linear-gradient(var(--insight-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--insight-grid-line) 1px, transparent 1px);

    background-size: 56px 56px;

    mask-image: linear-gradient(to right, black, transparent 88%);
}

.insight-hero .insight-article__inner {
    position: relative;
    z-index: 1;
}

.insight-breadcrumbs {
    display: flex;
    flex-wrap: wrap;

    gap: 0.55rem;

    margin-bottom: 2.2rem;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.insight-breadcrumbs a {
    color: inherit;
}

.insight-breadcrumbs a:hover,
.insight-breadcrumbs a:focus-visible {
    color: var(--insight-accent);
}

.insight-hero h1 {
    max-width: 1150px;

    margin: 0;

    color: var(--insight-text-strong);

    font-size: clamp(3.6rem, 6.3vw, 7rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.055em;

    text-wrap: balance;
}

.insight-lead {
    max-width: 900px;

    margin: 2rem 0 0;

    color: var(--insight-muted);

    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    line-height: 1.65;
}

.insight-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 0.7rem 1.2rem;

    margin-top: 2rem;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.82rem;
    font-weight: 700;
}

.insight-meta span + span::before {
    content: "•";

    margin-right: 1.2rem;

    color: var(--insight-accent);
}

.insight-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1.5rem;
}

.insight-tag {
    display: inline-flex;
    align-items: center;

    min-height: 2.05rem;

    padding: 0.38rem 0.72rem;

    border: 1px solid var(--insight-line);
    border-radius: 999px;

    color: var(--insight-muted);

    font-family: "Courier New", Courier, monospace;
    font-size: 0.76rem;
    font-weight: 700;
}


/* =========================================================
   ARTICLE BODY
   ========================================================= */

.insight-article__content {
    width: min(calc(100% - 6rem), var(--insight-copy));

    margin:
        0
        auto;

    padding:
        clamp(4rem, 7vw, 6rem)
        0
        clamp(5rem, 8vw, 7rem);
}

.insight-article__content p,
.insight-article__content li {
    font-size: clamp(1.08rem, 1.25vw, 1.2rem);
    line-height: 1.82;
}

.insight-article__content p {
    margin: 0 0 1.55rem;
}

.insight-article__content h2 {
    margin:
        clamp(3.6rem, 6vw, 5rem)
        0
        1.25rem;

    color: var(--insight-text-strong);

    font-size: clamp(2.2rem, 3.8vw, 3.7rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.insight-article__content h3 {
    margin: 2.75rem 0 1rem;

    color: var(--insight-text-strong);

    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1.15;
}

.insight-article__content strong {
    color: var(--insight-text-strong);
}

.insight-article__content ul,
.insight-article__content ol {
    margin: 1.4rem 0 2rem;

    padding-left: 1.5rem;
}

.insight-article__content li {
    margin-bottom: 0.6rem;

    padding-left: 0.3rem;
}

.insight-article__content li::marker {
    color: var(--insight-accent);
}

.insight-article__content a {
    color: var(--insight-text-strong);

    text-decoration: underline;
    text-decoration-color: var(--insight-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.insight-callout {
    margin:
        clamp(2.5rem, 5vw, 4rem)
        0;

    padding:
        clamp(1.5rem, 4vw, 2.5rem);

    border-left: 4px solid var(--insight-accent);

    background: var(--insight-surface-soft);
    color: var(--insight-text-strong);

    font-size: clamp(1.25rem, 2.3vw, 1.75rem);
    line-height: 1.45;
}


/* =========================================================
   ARTICLE CTA
   ========================================================= */

.insight-cta {
    padding:
        clamp(4.5rem, 7vw, 7rem)
        0;

    border-top: 1px solid var(--insight-line);
    border-bottom: 1px solid var(--insight-line);

    background: var(--insight-surface-soft);
}

.insight-cta h2,
.insight-related h2 {
    max-width: 850px;

    margin: 0;

    color: var(--insight-text-strong);

    font-size: clamp(2.4rem, 4.5vw, 4.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.insight-cta p:not(.insight-eyebrow) {
    max-width: 760px;

    margin: 1.4rem 0 2.1rem;

    color: var(--insight-muted);

    font-size: 1.1rem;
    line-height: 1.7;
}


/* =========================================================
   RELATED ARTICLES
   ========================================================= */

.insight-related {
    padding:
        clamp(4.5rem, 7vw, 7rem)
        0;
}

.insight-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 2rem;
}

.insight-related__card {
    min-height: 165px;

    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.5rem;

    border: 1px solid var(--insight-line);

    background: var(--insight-surface-soft);
    color: var(--insight-text-strong);

    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.insight-related__card:hover,
.insight-related__card:focus-visible {
    transform: translateY(-3px);

    border-color: var(--insight-accent);
    background: var(--insight-surface);
}

.insight-related__card span:last-child {
    flex: 0 0 auto;

    color: var(--insight-accent);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .insights-library-inner,
    .insights-library-hero__inner,
    .insight-article__inner {
        width: min(calc(100% - 3rem), var(--insight-max));
    }

    .insights-topic-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .insights-article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .insights-field-notes__grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .insight-related__grid {
        grid-template-columns: 1fr;
    }

    .insight-article__content {
        width: min(calc(100% - 3rem), var(--insight-copy));
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .insights-library-inner,
    .insights-library-hero__inner,
    .insight-article__inner,
    .insight-article__content {
        width: calc(100% - 2rem);
    }

    .insights-library-hero__inner {
        padding:
            4.5rem
            0
            4rem;
    }

    .insights-library-hero h1 {
        font-size: clamp(3.8rem, 17vw, 5.7rem);
    }

    .insights-library-intro {
        margin-top: 1.7rem;

        font-size: 1.08rem;
    }

    .insights-section-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 1rem;
    }

    .insights-topic-grid,
    .insights-article-grid {
        grid-template-columns: 1fr;
    }

    .insights-topic-card {
        min-height: 72px;
    }

    .insights-featured-card {
        min-height: unset;

        grid-template-columns: 1fr;
    }

    .insights-featured-card__copy {
        padding: 2rem 1.5rem;
    }

    .insights-featured-card__arrow {
        width: auto;
        min-height: 72px;

        align-items: center;
        justify-content: flex-end;

        padding: 1rem 1.5rem;

        border-top: 1px solid var(--insight-line);
        border-left: 0;
    }

    .insights-article-card__link {
        min-height: 320px;

        padding: 1.7rem 1.4rem;
    }

    .insights-field-notes__copy p,
    .insights-library-cta p:not(.insight-eyebrow) {
        font-size: 1.05rem;
    }

    .insight-hero {
        padding:
            4rem
            0
            3.7rem;
    }

    .insight-hero h1 {
        font-size: clamp(3.3rem, 14vw, 5rem);
    }

    .insight-meta {
        display: grid;

        gap: 0.45rem;
    }

    .insight-meta span + span::before {
        content: "";

        margin: 0;
    }

    .insight-article__content {
        padding:
            3.5rem
            0
            5rem;
    }

    .insight-article__content p,
    .insight-article__content li {
        font-size: 1.05rem;
        line-height: 1.75;
    }
}


/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */

.insights-topic-card:focus-visible,
.insights-featured-card:focus-visible,
.insights-article-card__link:focus-visible,
.insight-related__card:focus-visible,
.insight-button:focus-visible,
.insights-clear-filter:focus-visible,
.insight-breadcrumbs a:focus-visible {
    outline: 3px solid var(--insight-accent);
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .insights-topic-card,
    .insights-featured-card,
    .insights-article-card__link,
    .insights-article-card__arrow,
    .insights-featured-card__arrow,
    .insight-related__card,
    .insight-button {
        transition: none;
    }
}


/* =========================================================
   INSIGHTS LEGIBILITY PASS
   Match the larger, bolder technical typography used across
   the main All Kleer site.
   ========================================================= */

.insight-eyebrow,
.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insight-breadcrumbs,
.insight-meta,
.insight-tag,
.insights-card-tags span,
.insights-card-meta,
.insights-card-number,
.insights-topic-card {
    font-weight: 800;
    letter-spacing: 0.10em;
}

/* Main technical labels */
.insight-eyebrow {
    font-size: 1.06rem;
    line-height: 1.55;
}

.insights-card-category {
    font-size: 0.98rem;
}

.insights-result-count,
.insights-clear-filter {
    font-size: 0.98rem;
}

/* Topic grid */
.insights-topic-card {
    min-height: 104px;
    padding: 1.4rem 1.55rem;
    font-size: 1.02rem;
    line-height: 1.35;
}

/* Article card technical details */
.insights-card-number {
    font-size: 0.88rem;
}

.insights-card-tags span {
    padding: 0.46rem 0.72rem;
    font-size: 0.84rem;
    line-height: 1.25;
}

.insights-card-meta {
    font-size: 0.9rem;
}

/* Article hero technical details */
.insight-breadcrumbs {
    font-size: 0.98rem;
    line-height: 1.45;
}

.insight-meta {
    font-size: 0.96rem;
    line-height: 1.5;
}

.insight-tag {
    min-height: 2.45rem;
    padding: 0.48rem 0.82rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Body copy gets a modest bump too */
.insight-article__content p,
.insight-article__content li {
    font-size: clamp(1.14rem, 1.35vw, 1.28rem);
    line-height: 1.82;
}

/* CTA + supporting copy */
.insight-cta p:not(.insight-eyebrow),
.insights-field-notes__copy p,
.insights-library-cta p:not(.insight-eyebrow) {
    font-size: 1.18rem;
}

/* Tablet */
@media (max-width: 1100px) {

    .insight-eyebrow {
        font-size: 1rem;
    }

    .insights-topic-card {
        min-height: 96px;
        font-size: 0.96rem;
    }

    .insight-breadcrumbs,
    .insight-meta {
        font-size: 0.9rem;
    }

    .insight-tag {
        font-size: 0.86rem;
    }

}

/* Mobile */
@media (max-width: 650px) {

    .insight-eyebrow {
        font-size: 0.92rem;
    }

    .insights-card-category {
        font-size: 0.88rem;
    }

    .insights-topic-card {
        min-height: 80px;
        padding: 1.15rem 1.2rem;
        font-size: 0.92rem;
    }

    .insights-card-number {
        font-size: 0.82rem;
    }

    .insights-card-tags span {
        font-size: 0.78rem;
    }

    .insights-card-meta {
        font-size: 0.82rem;
    }

    .insight-breadcrumbs {
        font-size: 0.86rem;
    }

    .insight-meta {
        font-size: 0.84rem;
    }

    .insight-tag {
        min-height: 2.25rem;
        font-size: 0.82rem;
    }

    .insight-article__content p,
    .insight-article__content li {
        font-size: 1.1rem;
        line-height: 1.78;
    }

}



.insights-library-hero {
    border-top: 1px solid var(--insight-line);
}

/* Keep article pages aligned with the same header rhythm. */
.insight-article-shell {
    padding-top: 2.25rem;
}

.insight-article-shell .insight-hero {
    border-top: 1px solid var(--insight-line);
}

/* Tablet */
@media (max-width: 1100px) {

    .insights-library,
    .insight-article-shell {
        padding-top: 1.75rem;
    }

}

/* Mobile */
@media (max-width: 650px) {

    .insights-library,
    .insight-article-shell {
        padding-top: 1.25rem;
    }

}



.insights-library-hero .insight-eyebrow::after {
    content: "";

    width: 64px;
    height: 2px;

    margin-left: auto;

    background: var(--insight-accent);
    opacity: 0.8;
}

/* Keep the article-page eyebrow simpler; this treatment is for
   the main Insights landing header only. */

@media (max-width: 650px) {

    .insights-library-hero .insight-eyebrow {
        margin-bottom: 1.6rem;
        padding-bottom: 1rem;
    }

    .insights-library-hero .insight-eyebrow::after {
        width: 42px;
    }

}


/* =========================================================
   INSIGHTS HERO — MATCH INTERIOR PAGE HEADERS
   Mirrors the rhythm of Contact / About / Expertise:
   technical eyebrow, breathing room, large headline, intro,
   then a clean section break.
   ========================================================= */

.insights-library {
    padding-top: 0;
}

.insights-library-hero {
    width: min(calc(100% - 6rem), var(--insight-max));
    min-height: 590px;

    margin: 0 auto;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-top: 0;
    border-bottom: 1px solid var(--insight-line);
}

.insights-library-hero__inner {
    width: 100%;
    margin: 0;

    padding:
        8rem
        0
        7rem;
}

.insights-library-hero .insight-eyebrow {
    display: block;

    margin:
        0
        0
        2.8rem;

    padding: 0;

    border: 0;
}

.insights-library-hero .insight-eyebrow::after {
    display: none;
}

.insights-library-hero h1 {
    max-width: 1200px;
}

.insights-library-intro {
    max-width: 820px;
    margin-top: 3rem;
}

/* Keep the technical grid treatment consistent with page-hero. */
.insights-library-hero::before {
    opacity: 0.72;

    background-image:
        linear-gradient(var(--insight-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--insight-grid-line) 1px, transparent 1px);

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 80%
        );
}

/* Individual articles should begin immediately below the shared header
   just like other interior pages. */
.insight-article-shell {
    padding-top: 0;
}

.insight-article-shell .insight-hero {
    border-top: 0;
}


/* =========================================================
   TABLET — MATCH INTERIOR PAGE WIDTH
   ========================================================= */

@media (max-width: 1100px) {

    .insights-library-hero {
        width: min(calc(100% - 3rem), var(--insight-max));
        min-height: 520px;
    }

    .insights-library-hero__inner {
        padding:
            7rem
            0
            6rem;
    }

}


/* =========================================================
   MOBILE — SAME RHYTHM, LESS HEIGHT
   ========================================================= */

@media (max-width: 650px) {

    .insights-library-hero {
        width: calc(100% - 2rem);
        min-height: unset;
    }

    .insights-library-hero__inner {
        padding:
            6rem
            0
            5rem;
    }

    .insights-library-hero .insight-eyebrow {
        margin-bottom: 2.2rem;
    }

    .insights-library-intro {
        margin-top: 2rem;
    }

}


/* =========================================================
   INSIGHTS + GLOBAL TECH BACKGROUND INTEGRATION
   V11 light-theme forest grid + V10 zoned electricity
   ========================================================= */

/*
   IMPORTANT:
   The main site now owns the atmospheric background.
   Insights must therefore remain transparent at page-shell level
   or it will paint an opaque rectangle over the global glow/grid
   and the JavaScript electricity canvas.
*/
.insights-library,
.insight-article-shell,
.insight-article {
    background: transparent;
}


/* =========================================================
   LIGHT THEME — DARK FOREST GREEN TECH GRID
   ========================================================= */

body:not(.dark-theme).page-insights {
    --insight-grid-line: rgba(20, 72, 49, 0.18);
    --insight-line: rgba(20, 72, 49, 0.24);
}

/* Landing-page hero grid */
body:not(.dark-theme).page-insights .insights-library-hero::before {
    opacity: 0.92;

    background-image:
        linear-gradient(
            rgba(20, 72, 49, 0.18) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.18) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to right,
            black 0%,
            rgba(0, 0, 0, 0.82) 56%,
            transparent 88%
        );
}

/* Individual article hero grid */
body:not(.dark-theme).page-insights .insight-hero::before {
    opacity: 0.90;

    background-image:
        linear-gradient(
            rgba(20, 72, 49, 0.17) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 72, 49, 0.17) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to right,
            black 0%,
            rgba(0, 0, 0, 0.80) 55%,
            transparent 88%
        );
}


/* =========================================================
   SURFACES — LET THE ATMOSPHERE SHOW THROUGH
   ========================================================= */

/*
   Cards and secondary bands stay readable, but use translucency
   so the global background still feels continuous.
*/
body:not(.dark-theme).page-insights {
    --insight-surface-soft: rgba(250, 248, 243, 0.68);
}

body.dark-theme.page-insights {
    --insight-surface-soft: rgba(19, 19, 19, 0.66);
}

.page-insights .insights-field-notes,
.page-insights .insight-cta {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.page-insights .insights-featured-card,
.page-insights .insights-article-card__link,
.page-insights .insight-related__card,
.page-insights .insights-empty-state,
.page-insights .insights-topic-card {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* =========================================================
   ARTICLE READING AREA
   Keep the long-form copy visually calm after the upper effect.
   ========================================================= */

.page-insight-article .insight-article__content {
    position: relative;
    z-index: 2;
}

/*
   A very soft reading veil keeps the forest grid from competing
   with body copy while still allowing the page atmosphere through.
*/
body:not(.dark-theme).page-insight-article .insight-article__content {
    background:
        linear-gradient(
            to bottom,
            rgba(243, 241, 235, 0.42),
            rgba(243, 241, 235, 0.72) 20%,
            rgba(243, 241, 235, 0.82) 100%
        );
}

body.dark-theme.page-insight-article .insight-article__content {
    background:
        linear-gradient(
            to bottom,
            rgba(16, 16, 16, 0.28),
            rgba(16, 16, 16, 0.64) 20%,
            rgba(16, 16, 16, 0.78) 100%
        );
}


/* =========================================================
   TOPIC + ARTICLE CARDS
   Slightly stronger forest-green definition in light mode.
   ========================================================= */

body:not(.dark-theme).page-insights .insights-topic-card,
body:not(.dark-theme).page-insights .insights-featured-card,
body:not(.dark-theme).page-insights .insights-article-card,
body:not(.dark-theme).page-insights .insight-related__card,
body:not(.dark-theme).page-insights .insights-empty-state {
    border-color: rgba(20, 72, 49, 0.24);
}

body:not(.dark-theme).page-insights .insights-topic-grid,
body:not(.dark-theme).page-insights .insights-article-grid {
    border-color: rgba(20, 72, 49, 0.24);
}


/* =========================================================
   MOBILE PERFORMANCE
   Avoid unnecessary backdrop-filter work on small screens.
   ========================================================= */

@media (max-width: 650px) {

    .page-insights .insights-field-notes,
    .page-insights .insight-cta,
    .page-insights .insights-featured-card,
    .page-insights .insights-article-card__link,
    .page-insights .insight-related__card,
    .page-insights .insights-empty-state,
    .page-insights .insights-topic-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body:not(.dark-theme).page-insights .insights-library-hero::before,
    body:not(.dark-theme).page-insights .insight-hero::before {
        opacity: 0.78;
    }

}


/* =========================================================
   UNIFIED PAGE HEADER RHYTHM
   Match Home / About / Contact / Expertise.
   ========================================================= */

.insights-library-hero {
    min-height: 0;
    justify-content: flex-start;
}

.insights-library-hero__inner {
    padding-top: clamp(4.25rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(4.25rem, 5.5vw, 5.5rem);
}

.insights-library-hero .insight-eyebrow {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Article hero starts on the same line too. */
.insight-hero {
    padding-top: clamp(4.25rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(4.25rem, 5.5vw, 5.5rem);
}

@media (max-width: 1100px) {

    .insights-library-hero__inner,
    .insight-hero {
        padding-top: 3.75rem;
        padding-bottom: 4rem;
    }

}

@media (max-width: 650px) {

    .insights-library-hero__inner,
    .insight-hero {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .insights-library-hero .insight-eyebrow {
        margin-bottom: 1.35rem;
    }

}


/* =========================================================
   INSIGHTS TECHNICAL TYPE — LARGE / HIGH LEGIBILITY
   Match the larger technical labels used throughout the main site.
   ========================================================= */

.insight-eyebrow,
.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insight-breadcrumbs,
.insight-meta,
.insight-tag,
.insights-card-tags span,
.insights-card-meta,
.insights-topic-card,
.insights-card-number {
    font-weight: 800;
    line-height: 1.5;
}

/* Eyebrows / section labels */
.insight-eyebrow {
    font-size: clamp(1.08rem, 1.15vw, 1.28rem);
}

/* Topic navigation */
.insights-topic-card {
    font-size: clamp(1rem, 1.05vw, 1.18rem);
    line-height: 1.45;
}

/* Categories, counts and filters */
.insights-card-category,
.insights-result-count,
.insights-clear-filter {
    font-size: clamp(0.98rem, 1vw, 1.1rem);
}

/* Article technical metadata */
.insight-breadcrumbs,
.insight-meta {
    font-size: clamp(0.98rem, 1vw, 1.1rem);
}

/* Tags */
.insight-tag {
    min-height: 2.55rem;
    padding: 0.52rem 0.86rem;

    font-size: clamp(0.9rem, 0.95vw, 1.02rem);
}

.insights-card-tags span {
    padding: 0.46rem 0.72rem;

    font-size: clamp(0.84rem, 0.9vw, 0.96rem);
}

.insights-card-meta,
.insights-card-number {
    font-size: clamp(0.88rem, 0.92vw, 1rem);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .insight-eyebrow {
        font-size: 1rem;
        letter-spacing: 0.075em;
    }

    .insights-topic-card {
        font-size: 0.98rem;
    }

    .insights-card-category,
    .insights-result-count,
    .insights-clear-filter,
    .insight-breadcrumbs,
    .insight-meta {
        font-size: 0.92rem;
    }

    .insight-tag {
        font-size: 0.88rem;
    }

    .insights-card-tags span,
    .insights-card-meta,
    .insights-card-number {
        font-size: 0.84rem;
    }

}


/* =========================================================
   FINAL INSIGHTS RHYTHM NORMALIZATION — 2026-08-14
   Mirrors the authoritative Home / About / Contact / Expertise
   header and section system from the main stylesheet.
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-insight-content-width: min(calc(100% - 6rem), var(--insight-max));

    --akcs-insight-display-font: Arial, Helvetica, sans-serif;
    --akcs-insight-tech-font: "Courier New", Courier, monospace;

    --akcs-insight-hero-top: clamp(4.25rem, 5.4vw, 5.5rem);
    --akcs-insight-hero-bottom: clamp(4.5rem, 5.8vw, 5.9rem);

    --akcs-insight-label-gap: clamp(1.55rem, 2vw, 1.9rem);
    --akcs-insight-title-gap: clamp(1.8rem, 2.5vw, 2.25rem);

    --akcs-insight-section-y: clamp(4.5rem, 6vw, 6.25rem);
}


/* =========================================================
   SHARED DISPLAY TYPOGRAPHY
   ========================================================= */

/* Landing hero matches Home / About / Contact / Expertise H1 exactly. */
.insights-library-hero h1,
.insights-library-hero h1 span {
    font-family: var(--akcs-insight-display-font);
    font-style: normal;
    font-variant: normal;
    font-weight: 600;

    font-size: clamp(4.35rem, 6.8vw, 7.8rem);
    line-height: 0.91;
    letter-spacing: -0.06em;
}

/* Article titles use the same family/weight/tracking, while keeping
   a slightly tighter maximum size for long technical titles. */
.insight-hero h1 {
    font-family: var(--akcs-insight-display-font);
    font-style: normal;
    font-variant: normal;
    font-weight: 600;

    font-size: clamp(3.7rem, 5.8vw, 6.8rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
}

/* Secondary Insights headings share the same display face. */
.insights-section-heading h2,
.insights-featured-card h2,
.insights-field-notes h2,
.insights-library-cta h2,
.insight-cta h2,
.insight-related h2,
.insights-empty-state h3,
.insights-article-card h3,
.insight-article__content h2,
.insight-article__content h3 {
    font-family: var(--akcs-insight-display-font);
    font-style: normal;
    font-variant: normal;
}


/* =========================================================
   SHARED TECHNICAL TYPOGRAPHY
   ========================================================= */

.insight-eyebrow,
.insight-breadcrumbs,
.insight-meta,
.insight-tag,
.insights-topic-card,
.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insights-card-meta,
.insights-card-tags span,
.insights-card-number {
    font-family: var(--akcs-insight-tech-font);
    font-style: normal;
    font-variant: normal;
    font-weight: 800;
}

/* Eyebrow matches the exact visual weight and size used on
   About / Contact / Expertise. */
.insight-eyebrow {
    font-size: clamp(1.06rem, 1.12vw, 1.22rem);
    line-height: 1.55;
    letter-spacing: 0.09em;
}


/* =========================================================
   LANDING HERO GEOMETRY
   ========================================================= */

.insights-library-hero {
    width: var(--akcs-insight-content-width);
    margin-left: auto;
    margin-right: auto;

    min-height: 0;

    justify-content: flex-start;

    border-top: 0;
    border-bottom: 1px solid var(--insight-line);
}

.insights-library-hero__inner {
    width: 100%;
    margin: 0;

    padding-top: var(--akcs-insight-hero-top);
    padding-bottom: var(--akcs-insight-hero-bottom);
}

.insights-library-hero .insight-eyebrow {
    margin-top: 0;
    margin-bottom: var(--akcs-insight-label-gap);
}

.insights-library-hero h1 {
    margin-top: 0;
    margin-bottom: var(--akcs-insight-title-gap);
}

.insights-library-intro {
    max-width: 840px;

    margin-top: 0;
    margin-bottom: 0;

    font-size: clamp(1.18rem, 1.42vw, 1.4rem);
    line-height: 1.68;
}


/* =========================================================
   ARTICLE HERO GEOMETRY
   ========================================================= */

.insight-article-shell {
    padding-top: 0;
}

.insight-hero {
    padding-top: var(--akcs-insight-hero-top);
    padding-bottom: var(--akcs-insight-hero-bottom);

    border-top: 0;
    border-bottom: 1px solid var(--insight-line);
}

/* Breadcrumbs are an extra row articles need, so standardize
   them separately without disturbing the main eyebrow rhythm. */
.insight-breadcrumbs {
    margin-top: 0;
    margin-bottom: clamp(1.4rem, 1.8vw, 1.7rem);

    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.5;
    letter-spacing: 0.055em;
}

.insight-hero .insight-eyebrow {
    margin-top: 0;
    margin-bottom: var(--akcs-insight-label-gap);
}

.insight-hero h1 {
    margin-top: 0;
    margin-bottom: var(--akcs-insight-title-gap);
}

.insight-lead {
    max-width: 900px;

    margin-top: 0;
    margin-bottom: 0;

    font-size: clamp(1.18rem, 1.42vw, 1.4rem);
    line-height: 1.68;
}

.insight-meta {
    margin-top: clamp(1.6rem, 2.2vw, 2rem);

    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.5;
    letter-spacing: 0.055em;
}

.insight-tags {
    margin-top: clamp(1.25rem, 1.8vw, 1.6rem);
}


/* =========================================================
   SECTION RHYTHM + DIVIDERS
   ========================================================= */

/* One clean divider between every major landing-page band. */
.insights-topic-section,
.insights-featured,
.insights-article-list,
.insights-field-notes {
    padding-top: var(--akcs-insight-section-y);
    padding-bottom: var(--akcs-insight-section-y);

    border-top: 0;
    border-bottom: 1px solid var(--insight-line);
}

/* CTA is the final band before the footer, so footer owns the final rule. */
.insights-library-cta {
    padding-top: var(--akcs-insight-section-y);
    padding-bottom: calc(var(--akcs-insight-section-y) + 0.75rem);

    border-top: 0;
    border-bottom: 0;
}

/* Article body has no extra divider at the top; hero already owns it. */
.insight-article__content {
    border-top: 0;
}

/* Article CTA owns a single divider above and below. */
.insight-cta {
    padding-top: var(--akcs-insight-section-y);
    padding-bottom: var(--akcs-insight-section-y);

    border-top: 1px solid var(--insight-line);
    border-bottom: 1px solid var(--insight-line);
}

/* Related reading is the final article band before footer. */
.insight-related {
    padding-top: var(--akcs-insight-section-y);
    padding-bottom: calc(var(--akcs-insight-section-y) + 0.75rem);

    border-top: 0;
    border-bottom: 0;
}


/* =========================================================
   SECTION LABEL SPACING
   ========================================================= */

.insights-section-heading .insight-eyebrow,
.insights-featured > .insights-library-inner > .insight-eyebrow,
.insights-field-notes .insight-eyebrow,
.insights-library-cta .insight-eyebrow,
.insight-cta .insight-eyebrow,
.insight-related .insight-eyebrow,
.insights-empty-state .insight-eyebrow {
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 2vw, 1.9rem);
}


/* =========================================================
   LANDING-PAGE INTERNAL RHYTHM
   ========================================================= */

.insights-section-heading {
    margin-bottom: clamp(2.2rem, 3vw, 2.8rem);
}

.insights-section-heading h2,
.insights-field-notes h2,
.insights-library-cta h2 {
    margin-top: 0;
}

.insights-featured-card h2 {
    margin-top: clamp(1.2rem, 1.7vw, 1.5rem);
}

.insights-card-meta {
    margin-top: clamp(1.15rem, 1.5vw, 1.4rem);
}

.insights-card-tags {
    padding-top: clamp(1.6rem, 2vw, 2rem);
}


/* =========================================================
   ARTICLE INTERNAL RHYTHM
   ========================================================= */

.insight-cta h2,
.insight-related h2 {
    margin-top: 0;
}

.insight-cta p:not(.insight-eyebrow) {
    margin-top: clamp(1.3rem, 1.8vw, 1.6rem);
}

.insight-related__grid {
    margin-top: clamp(1.8rem, 2.4vw, 2.2rem);
}


/* =========================================================
   TECHNICAL TEXT LEGIBILITY
   Keep the enlarged technical text consistent with the rest
   of the site instead of allowing old Insights rules to shrink it.
   ========================================================= */

.insights-topic-card {
    font-size: clamp(1rem, 1.05vw, 1.15rem);
    line-height: 1.45;
}

.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insight-breadcrumbs,
.insight-meta {
    font-size: clamp(0.98rem, 1vw, 1.08rem);
}

.insight-tag {
    min-height: 2.5rem;
    padding: 0.5rem 0.84rem;

    font-size: clamp(0.9rem, 0.95vw, 1rem);
}

.insights-card-tags span {
    padding: 0.46rem 0.72rem;

    font-size: clamp(0.84rem, 0.9vw, 0.95rem);
}

.insights-card-meta,
.insights-card-number {
    font-size: clamp(0.88rem, 0.92vw, 0.98rem);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --akcs-insight-content-width: min(calc(100% - 3rem), var(--insight-max));

        --akcs-insight-hero-top: 3.75rem;
        --akcs-insight-hero-bottom: 4rem;

        --akcs-insight-section-y: 4rem;
    }

    .insights-library-hero h1 {
        font-size: clamp(4rem, 9vw, 6.4rem);
    }

    .insight-hero h1 {
        font-size: clamp(3.55rem, 7vw, 5.8rem);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --akcs-insight-content-width: calc(100% - 2rem);

        --akcs-insight-hero-top: 2.85rem;
        --akcs-insight-hero-bottom: 3.35rem;

        --akcs-insight-label-gap: 1.3rem;
        --akcs-insight-title-gap: 1.45rem;

        --akcs-insight-section-y: 3.5rem;
    }

    .insights-library-hero h1 {
        font-size: clamp(3.45rem, 14.5vw, 5rem);
        line-height: 0.92;
    }

    .insight-hero h1 {
        font-size: clamp(3.15rem, 13.5vw, 4.7rem);
        line-height: 0.94;
    }

    .insight-eyebrow {
        font-size: 0.98rem;
        line-height: 1.55;
        letter-spacing: 0.075em;
    }

    .insights-library-intro,
    .insight-lead {
        font-size: 1.08rem;
    }

    .insight-breadcrumbs,
    .insight-meta {
        font-size: 0.92rem;
    }

    .insights-topic-card {
        font-size: 0.98rem;
    }

    .insight-tag {
        font-size: 0.88rem;
    }

    .insights-card-tags span,
    .insights-card-meta,
    .insights-card-number {
        font-size: 0.84rem;
    }

}


/* =========================================================
   INSIGHTS INDENT / GUTTER SYNC — 2026-08-14
   Make Insights use the exact same horizontal content gutter
   as Home / About / Contact / Expertise.
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-site-width: min(calc(100% - 6rem), var(--max-width));
}

/* Landing page hero + every major content wrapper */
.insights-library-hero,
.insights-library-inner,
.insight-article__inner {
    width: var(--akcs-site-width);
    margin-left: auto;
    margin-right: auto;
}

/* The landing hero already owns the site width, so its inner
   wrapper must not calculate a second gutter. */
.insights-library-hero__inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Article body remains intentionally narrower for readability,
   but it is centered on the SAME site axis rather than drifting. */
.insight-article__content {
    width: min(calc(100% - 6rem), var(--insight-copy));
    margin-left: auto;
    margin-right: auto;
}

/* Never let an old Insights rule add extra side padding/margins. */
.insights-topic-section,
.insights-featured,
.insights-article-list,
.insights-field-notes,
.insights-library-cta,
.insight-hero,
.insight-cta,
.insight-related {
    margin-left: 0;
    margin-right: 0;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --akcs-site-width: min(calc(100% - 3rem), var(--max-width));
    }

    .insight-article__content {
        width: min(calc(100% - 3rem), var(--insight-copy));
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --akcs-site-width: calc(100% - 2rem);
    }

    .insight-article__content {
        width: calc(100% - 2rem);
    }

}


/* =========================================================
   FINAL INSIGHTS MOBILE TIGHTENING — 2026-08-14
   Matches the whole-site mobile rhythm. Keep this block LAST.
   ========================================================= */

@media (max-width: 650px) {

    :root {
        --insight-mobile-width: calc(100% - 2rem);
        --insight-mobile-section-y: 3rem;
    }

    .insights-library-hero,
    .insights-library-inner,
    .insight-article__inner,
    .insight-article__content {
        width: var(--insight-mobile-width);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    /* -----------------------------------------------------
       LANDING HERO
       ----------------------------------------------------- */

    .insights-library-hero__inner {
        width: 100%;

        padding-top: 2.5rem;
        padding-bottom: 2.8rem;
    }

    .insights-library-hero .insight-eyebrow {
        margin-bottom: 1.15rem;
    }

    .insights-library-hero h1 {
        margin-bottom: 1.25rem;

        font-size: clamp(3.05rem, 13.2vw, 4.4rem);
        line-height: 0.94;
        letter-spacing: -0.055em;
    }

    .insights-library-intro {
        font-size: 1.04rem;
        line-height: 1.58;
    }

    .insight-eyebrow {
        font-size: 0.92rem;
        line-height: 1.5;
        letter-spacing: 0.07em;
    }


    /* -----------------------------------------------------
       LANDING SECTIONS
       ----------------------------------------------------- */

    .insights-topic-section,
    .insights-featured,
    .insights-article-list,
    .insights-field-notes,
    .insights-library-cta {
        padding-top: var(--insight-mobile-section-y);
        padding-bottom: var(--insight-mobile-section-y);
    }

    .insights-section-heading {
        margin-bottom: 1.6rem;
    }

    .insights-section-heading h2,
    .insights-field-notes h2,
    .insights-library-cta h2 {
        font-size: clamp(2.3rem, 10.5vw, 3.45rem);
        line-height: 1;
    }

    .insights-topic-grid {
        gap: 0.55rem;
    }

    .insights-topic-card {
        min-height: 46px;
        padding: 0.7rem 0.8rem;

        font-size: 0.9rem;
    }


    /* -----------------------------------------------------
       FEATURED / ARTICLE CARDS
       ----------------------------------------------------- */

    .insights-featured-card {
        grid-template-columns: 1fr;
    }

    .insights-featured-card__copy {
        padding: 1.4rem 1.15rem;
    }

    .insights-featured-card h2 {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;

        font-size: clamp(2rem, 9vw, 2.8rem);
        line-height: 1.02;
    }

    .insights-featured-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .insights-article-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .insights-article-card {
        min-height: 0;
        padding: 1.45rem 1.1rem;
    }

    .insights-article-card h3 {
        margin-top: 1rem;
        margin-bottom: 0.75rem;

        font-size: 1.7rem;
        line-height: 1.06;
    }

    .insights-article-card p {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .insights-card-meta {
        margin-top: 0.9rem;

        font-size: 0.82rem;
    }

    .insights-card-tags {
        gap: 0.4rem;

        padding-top: 1rem;
    }

    .insights-card-tags span,
    .insight-tag {
        min-height: 0;
        padding: 0.38rem 0.58rem;

        font-size: 0.78rem;
        line-height: 1.35;
    }


    /* -----------------------------------------------------
       FIELD NOTES
       ----------------------------------------------------- */

    .insights-field-notes__grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .insights-field-notes__copy p {
        font-size: 0.98rem;
        line-height: 1.58;
    }


    /* -----------------------------------------------------
       ARTICLE HERO
       ----------------------------------------------------- */

    .insight-article-shell {
        padding-top: 0;
    }

    .insight-hero {
        padding-top: 2.5rem;
        padding-bottom: 2.8rem;
    }

    .insight-breadcrumbs {
        margin-bottom: 1rem;

        font-size: 0.82rem;
        line-height: 1.45;
    }

    .insight-hero .insight-eyebrow {
        margin-bottom: 1.1rem;
    }

    .insight-hero h1 {
        margin-bottom: 1.25rem;

        font-size: clamp(2.8rem, 12.2vw, 4rem);
        line-height: 0.96;
        letter-spacing: -0.05em;
    }

    .insight-lead {
        font-size: 1.04rem;
        line-height: 1.6;
    }

    .insight-meta {
        margin-top: 1.2rem;

        font-size: 0.84rem;
        line-height: 1.45;
    }

    .insight-tags {
        gap: 0.4rem;

        margin-top: 1rem;
    }


    /* -----------------------------------------------------
       ARTICLE BODY
       ----------------------------------------------------- */

    .insight-article__content {
        padding-top: 2.6rem;
        padding-bottom: 2.8rem;

        font-size: 1rem;
        line-height: 1.65;
    }

    .insight-article__content h2 {
        margin-top: 2.6rem;
        margin-bottom: 1rem;

        font-size: clamp(2rem, 9.5vw, 2.8rem);
        line-height: 1.05;
    }

    .insight-article__content h3 {
        margin-top: 2rem;
        margin-bottom: 0.8rem;

        font-size: 1.55rem;
        line-height: 1.12;
    }

    .insight-article__content p {
        margin-bottom: 1.15rem;
    }

    .insight-article__content ul,
    .insight-article__content ol {
        padding-left: 1.25rem;
    }

    .insight-article__content li {
        margin-bottom: 0.55rem;
    }

    .insight-article__content blockquote {
        margin: 1.6rem 0;
        padding: 1.2rem 1rem;
    }


    /* -----------------------------------------------------
       ARTICLE CTA / RELATED
       ----------------------------------------------------- */

    .insight-cta,
    .insight-related {
        padding-top: var(--insight-mobile-section-y);
        padding-bottom: var(--insight-mobile-section-y);
    }

    .insight-cta h2,
    .insight-related h2 {
        font-size: clamp(2.25rem, 10vw, 3.3rem);
        line-height: 1.02;
    }

    .insight-cta p:not(.insight-eyebrow) {
        margin-top: 1rem;

        font-size: 1rem;
        line-height: 1.58;
    }

    .insight-related__grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;

        margin-top: 1.4rem;
    }

}


/* Extra-small phones */
@media (max-width: 390px) {

    :root {
        --insight-mobile-width: calc(100% - 1.5rem);
    }

    .insights-library-hero h1 {
        font-size: clamp(2.7rem, 13vw, 3.55rem);
    }

    .insight-hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.3rem);
    }

    .insight-eyebrow {
        font-size: 0.84rem;
    }

}


/* =========================================================
   INSIGHTS — ULTRA-LEAN TECH TYPE SYNC
   Matches the current site-wide tall/thin green technical font.
   Keep this block LAST.
   ========================================================= */

:root {
    --akcs-insight-tech-ultralean:
        "Barlow Condensed",
        "Arial Narrow",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}

.insight-eyebrow,
.insights-card-category,
.insights-result-count,
.insights-clear-filter,
.insight-breadcrumbs,
.insight-meta,
.insight-tag,
.insights-card-tags span,
.insights-card-meta,
.insights-card-number,
.insights-topic-card,
.insights-topic-count,
.insights-live-badge,
.insight-system-strip {
    font-family: var(--akcs-insight-tech-ultralean) !important;
    font-style: normal !important;
    font-variant: normal !important;

    font-weight: 300 !important;
    letter-spacing: 0.105em !important;
    line-height: 1.35;

    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Slight hierarchy only where it actually helps. */
.insight-eyebrow,
.insights-topic-card {
    font-weight: 400 !important;
}

/* Greener labels stay elegant rather than fluorescent. */
.insight-eyebrow,
.insights-card-category,
.insights-clear-filter,
.insights-live-badge {
    color: color-mix(in srgb, var(--insight-accent) 78%, white 22%);
}

/* Topic cards: tall, lean, slightly roomier. */
.insights-topic-card {
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    letter-spacing: 0.09em !important;
}

/* Metadata should feel editorial, not stamped. */
.insights-result-count,
.insight-breadcrumbs,
.insight-meta,
.insights-card-meta,
.insights-card-number {
    font-weight: 300 !important;
    letter-spacing: 0.065em !important;
}

/* Tags become lighter and more glassy. */
.insight-tag,
.insights-card-tags span {
    font-weight: 300 !important;

    border-color: color-mix(in srgb, var(--insight-line) 84%, transparent);
    background: color-mix(in srgb, var(--insight-surface-soft) 52%, transparent);
}

/* Remove the old heavy look from topic/category systems. */
.insights-card-category,
.insights-clear-filter {
    font-weight: 400 !important;
}

/* Slightly more graceful hover movement. */
.insights-topic-card,
.insights-featured-card,
.insights-article-card__link,
.insight-related__card {
    transition:
        background 220ms ease,
        border-color 220ms ease,
        color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}

.insights-topic-card:hover,
.insights-topic-card:focus-visible,
.insights-topic-card.is-active {
    box-shadow:
        inset 0 0 20px rgba(82,176,82,0.025),
        0 0 18px rgba(82,176,82,0.025);
}

.insights-featured-card:hover,
.insights-featured-card:focus-visible,
.insights-article-card__link:hover,
.insights-article-card__link:focus-visible,
.insight-related__card:hover,
.insight-related__card:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.018),
        0 12px 28px rgba(0,0,0,0.07);
}

/* Make the LATEST marker quieter and taller. */
.insights-live-badge {
    font-size: 0.7rem;
    font-weight: 400 !important;
    letter-spacing: 0.11em !important;
}

/* Article related-system pills match the same lean language. */
.insight-system-strip {
    font-weight: 300 !important;
}

.insight-system-strip > span {
    font-weight: 400 !important;
}

.insight-system-strip a {
    font-weight: 300 !important;
}

/* Mobile: preserve the skinny look without getting too tiny. */
@media (max-width: 650px) {

    .insight-eyebrow {
        font-size: 0.92rem;
        font-weight: 400 !important;
    }

    .insights-topic-card {
        font-size: 0.92rem;
    }

    .insights-card-category,
    .insights-result-count,
    .insights-clear-filter,
    .insight-breadcrumbs,
    .insight-meta {
        font-size: 0.86rem;
    }

    .insight-tag,
    .insights-card-tags span {
        font-size: 0.78rem;
    }
}