/* ============================================================================
   DEFINE · Insights — public landing + article chrome.

   Design language: editorial and restrained (Henning Larsen), structured depth
   (McKinsey), instant filtering (Bear Systems). Brand tokens mirror the editor
   and the define.global palette so the publication reads as one system.

   Scope note: article bodies ship their own inline styles + responsive <style>
   from the editor, so nothing here sets type/colour inside .insights-article
   beyond the wrapper.
   ============================================================================ */

.define-insights {
    --c-primary: #6B3FE5;
    --c-primary-deep: #5827C7;
    --c-cyan: #5BE3FF;
    --c-ink: #1A1B3A;
    --c-ink-2: #2A2C63;
    --c-muted: #5B5C70;
    --c-hero-bg: #0F1029;
    --c-rule: rgba(107, 63, 229, .14);
    --c-surface: #fff;
    --c-surface-2: #F6F4FD;
    --ff-display: "Spectral", Georgia, serif;
    --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    color: var(--c-ink);
    font-family: var(--ff-body);
}

.define-insights.is-landing {
    /* Break out of the narrow define container to go full-bleed editorial. */
    margin: 0 -15px;
}

/* ------------------------------------------------------------- buttons */

.ins-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.ins-btn--primary {
    background: var(--c-primary);
    color: #fff;
}

.ins-btn--primary:hover {
    background: var(--c-primary-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(88, 39, 199, .28);
}

.ins-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.is-landing .ins-btn--ghost:hover {
    border-color: var(--c-cyan);
    color: var(--c-cyan);
}

/* ------------------------------------------------------------- hero */

/* Full-bleed: break out of the DEFINE container to span the whole viewport width
   on any screen, rather than sitting in a rounded, margined block. */
.ins-hero {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    min-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(64px, 12vh, 140px) clamp(24px, 6vw, 80px) clamp(80px, 12vh, 130px);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* ---- background layers (media → watermark → scrim), all behind the copy ---- */
.ins-hero__bg { position: absolute; inset: 0; z-index: -1; }

.ins-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    /* Slow, calm drift — not a jarring loop */
    animation: ins-kenburns 26s ease-in-out infinite alternate;
}

/* Base fill / fallback when no media is set: the DEFINE gradient. */
.ins-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 90% at 78% 8%, #26295c 0%, transparent 55%),
        radial-gradient(80% 80% at 12% 100%, #3a1e83 0%, transparent 60%),
        linear-gradient(160deg, var(--c-hero-bg) 0%, #16173a 100%);
    z-index: -2;
}

/* Faint brand watermark — a soft dot field, kept low-contrast so it never
   competes with the headline (the readability lesson from the reference). */
.ins-hero__watermark {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.4px);
    background-size: 26px 26px;
    opacity: .28;
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}

/* Readability scrim over any media. Strength is builder-configurable via --scrim. */
.ins-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 16, 41, calc(var(--scrim, .55) * .55)) 0%,
                                 rgba(15, 16, 41, calc(var(--scrim, .55) * .95)) 100%),
        radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(15, 16, 41, calc(var(--scrim, .55) * .7)) 100%);
}

/* When the author has set media, deepen the base so a light image stays legible. */
.ins-hero[data-has-media] .ins-hero__watermark { opacity: .16; }

/* ---- copy ---- */
.ins-hero__copy {
    position: relative;
    max-width: 900px;
    animation: ins-hero-in .7s cubic-bezier(.2, .7, .2, 1) both;
}

.ins-hero__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-cyan);
    margin-bottom: 22px;
}

/* Calmer than before: mixed-case, roomier line-height and letter-spacing so the
   condensed display face reads as editorial rather than shouting. */
.ins-hero__title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(42px, 7vw, 84px);
    line-height: 1.03;
    letter-spacing: .5px;
    margin: 0 auto 24px;
    max-width: 16ch;
    text-wrap: balance;
}

.ins-hero__title em {
    font-style: normal;
    color: var(--c-cyan);
}

.ins-hero__sub {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    max-width: 60ch;
    margin: 0 auto 34px;
}

.ins-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* scroll cue */
.ins-hero__scroll {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}

.ins-hero__scroll span {
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: var(--c-cyan);
    animation: ins-scroll 1.8s ease-in-out infinite;
}

@keyframes ins-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ins-kenburns {
    from { transform: scale(1.03); }
    to { transform: scale(1.12); }
}
@keyframes ins-scroll {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: .3; }
}

/* ------------------------------------------------------------- filter bar */

.ins-controls {
    position: sticky;
    top: 12px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 26px clamp(8px, 4vw, 40px) 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--c-rule);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(26, 27, 58, .06);
}

.ins-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ins-chip {
    --chip-accent: var(--c-primary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-rule);
    background: #fff;
    color: var(--c-ink);
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.ins-chip:hover {
    border-color: var(--chip-accent);
    color: var(--chip-accent);
}

.ins-chip.is-active {
    background: var(--chip-accent);
    border-color: var(--chip-accent);
    color: #fff;
}

.ins-chip__count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

.ins-chip.is-active .ins-chip__count {
    opacity: .85;
}

.ins-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 300px;
}

.ins-search__icon {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--c-muted);
    pointer-events: none;
}

.ins-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 36px;
    border: 1px solid var(--c-rule);
    border-radius: 10px;
    font-size: 14px;
    font-family: var(--ff-body);
    background: #fff;
    color: var(--c-ink);
}

.ins-search input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(107, 63, 229, .12);
}

/* ------------------------------------------------------------- feed */

.ins-feed {
    padding: 8px clamp(8px, 4vw, 40px) 20px;
}

.ins-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: 22px 2px 14px;
}

.ins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

/* card */
.ins-card {
    --card-accent: var(--c-primary);
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-rule);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ins-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(26, 27, 58, .14);
    border-color: transparent;
}

.ins-card__art {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-surface-2);
    overflow: hidden;
}

.ins-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.ins-card:hover .ins-card__art img {
    transform: scale(1.04);
}

/* topic-accent wash for cards without cover art */
.ins-card__art-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(120% 120% at 15% 15%, color-mix(in srgb, var(--card-accent) 34%, transparent), transparent 60%),
        linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
}

/* A big faint topic word so an image-less card reads as intentional, not empty. */
.ins-card__art-mark {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(22px, 4vw, 46px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    color: rgba(255, 255, 255, .14);
}

.ins-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
    flex: 1;
}

.ins-card__eyebrow {
    min-height: 14px;
}

.ins-card__topic {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--card-accent);
}

.ins-card__title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.12;
    margin: 0;
    color: var(--c-ink);
}

.ins-card__excerpt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--c-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ins-card__meta {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: #8a8980;
}

/* featured — the lead article, spanning wide with a side-by-side layout */
.ins-featured-wrap {
    margin-bottom: 8px;
}

.ins-card--featured {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: stretch;
}

.ins-card--featured .ins-card__art {
    aspect-ratio: auto;
    min-height: 320px;
}

.ins-card--featured .ins-card__body {
    padding: clamp(22px, 3vw, 40px);
    justify-content: center;
    gap: 14px;
}

.ins-card--featured .ins-card__title {
    font-size: clamp(28px, 3.4vw, 42px);
}

.ins-card--featured .ins-card__excerpt {
    font-size: 15px;
    -webkit-line-clamp: 4;
}

/* no-results */
.ins-noresults {
    text-align: center;
    padding: 60px 0;
    color: var(--c-muted);
}

.ins-noresults .ins-btn--ghost {
    color: var(--c-primary);
    border-color: var(--c-primary);
    margin-top: 12px;
}

/* filtered-out items */
.ins-card[hidden],
.ins-featured-wrap[hidden],
.ins-section-label[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------- signup */

.ins-signup {
    margin: 40px clamp(8px, 4vw, 40px) 8px;
    padding: clamp(30px, 4vw, 56px);
    border-radius: 20px;
    background:
        radial-gradient(120% 160% at 90% 0%, rgba(91, 227, 255, .12), transparent 55%),
        linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
    color: #fff;
}

.ins-signup__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.ins-signup__copy h2 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
    margin: 0 0 12px;
}

.ins-signup__copy p {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.ins-signup__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ins-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ins-signup__form input[type=text],
.ins-signup__form input[type=email] {
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 14px;
    font-family: var(--ff-body);
}

.ins-signup__form input::placeholder {
    color: rgba(255, 255, 255, .6);
}

.ins-signup__form input:focus {
    outline: none;
    border-color: var(--c-cyan);
    background: rgba(255, 255, 255, .16);
}

.ins-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

.ins-consent input {
    margin-top: 2px;
    accent-color: var(--c-cyan);
    flex: none;
}

.ins-signup__submit {
    align-self: flex-start;
    background: #fff;
    color: var(--c-primary-deep);
    margin-top: 2px;
}

.ins-signup__submit:hover {
    background: var(--c-cyan);
    color: var(--c-ink);
    box-shadow: none;
}

.ins-signup__submit:disabled {
    opacity: .6;
    pointer-events: none;
}

.ins-signup__msg {
    font-size: 13px;
    margin: 2px 0 0;
    min-height: 18px;
}

.ins-signup__msg.is-ok { color: #C9F7E5; }
.ins-signup__msg.is-err { color: #FFD4CE; }

/* ------------------------------------------------------------- article + empty */

.insights-article {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 20px 60px;
}

/* A self-styled import renders EXACTLY as authored: break it out of the platform
   container to the full viewport (edge-to-edge), drop every reading-column clamp,
   and let the document's own CSS (its full-width hero/bands + its own max-width
   reading column + its own responsive @media) govern entirely. */
.insights-article--import {
    position: relative;
    max-width: none;
    padding: 0 0 60px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Contain the tiny 100vw-vs-scrollbar overflow from full-bleed imports. Only the
   body is set (not html), so the root stays the scroll context and the sticky nav
   keeps working. insights.css only loads on Insights pages, so this stays scoped. */
body.define-insights-page { overflow-x: hidden; }
/* The imported hero renders flush under the nav (as in the reference, which has no
   back link); the platform "← All Insights" link floats over the hero's top-left as
   a subtle pill so it stays legible on either a light or dark hero and never pushes
   the hero down. */
.insights-article--import > .ins-back {
    position: absolute;
    top: 16px;
    left: max(24px, calc(50vw - 620px));
    /* above the imported hero (which sets position:relative; z-index:100) but below
       the sticky nav (z-index:200). */
    z-index: 120;
    margin: 0;
    padding: 6px 13px 6px 11px;
    border-radius: 999px;
    background: rgba(10, 12, 30, .32);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff;
    font-weight: 600;
}
.insights-article--import > .ins-back:hover { background: rgba(10, 12, 30, .5); text-decoration: none; }
@media (max-width: 680px) {
    .insights-article--import > .ins-back { top: 12px; left: 14px; }
}
.insights-article--import .page-shell {
    max-width: none;
    padding: 0;
    margin: 0;
}
.insights-article--import .ins-import { width: 100%; }
/* Keep a consistent gap between the standard 64px nav and an imported document's
   own left TOC / right case rails (whatever --headh the document assumed). */
.ins-import .toc-left, .ins-import .cases-right, .ins-import .rail { top: 88px !important; }

.ins-back {
    display: inline-block;
    margin: 6px 0 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary);
    text-decoration: none;
}

.ins-back:hover { text-decoration: underline; }

.insights-author-actions {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 28px;
    border-top: 1px solid var(--c-rule);
}

.insights-author-actions a {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-primary-deep);
    text-decoration: none;
}

.ins-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--c-muted);
}

.ins-empty h1 {
    font-family: var(--ff-display);
    font-size: 34px;
    color: var(--c-ink);
    margin: 0 0 8px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .ins-hero {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .ins-hero__art {
        order: -1;
        max-width: 300px;
    }

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

    .ins-card--featured .ins-card__art {
        min-height: 220px;
    }

    .ins-signup__inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 560px) {
    .ins-controls {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .ins-search {
        flex-basis: auto;
    }

    .ins-grid {
        grid-template-columns: 1fr;
    }

    .ins-field-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ins-hero__media,
    .ins-hero__copy,
    .ins-hero__scroll span,
    .ins-card,
    .ins-card__art img,
    .ins-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   Insights top nav — editorial reference structure, DEFINE brand.
   ============================================================================ */
/* ============================================================================
   Insights standard nav — a single sticky bar that transforms on scroll: DEFINE
   logo + links by default; past ~170px it swaps the links for the article title +
   Share / Print / Save, with a cyan reading-progress line flush to the bottom.
   Mirrors the live define.global header; supplied on every Insights page + import.
   ============================================================================ */
.ins-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.15) blur(10px); -webkit-backdrop-filter: saturate(1.15) blur(10px); border-bottom: 1px solid #d7dee3; font-family: Inter, Roboto, system-ui, sans-serif; }
.definePages header.ins-nav { position: sticky; top: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; z-index: 200; }
/* define-main.css styles every .definePages nav as a translucent pill; the reference
   nav has none, so neutralise it on our nav + mobile overlay. */
.ins-nav .ins-nav__links, .definePages .ins-nav .ins-nav__links { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.definePages nav.ins-mnav { background: #fff; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
/* Definitive kill for the define.global "nav pill" (translucent lavender box with
   a purple-tinted border/radius) on the Insights nav and every <nav> inside it —
   forced so a stale cache or any base rule can never bring it back. */
.definePages header.ins-nav nav,
.definePages header.ins-nav .ins-nav__links,
.definePages header.ins-nav .ins-nav__cta { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ins-nav__wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.ins-nav__brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.ins-nav__logo { height: 30px; width: auto; display: block; }
.ins-nav__links { display: flex; align-items: center; gap: 28px; }
.ins-nav__links a { font-size: 14.5px; color: #5a6b78; font-weight: 500; text-decoration: none; transition: color .15s; white-space: nowrap; }
.ins-nav__links a:hover { color: #051c2c; }
.ins-nav__links a.is-current { color: #051c2c; font-weight: 600; }
.ins-nav__title { display: none; min-width: 0; flex: 1; font-family: "Spectral", Georgia, serif; font-weight: 600; font-size: 16px; color: #051c2c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-nav__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.ins-nav__btn { display: inline-flex; align-items: center; gap: 9px; font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; background: #6321A9; color: #fff; text-decoration: none; transition: background .18s, transform .18s; white-space: nowrap; }
.ins-nav__btn:hover { background: #360564; transform: translateY(-1px); color: #fff; text-decoration: none; }
.ins-nav__actions { display: none; align-items: center; gap: 2px; flex: none; }
.ins-nav__actions button { display: inline-flex; align-items: center; gap: 7px; font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #051c2c; background: none; border: 0; padding: 8px 11px; border-radius: 2px; cursor: pointer; transition: background .15s; }
.ins-nav__actions button:hover { background: #eef2f5; }
.ins-nav__actions svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Light/dark theme toggle — landing only, laptop/desktop (hidden on phone). */
.ins-nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #d7dee3; border-radius: 2px; background: transparent; color: #051c2c; cursor: pointer; transition: border-color .18s, color .18s; }
.ins-nav__theme:hover { border-color: #6321a9; color: #6321a9; }
.ins-nav__theme svg { width: 17px; height: 17px; }
.ins-nav__theme .ic-moon { display: none; }
html[data-theme="dark"] .ins-nav__theme .ic-sun { display: none; }
html[data-theme="dark"] .ins-nav__theme .ic-moon { display: block; }
@media (max-width: 680px) { .ins-nav__theme { display: none; } }
.ins-nav__actions button.is-saved { color: #2251ff; }
.ins-nav__burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #d7dee3; border-radius: 2px; background: transparent; color: #051c2c; cursor: pointer; flex: none; }
.ins-nav__burger:hover { background: #eef2f5; border-color: #00a9f4; }
.ins-nav__burger svg { width: 18px; height: 18px; }
.ins-nav__burger .ic-close { display: none; }
/* scrolled state: swap links -> title + actions */
.ins-nav.is-scrolled .ins-nav__links, .ins-nav.is-scrolled .ins-nav__demo { display: none; }
.ins-nav.is-scrolled .ins-nav__title { display: block; }
.ins-nav.is-scrolled .ins-nav__actions { display: flex; }
/* reading progress, flush to the nav bottom */
.ins-nav__progress { height: 3px; width: 100%; background: #eef2f5; overflow: hidden; }
.ins-nav__progress-fill { height: 100%; background: #00a9f4; transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
/* mobile overlay nav */
.ins-mnav { position: fixed; inset: 0; z-index: 900; background: #fff; display: flex; flex-direction: column; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity .24s ease, transform .24s ease, visibility .24s; }
.ins-mnav.is-open { transform: none; opacity: 1; visibility: visible; }
.ins-mnav__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; border-bottom: 1px solid #d7dee3; flex: none; }
.ins-mnav__links { display: flex; flex-direction: column; padding: 6px 22px; overflow-y: auto; }
.ins-mnav__links a { font-family: "Spectral", Georgia, serif; font-size: 20px; color: #051c2c; padding: 15px 4px; border-bottom: 1px solid #d7dee3; text-decoration: none; }
.ins-mnav__links a:hover { color: #00a9f4; }
.ins-mnav__contents { padding: 4px 22px 0; }
.ins-mnav__contents:empty { display: none; }
.ins-mnav__foot { margin-top: auto; display: flex; align-items: center; gap: 14px; padding: 20px 22px; }
.ins-mnav__foot .ins-nav__btn { flex: 1; justify-content: center; padding: 15px 22px; }
body.ins-nav-locked { overflow: hidden; }
@media (max-width: 1024px) {
    /* Tablet & phone: the bar reduces to logo + hamburger; links AND the CTA fold
       into the drawer (which carries "Book a demo" in its foot). Progress bar and
       the scrolled title/actions stay. */
    .ins-nav__links, .ins-nav__demo { display: none; }
    .ins-nav__burger { display: inline-flex; }
}
@media (max-width: 680px) {
    .ins-nav__wrap { padding: 0 20px; height: 58px; }
    .ins-nav__logo { height: 26px; }
    .ins-nav__actions button .lbl { display: none; }
    .ins-nav__actions button { padding: 8px; }
}

/* ============================================================================
   Article reader chrome (injected by insights-reader.js on the public article)
   Sticky title/progress/actions bar · 3-column layout with auto TOC + case rails
   · Request-Access popup. All content-driven, so authored and imported articles
   get the same reading experience.
   ============================================================================ */

/* Save / reading-list toast. */
.ins-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: #051c2c; color: #fff; font: 500 13px/1.3 Inter, Roboto, system-ui, sans-serif; padding: 11px 18px; border-radius: 4px; box-shadow: 0 10px 30px rgba(5,28,44,.28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 300; }
.ins-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* -- 3-column layout ------------------------------------------------------ */
/* The centre column is held to a reading measure (not stretched to 1fr) so the
   hero + prose stay a comfortable width and the rails sit close beside them; the
   whole grid is centred, with the rails balancing the reading column. */
.insights-article.has-rails { max-width: 1180px; }
.insights-article--import.has-rails { max-width: 1360px; padding: 0 24px 60px; }
.ins-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px 44px; align-items: start; justify-content: center; }
.insights-article.has-rails.has-toc .ins-layout { grid-template-columns: 200px minmax(0,700px); }
.insights-article.has-rails.has-cases .ins-layout { grid-template-columns: minmax(0,700px) 228px; }
.insights-article.has-rails.has-toc.has-cases .ins-layout { grid-template-columns: 200px minmax(0,700px) 228px; }
/* An injected-rail import keeps a wider reading column for its own wide blocks. */
.insights-article--import.has-rails.has-toc .ins-layout { grid-template-columns: 200px minmax(0,900px); }
.insights-article--import.has-rails.has-toc.has-cases .ins-layout { grid-template-columns: 200px minmax(0,860px) 228px; }
.ins-layout__main { min-width: 0; }
/* In the rail layout the reading column already provides the measure, so let the
   prose fill it — hero and body then share one left edge (no 10px drift). */
.insights-article.has-rails .ins-layout__main .page-shell .article { max-width: none; margin-left: 0; margin-right: 0; }

/* -- DEFINE-injected rails (plain builder articles) ----------------------- */
.ins-rail { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; font-family: Inter, Roboto, system-ui, sans-serif; padding: 8px 0 12px; }
.ins-rail::-webkit-scrollbar { width: 6px; }
.ins-rail::-webkit-scrollbar-thumb { background: rgba(107,63,229,.18); border-radius: 3px; }
.ins-rail__head { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ins-ink-muted, #5B5C70); padding: 0 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--ins-border, rgba(107,63,229,.14)); }
.ins-rail__head.is-accent { color: #5827C7; }
.ins-rail ol { list-style: none; margin: 0; padding: 0; }
.ins-rail li { margin: 0; }
.ins-rail a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0 7px 12px; border-left: 2px solid transparent; color: var(--ins-ink-muted, #5B5C70); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.ins-rail a .ins-k { font-size: 11px; font-weight: 700; color: #B7A9E8; flex: none; min-width: 18px; font-variant-numeric: tabular-nums; }
.ins-rail a:hover { color: var(--ins-ink, #1A1B3A); }
.ins-rail a.active { color: #5827C7; border-left-color: #6B3FE5; font-weight: 600; }
.ins-rail a.active .ins-k { color: #6B3FE5; }
.ins-rail--cases a .ins-k { color: #59C3D6; }
.ins-rail--cases a.active { color: #0E7C90; border-left-color: #16A6BE; }

/* Low-specificity defaults for author-supplied rails that DEFINE only populates
   (a faithful import / schema HTML) — the document's own CSS, being scoped and
   more specific, wins wherever it styles these. */
.ins-rail-list { list-style: none; margin: 0; padding: 0; }
.ins-rail-list a { text-decoration: none; display: flex; gap: 8px; }
.ins-rail-list a .ins-k { flex: none; opacity: .6; font-variant-numeric: tabular-nums; }
.ins-rail-list a.active, .ins-rail-list a.spied, .ins-rail-list a[aria-current] { font-weight: 700; }

/* Active/spied case card gets a subtle highlight while it is the reading region. */
.page-shell .case.ins-spied, .ins-import .case.ins-spied { box-shadow: 0 0 0 2px rgba(91,227,255,.5); }

@media (max-width: 1100px) {
    /* Builder (DEFINE-styled) articles collapse to a single reading column. */
    .insights-article.has-rails { max-width: 860px; padding: 8px 20px 60px; }
    /* Imports stay edge-to-edge once their rails collapse — the document's own
       .wrap / @media then govern the inner measure, so blocks render full width
       on tablet & phone (not squeezed into an 860px column). */
    .insights-article--import.has-rails { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 0 48px; }
    .ins-layout, .insights-article.has-rails.has-toc .ins-layout, .insights-article.has-rails.has-cases .ins-layout, .insights-article.has-rails.has-toc.has-cases .ins-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
    .ins-rail { display: none; }
}

/* -- Request-Access popup ------------------------------------------------- */
.ins-request { position: fixed; inset: 0; z-index: 400; display: none; }
.ins-request.is-open { display: block; }
.ins-request__backdrop { position: absolute; inset: 0; background: rgba(15,16,41,.55); }
.ins-request__panel { position: relative; z-index: 1; width: min(460px, calc(100% - 32px)); margin: 8vh auto 0; background: #fff; border-radius: 18px; padding: 34px 32px 30px; box-shadow: 0 30px 80px rgba(15,16,41,.4); font-family: Roboto, system-ui, sans-serif; animation: insReqIn .22s ease; }
@keyframes insReqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.ins-request__x { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ins-ink-muted, #5B5C70); cursor: pointer; border-radius: 8px; }
.ins-request__x:hover { background: #F4F2FB; color: #1A1B3A; }
.ins-request__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #6B3FE5; margin: 0 0 8px; }
.ins-request__title { font-family: Georgia, serif; font-size: 26px; font-weight: 700; letter-spacing: -.4px; color: var(--ins-ink, #1A1B3A); margin: 0 0 8px; }
.ins-request__lede { font-size: 14px; line-height: 1.55; color: var(--ins-ink-muted, #5B5C70); margin: 0 0 20px; }
.ins-request__form { display: flex; flex-direction: column; gap: 12px; }
.ins-request__form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ins-ink, #1A1B3A); }
.ins-request__form input[type=email], .ins-request__form input[type=text] { height: 42px; padding: 0 13px; border: 1px solid var(--ins-border, rgba(107,63,229,.24)); border-radius: 10px; font-size: 14px; font-weight: 400; color: #1A1B3A; }
.ins-request__form input:focus { outline: none; border-color: #6B3FE5; box-shadow: 0 0 0 3px rgba(107,63,229,.14); }
.ins-request__consent { flex-direction: row !important; align-items: flex-start; gap: 9px !important; font-weight: 400 !important; font-size: 12.5px !important; color: var(--ins-ink-muted, #5B5C70) !important; line-height: 1.4; margin-top: 2px; }
.ins-request__consent input { margin-top: 2px; }
.ins-request__submit { height: 46px; margin-top: 6px; border: 0; border-radius: 10px; background: #6B3FE5; color: #fff; font: 600 14px/1 Roboto, system-ui, sans-serif; cursor: pointer; transition: background .15s; }
.ins-request__submit:hover { background: #5827C7; }
.ins-request__submit:disabled { opacity: .6; cursor: default; }
.ins-request__msg { font-size: 13px; margin: 4px 0 0; min-height: 16px; }
.ins-request__msg.is-ok { color: #12805C; }
.ins-request__msg.is-err { color: #C0392B; }

/* Print: hide the reader chrome so the article itself prints clean. */
@media print { .ins-nav, .ins-mnav, .ins-rail, .ins-request, .ins-toast { display: none !important; } .ins-layout { display: block !important; } }

/* -- default article footer ---------------------------------------------- */
.ins-article-footer { margin-top: 72px; border-top: 1px solid var(--ins-border, rgba(107,63,229,.16)); font-family: Roboto, system-ui, sans-serif; }
/* CTA band */
.ins-article-footer__cta { max-width: 1040px; margin: 40px auto 0; padding: 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; background: #0F1029; background-image: radial-gradient(circle at 88% 15%, rgba(107,63,229,.4), transparent 55%); border-radius: 18px; color: #fff; }
.ins-article-footer__cta-copy { flex: 1 1 320px; }
.ins-article-footer__cta-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #5BE3FF; margin: 0 0 8px; }
.ins-article-footer__cta-title { font-family: Georgia, serif; font-size: 24px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 8px; line-height: 1.2; }
.ins-article-footer__cta-lede { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0; max-width: 46ch; }
.ins-article-footer__cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.ins-article-footer__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.32); color: #fff; transition: background .15s, border-color .15s; white-space: nowrap; }
.ins-article-footer__btn:hover { background: rgba(255,255,255,.12); }
.ins-article-footer__btn--primary { background: #6B3FE5; border-color: #6B3FE5; }
.ins-article-footer__btn--primary:hover { background: #5827C7; }
/* author + share row */
.ins-article-footer__meta { max-width: 1040px; margin: 0 auto; padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ins-article-footer__author { display: flex; align-items: center; gap: 14px; }
.ins-article-footer__avatar { width: 44px; height: 44px; border-radius: 50%; background: #6B3FE5; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.ins-article-footer__by { margin: 0; font-size: 15px; color: var(--ins-ink, #1A1B3A); }
.ins-article-footer__by strong { font-weight: 700; }
.ins-article-footer__date { margin: 3px 0 0; font-size: 13px; color: var(--ins-ink-muted, #5B5C70); }
.ins-article-footer__share { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ins-ink-muted, #5B5C70); }
.ins-article-footer__share button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ins-border, rgba(107,63,229,.2)); border-radius: 10px; background: #fff; color: var(--ins-ink, #1A1B3A); cursor: pointer; transition: border-color .15s, background .15s; }
.ins-article-footer__share button:hover { border-color: #6B3FE5; background: #F4F2FB; }
.ins-article-footer__share svg { width: 17px; height: 17px; }
/* brand strip */
.ins-article-footer__brand { max-width: 1040px; margin: 0 auto; padding: 22px 36px 44px; border-top: 1px solid var(--ins-border, rgba(107,63,229,.14)); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.ins-article-footer__logo { height: 26px; width: auto; flex: none; }
/* Coloured mark on the light footer, white mark when the article is in dark theme. */
.ins-article-footer__logo--white { display: none; }
html[data-theme="dark"] .ins-article-footer__logo--color { display: none; }
html[data-theme="dark"] .ins-article-footer__logo--white { display: inline-block; }
.ins-article-footer__brand p { margin: 0; flex: 1 1 260px; color: var(--ins-ink-muted, #5B5C70); }
.ins-article-footer__brand a { color: #6B3FE5; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ins-article-footer__brand a:hover { color: #5827C7; }
@media (max-width: 700px) {
    .ins-article-footer__cta { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
    .ins-article-footer__cta, .ins-article-footer__meta, .ins-article-footer__brand { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================================
   Responsive reading experience (tablet ≤1024, phone ≤640).
   Tablet & down: the left TOC and right case rails collapse — open them on tap
   via the article-bar ☰ (which reveals the contents drawer) — and the body goes
   single-column, full-width. Phone: a light DEFINE nav (logo + hamburger), a slim
   article bar, and edge gutters so body blocks (text / media) span the screen.
   Applies to DEFINE-injected rails AND an imported document's own rails/layout.
   ============================================================================ */

/* -- rails collapse into the contents drawer (tablet & down) --------------- */
@media (max-width: 1024px) {
    .insights-article .ins-rail { display: none; }
    .insights-article.has-rails .ins-layout,
    .insights-article.has-rails.has-toc .ins-layout,
    .insights-article.has-rails.has-cases .ins-layout,
    .insights-article.has-rails.has-toc.has-cases .ins-layout { grid-template-columns: minmax(0, 1fr); }
    /* an imported document's own rails + its multi-column grid */
    .ins-import .toc-left, .ins-import .cases-right, .ins-import .rail,
    .ins-import [data-ins-toc-rail], .ins-import [data-ins-cases-rail] { display: none !important; }
    .ins-import .layout, .ins-import .layout-3, .ins-import .three-col { grid-template-columns: minmax(0, 1fr) !important; }
}

/* -- full-width body on phone (DEFINE-styled, non-import articles only) ------
   An imported document keeps its OWN responsive CSS (gutters, stacking), so we
   never force widths on .ins-import — it's already full-bleed above. -------- */
@media (max-width: 640px) {
    .define-insights.is-article:not(:has(.ins-import)) { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
    .insights-article:not(.insights-article--import), .insights-article.has-rails:not(.insights-article--import) { max-width: none; padding: 8px 0 48px; }
    .insights-article:not(.insights-article--import) .ins-back { margin-left: 16px; }
    .insights-article:not(.insights-article--import) .page-shell .article { max-width: none; margin-left: 0; margin-right: 0; }
}