/* ============================================================================
   DEFINE · Insights — the article design system ("standard rules as default").

   Every saved blog is class-based markup inside .page-shell (.hero, .article,
   .exhibit, .key-findings, …) with no embedded CSS of its own. This stylesheet
   supplies the section sizing + typography for those classes, so authored AND
   imported articles render consistently — on the public page and in the editor.

   Everything is scoped under .page-shell so it can never touch the site nav.
   Bare elements (h2/p/ul/blockquote/figure/table) are also styled, so a plain
   import (e.g. a Word doc with no DEFINE classes) still reads well.

   Column model: .page-shell centres a readable measure; wide blocks (.exhibit,
   .btn-panel, hero) may go full-width of the shell, prose stays narrower.
   ============================================================================ */

.page-shell {
    --c-ink: #1A1B3A;
    --c-ink-muted: #5B5C70;
    --c-primary: #6B3FE5;
    --c-primary-deep: #5827C7;
    --c-alert: #E8743C;
    --c-cyan: #5BE3FF;
    --c-hero-dark: #0F1029;
    --c-lavender: #F4F2FB;
    --c-sidebar: #F4F4F8;
    --c-rule: #E5E5EC;

    /* Centralised style rules (settings key "rules"). The public page and the
       editor override these on .page-shell to restyle every article at once; the
       editor also reads them to threshold its deviation flags. Defaults here
       mirror settingsService.DEFAULT_RULES. */
    /* Defaults match the DEFINE Insights reference design: Spectral for editorial
       headings/titles, Inter for body + small labels. (Body 14px per house style —
       smaller than the reference's 18px prose, by request.) */
    --r-font-display: "Inter";
    --r-font-body: "Inter";
    --r-font-serif: "Spectral";
    /* Heading face — the "serif|display" rule resolves to one of the two above.
       Default serif (Spectral), matching the reference's editorial headings. */
    --r-font-heading: var(--r-font-serif);
    --r-prose: 680px;
    --r-wide: 960px;
    --r-shell: 1040px;
    --r-body-size: 14px;
    --r-body-lh: 1.6;
    --r-h2-size: clamp(26px, 3.2vw, 34px);
    --r-gap: 48px;

    --ff-display: var(--r-font-display), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-body: var(--r-font-body), system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ff-serif: var(--r-font-serif), Georgia, serif;
    /* Major editorial headings (hero, section H2, exhibit/pullquote) use this;
       small labels/eyebrows/numbers stay on the display face. */
    --ff-heading: var(--r-font-heading), Georgia, serif;

    max-width: var(--r-shell);
    margin: 0 auto;
    font-family: var(--ff-body);
    color: var(--c-ink);
    line-height: 1.6;
}

.page-shell * { box-sizing: border-box; }

/* An inner content-width wrapper some articles use. */
.page-shell .shell { max-width: 1040px; margin: 0 auto; padding: 0 4px; }

/* ------------------------------------------------------------------ hero */
.page-shell .hero {
    background: var(--c-hero-dark);
    background-image:
        radial-gradient(circle at 78% 42%, rgba(107, 63, 229, .45) 0%, rgba(107, 63, 229, .18) 30%, transparent 70%),
        radial-gradient(circle at 22% 78%, rgba(91, 227, 255, .18) 0%, transparent 60%);
    color: #fff;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 56px);
    border-radius: 16px;
    margin: 0 0 8px;
    overflow: hidden;
}

.page-shell .hero__category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 500;
    color: var(--c-cyan);
    margin-bottom: clamp(14px, 2vw, 24px);
}
.page-shell .hero__category::before { content: ''; width: 24px; height: 1px; background: var(--c-cyan); }

.page-shell .hero__title {
    font-family: var(--ff-heading);
    font-weight: 500;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.03;
    letter-spacing: -.015em;
    margin: 0 0 clamp(16px, 2.4vw, 24px);
    color: #fff;
}

.page-shell .hero__subtitle {
    font-family: var(--ff-body);
    font-style: normal;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    color: var(--c-cyan);
    max-width: 780px;
    margin: 0;
    font-weight: 400;
}

/* ------------------------------------------------------------- meta bar */
.page-shell .meta-bar {
    margin: 24px 0 0;
    padding: 18px 4px;
    border-bottom: 1px solid var(--c-rule);
    display: flex;
    gap: 16px 24px;
    align-items: center;
    font-size: 13px;
    color: var(--c-ink-muted);
    flex-wrap: wrap;
}
.page-shell .meta-bar__author { display: flex; align-items: center; gap: 12px; }
.page-shell .meta-bar__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-primary); color: #fff;
    display: grid; place-items: center;
    font-family: var(--ff-display); font-weight: 700; font-size: 15px;
}
.page-shell .meta-bar__name { color: var(--c-ink); font-weight: 500; font-size: 14px; }
.page-shell .meta-bar__sub { font-size: 13px; color: var(--c-ink-muted); }

/* -------------------------------------------------------- key findings */
.page-shell .key-findings { background: var(--c-lavender); border-radius: 16px; padding: clamp(28px, 3vw, 40px) clamp(22px, 3vw, 36px); margin: var(--r-gap) 0; }
.page-shell .key-findings__eyebrow { font-size: 11px; color: var(--c-primary-deep); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.page-shell .key-findings__title { font-family: var(--ff-heading); font-weight: 700; font-size: 28px; margin: 0; color: var(--c-ink); letter-spacing: -.5px; }
.page-shell .key-findings ol { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: kf; }
.page-shell .key-findings li { counter-increment: kf; padding: 16px 0 16px 56px; border-top: 1px solid rgba(107, 63, 229, .15); position: relative; font-size: 15px; line-height: 1.6; color: var(--c-ink); }
.page-shell .key-findings li::before { content: counter(kf, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--ff-display); font-weight: 700; font-size: 22px; color: var(--c-primary); letter-spacing: -.5px; }

/* --------------------------------------------------------- stat panel */
.page-shell .btn-panel { background: var(--c-hero-dark); background-image: radial-gradient(circle at 80% 40%, rgba(107, 63, 229, .30) 0%, transparent 60%); border-radius: 16px; padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 36px); margin: var(--r-gap) 0; color: #fff; }
.page-shell .btn-panel__eyebrow { font-size: 11px; color: var(--c-cyan); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.page-shell .btn-panel__title { font-family: var(--ff-display); font-weight: 700; font-size: 24px; margin: 0 0 20px; letter-spacing: -.3px; }
.page-shell .btn-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 24px; }
.page-shell .btn-panel__stat { border-left: 2px solid var(--c-primary); padding-left: 14px; }
.page-shell .btn-panel__num { font-family: var(--ff-display); font-weight: 700; font-size: 30px; color: #fff; letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
.page-shell .btn-panel__lbl { font-size: 11px; color: rgba(255, 255, 255, .7); line-height: 1.4; }
.page-shell .btn-panel sup.fn a { color: var(--c-cyan); }

/* ----------------------------------------------------------- article */
.page-shell .article { font-family: var(--ff-body); font-size: var(--r-body-size); line-height: var(--r-body-lh); color: var(--c-ink); margin: var(--r-gap) auto; max-width: var(--r-prose); }
.page-shell .article p { margin: 0 0 24px; }
.page-shell .article h2 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--r-h2-size); line-height: 1.1; margin: var(--r-gap) 0 20px; color: var(--c-ink); letter-spacing: -.5px; border-top: 1px solid var(--c-rule); padding-top: 36px; }
.page-shell .article h2::before { content: ''; display: block; width: 48px; height: 3px; background: var(--c-primary); margin-bottom: 16px; }
.page-shell .article a { color: var(--c-primary-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page-shell .article strong { font-weight: 600; color: var(--c-ink); }

.page-shell sup.fn { font-size: 11px; color: var(--c-primary); font-weight: 600; margin-left: 1px; font-family: var(--ff-body); line-height: 0; }
.page-shell sup.fn a { text-decoration: none; color: inherit; padding: 0 1px; }
.page-shell sup.fn a:hover { text-decoration: underline; }

/* --------------------------------------------------------- pullquote */
.page-shell .pullquote { font-family: var(--ff-heading); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; color: var(--c-ink); padding: 32px 0 32px 28px; border-left: 3px solid var(--c-primary); margin: var(--r-gap) auto; letter-spacing: -.3px; font-style: normal; max-width: var(--r-prose); }

/* ---------------------------------------------------------- exhibit */
.page-shell .exhibit { margin: 44px auto; padding: clamp(20px, 3vw, 32px); background: #fff; border: 1px solid var(--c-rule); border-radius: 12px; max-width: var(--r-wide); }
.page-shell .exhibit__eyebrow { font-size: 11px; color: var(--c-primary-deep); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.page-shell .exhibit__title { font-family: var(--ff-heading); font-weight: 700; font-size: 22px; margin: 0 0 8px; color: var(--c-ink); letter-spacing: -.3px; }
.page-shell .exhibit__caption { font-size: 13px; line-height: 1.55; color: var(--c-ink-muted); margin: 16px 0 0; font-style: normal; }
.page-shell .exhibit svg { display: block; width: 100%; height: auto; margin-top: 8px; }

/* ------------------------------------------------------- methodology */
.page-shell .methodology { background: var(--c-sidebar); border-radius: 12px; padding: 28px 32px; margin: var(--r-gap) auto 32px; max-width: var(--r-prose); }
.page-shell .methodology h3 { font-family: var(--ff-display); font-weight: 700; font-size: 20px; margin: 0 0 12px; color: var(--c-ink); }
.page-shell .methodology p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; color: var(--c-ink-muted); }
.page-shell .methodology p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- author card */
.page-shell .author-card { background: var(--c-lavender); border-radius: 16px; padding: 28px 32px; margin: 32px auto; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; max-width: var(--r-prose); }
.page-shell .author-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; font-size: 28px; }
.page-shell .author-card__head h3 { font-family: var(--ff-display); font-weight: 700; font-size: 22px; margin: 0 0 4px; color: var(--c-ink); }
.page-shell .author-card__head p { font-size: 14px; color: var(--c-ink-muted); margin: 0 0 12px; }
.page-shell .author-card__body { font-size: 14px; line-height: 1.55; color: var(--c-ink-muted); }

/* --------------------------------------------------------- footnotes */
.page-shell .footnotes { border-top: 2px solid var(--c-rule); padding-top: 32px; margin: 44px auto; max-width: 860px; }
.page-shell .footnotes h3 { font-family: var(--ff-display); font-weight: 700; font-size: 24px; margin: 0 0 12px; color: var(--c-ink); }
.page-shell .footnotes__note { font-size: 13px; color: var(--c-ink); margin: 0 0 28px; padding: 14px 18px; background: var(--c-sidebar); border-radius: 8px; border-left: 3px solid var(--c-alert); line-height: 1.55; }
.page-shell .footnotes__note strong { color: var(--c-alert); font-weight: 600; }
.page-shell .footnotes ol { counter-reset: fn; list-style: none; padding: 0; margin: 0; }
.page-shell .footnotes li { counter-increment: fn; font-size: 13px; line-height: 1.6; color: var(--c-ink); padding: 18px 0 18px 38px; position: relative; border-bottom: 1px solid var(--c-rule); }
.page-shell .footnotes li:last-child { border-bottom: none; }
.page-shell .footnotes li::before { content: counter(fn); position: absolute; left: 0; top: 19px; font-family: var(--ff-display); font-weight: 700; color: var(--c-primary); font-size: 14px; width: 26px; text-align: right; }
.page-shell .footnotes li strong.fn-title { display: block; color: var(--c-ink); font-weight: 600; margin-bottom: 2px; font-size: 14px; line-height: 1.35; }
.page-shell .footnotes li .fn-meta { color: var(--c-ink-muted); display: block; margin-top: 2px; font-size: 12.5px; }
.page-shell .footnotes li .fn-data { display: block; margin-top: 8px; font-size: 13px; line-height: 1.55; }
.page-shell .footnotes li .fn-find { display: block; margin-top: 8px; padding: 8px 12px; background: var(--c-sidebar); border-radius: 4px; font-size: 12.5px; color: var(--c-ink); line-height: 1.55; border-left: 2px solid var(--c-primary); }
.page-shell .footnotes li .fn-find strong { font-weight: 600; color: var(--c-primary-deep); margin-right: 6px; }
.page-shell .footnotes a { color: var(--c-primary-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.page-shell .verify-flag { display: inline-block; font-size: 10px; color: #fff; background: var(--c-alert); font-weight: 600; padding: 2px 7px; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: .4px; vertical-align: middle; }

/* ------------------------------------------------- bare-element defaults
   For plain imports (Word/HTML with no DEFINE classes). Kept modest so they
   never override the component classes above. */
.page-shell > h1:first-child,
.page-shell > h2:first-child { font-family: var(--ff-heading); font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -1px; margin: 0 0 20px; }
.page-shell :where(h2, h3, h4):not([class]) { font-family: var(--ff-heading); font-weight: 700; letter-spacing: -.3px; line-height: 1.15; color: var(--c-ink); }
.page-shell :where(h2):not([class]) { font-size: clamp(24px, 3.2vw, 30px); margin: 40px 0 16px; }
.page-shell :where(h3):not([class]) { font-size: 22px; margin: 32px 0 12px; }
.page-shell :where(p, ul, ol):not([class]) { max-width: var(--r-prose); margin-left: auto; margin-right: auto; }
.page-shell :where(p):not([class]) { margin-top: 0; margin-bottom: 20px; font-size: var(--r-body-size); line-height: var(--r-body-lh); }
.page-shell :where(ul, ol):not([class]) { margin-bottom: 20px; padding-left: 24px; line-height: 1.7; }
.page-shell :where(li):not([class]) { margin-bottom: 8px; }
.page-shell :where(blockquote):not([class]) { max-width: 760px; margin: 32px auto; padding: 8px 0 8px 24px; border-left: 3px solid var(--c-primary); font-family: var(--ff-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; }
.page-shell :where(img):not([class]) { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 24px auto; }
.page-shell :where(figure):not([class]) { margin: var(--r-gap) auto; max-width: var(--r-wide); }
.page-shell :where(table):not([class]) { width: 100%; max-width: var(--r-wide); margin: 28px auto; border-collapse: collapse; font-size: 14px; }
.page-shell :where(table):not([class]) :where(th, td) { border: 1px solid var(--c-rule); padding: 10px 12px; text-align: left; }
.page-shell :where(a):not([class]) { color: var(--c-primary-deep); }

/* =====================================================================
   Editorial components modelled on the long-form reference template
   (eyebrow, drop cap, byline + share, exhibit source, callout /
   "at a glance", author bios, divider) — brand-skinned to DEFINE.
   ===================================================================== */

/* Eyebrow / kicker — a small label above a section heading */
.page-shell .eyebrow,
.page-shell .kicker {
    font-family: var(--ff-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin: 0 auto 10px;
    max-width: var(--r-prose);
}

/* Drop cap on the opening paragraph */
.page-shell .dropcap::first-letter,
.page-shell .article--dropcap > p:first-of-type::first-letter {
    font-family: var(--ff-heading);
    font-weight: 700;
    float: left;
    font-size: 4.2em;
    line-height: .8;
    padding: 6px 12px 0 0;
    color: var(--c-ink);
}

/* Byline + share bar */
.page-shell .byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: var(--r-prose);
    margin: 28px auto;
    padding: 16px 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
}
.page-shell .byline__authors { font-size: 14px; color: var(--c-ink); line-height: 1.5; }
.page-shell .byline__authors b { font-weight: 600; }
.page-shell .byline__meta { color: var(--c-ink-muted); font-size: 13px; }
.page-shell .byline__share { display: flex; gap: 10px; }
.page-shell .byline__share a,
.page-shell .byline__share button {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--c-rule); background: #fff;
    display: grid; place-items: center;
    color: var(--c-ink-muted); cursor: pointer; text-decoration: none; padding: 0;
}
.page-shell .byline__share a:hover,
.page-shell .byline__share button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-shell .byline__share svg { width: 16px; height: 16px; }

/* Exhibit source line (below the caption) */
.page-shell .exhibit__source { font-size: 11.5px; color: var(--c-ink-muted); margin-top: 10px; font-style: normal; }

/* Callout / "At a glance" summary box */
.page-shell .callout,
.page-shell .at-a-glance {
    max-width: var(--r-prose);
    margin: var(--r-gap) auto;
    padding: 24px 28px;
    background: var(--c-lavender);
    border-radius: 12px;
    border-left: 3px solid var(--c-primary);
}
.page-shell .callout__title,
.page-shell .at-a-glance__title {
    font-family: var(--ff-body);
    font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--c-primary-deep); margin: 0 0 10px;
}
.page-shell .at-a-glance ul { margin: 0; padding-left: 20px; }
.page-shell .at-a-glance li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; }
.page-shell .callout p:last-child { margin-bottom: 0; }

/* Author bio cards (multiple authors) */
.page-shell .author-bios { max-width: var(--r-prose); margin: var(--r-gap) auto; border-top: 1px solid var(--c-rule); padding-top: 24px; }
.page-shell .author-bios__title { font-family: var(--ff-body); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-ink-muted); margin: 0 0 16px; }
.page-shell .author-bio { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.page-shell .author-bio__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700; font-size: 20px; flex: none; }
.page-shell .author-bio__name { font-weight: 600; font-size: 15px; color: var(--c-ink); }
.page-shell .author-bio__role { font-size: 13px; color: var(--c-ink-muted); margin-top: 2px; line-height: 1.5; }

/* Section divider between major parts */
.page-shell .section-divider { max-width: var(--r-prose); margin: var(--r-gap) auto; border: 0; border-top: 1px solid var(--c-rule); }

@media (max-width: 720px) {
    .page-shell .hero { padding: 32px 22px; }
    .page-shell .article { font-size: 16px; }
    .page-shell .btn-panel__grid { grid-template-columns: 1fr 1fr; }
    .page-shell .byline { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   Editorial building blocks — chapters, case cards, cross-references, CTA, refs.
   These carry the structure the reader chrome (insights-reader.js) maps into the
   TOC + case rails, and are what the builder's "Case study", "Cross-reference"
   and "Request access" inserts produce. Imported articles style these via their
   own scoped CSS; these are the DEFINE defaults for authored content.
   ============================================================================ */

/* Chapters just group content for the TOC; no heavy chrome of their own. */
.page-shell .chapter { scroll-margin-top: 150px; }
.page-shell .case, .page-shell [data-spy] { scroll-margin-top: 150px; }

/* Case study card */
.page-shell .case {
    background: var(--c-sidebar, #F4F4F8);
    border: 1px solid var(--c-rule, #E5E5EC);
    border-radius: 16px;
    padding: clamp(22px, 3vw, 30px);
    margin: var(--r-gap) 0;
    max-width: var(--r-wide);
}
.page-shell .case .pill {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c-primary-deep);
    background: #fff;
    border: 1px solid var(--c-rule);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 14px;
}
.page-shell .case h4 {
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.3px;
    margin: 0 0 10px;
    color: var(--c-ink);
}
.page-shell .case > p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--c-ink); }

/* Expand/collapse toggle + detail (driven by insights-reader.js) */
.page-shell .c-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary-deep);
    background: none;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    letter-spacing: .2px;
}
.page-shell .c-toggle::after { content: '＋'; font-size: 14px; line-height: 1; opacity: .7; }
.page-shell .c-toggle[aria-expanded="true"]::after { content: '－'; }
.page-shell .c-detail { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.page-shell .c-detail > :first-child { margin-top: 16px; }
.page-shell .c-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 4px 0 8px; }
.page-shell .c-split > div { border-left: 2px solid var(--c-primary); padding-left: 14px; }
.page-shell .c-split strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--c-primary-deep); margin-bottom: 6px; }
.page-shell .c-split p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--c-ink); }

/* Cross-reference "segue" — a link to another section, or another article. */
.page-shell .c-segue { margin: 14px 0 0; }
.page-shell .c-segue a, .page-shell a.ins-xref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary-deep);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 63, 229, .35);
    padding-bottom: 1px;
}
.page-shell .c-segue a:hover, .page-shell a.ins-xref:hover { border-bottom-color: var(--c-primary-deep); }

/* Inline call-out box used to link out to another callout/blog. */
.page-shell .ins-xref-box {
    display: block;
    border: 1px solid var(--c-rule);
    border-left: 3px solid var(--c-primary);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 28px 0;
    background: var(--c-lavender);
    text-decoration: none;
    color: var(--c-ink);
    max-width: var(--r-prose);
}
.page-shell .ins-xref-box:hover { border-color: var(--c-primary); }
.page-shell .ins-xref-box .ins-xref-box__k { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-primary-deep); }
.page-shell .ins-xref-box .ins-xref-box__t { display: block; font-family: var(--ff-heading); font-weight: 700; font-size: 18px; margin: 4px 0 2px; letter-spacing: -.2px; }
.page-shell .ins-xref-box .ins-xref-box__d { font-size: 14px; color: var(--c-ink-muted); }

/* Request-access trigger button (author-insertable). */
.page-shell a.ins-request-btn, .page-shell button.ins-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: 0;
    border-radius: 10px;
    padding: 12px 20px;
    text-decoration: none;
    cursor: pointer;
}
.page-shell a.ins-request-btn:hover, .page-shell button.ins-request-btn:hover { background: var(--c-primary-deep); }

/* CTA + references blocks (common editorial closers). */
.page-shell .cta { background: var(--c-hero-dark); color: #fff; border-radius: 16px; padding: clamp(26px, 3vw, 38px); margin: var(--r-gap) 0; max-width: var(--r-wide); }
.page-shell .cta h3 { font-family: var(--ff-heading); font-weight: 700; font-size: 24px; margin: 0 0 10px; }
.page-shell .cta p { margin: 0 0 18px; color: rgba(255,255,255,.8); }
.page-shell .refs { margin: var(--r-gap) auto 0; max-width: var(--r-prose); font-size: 13px; line-height: 1.6; color: var(--c-ink-muted); }
.page-shell .refs h3 { font-family: var(--ff-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-ink); margin: 0 0 12px; }
.page-shell .refs ol { padding-left: 20px; margin: 0; }
.page-shell .refs li { margin: 0 0 8px; }

@media (max-width: 640px) {
    .page-shell .c-split { grid-template-columns: 1fr; }
}

/* ============================================================================
   Imported (self-styled) articles — suppress the DEFINE base decorative layer.

   A .ins-import article ships its OWN complete CSS (emitted inline, scoped under
   .ins-import, and loaded AFTER this stylesheet so it wins on any tie). But the
   base design system above is keyed to class names the imported document reuses
   (.article h2, .hero__category, .article, …), so its decorative pseudo-elements
   and structural rules would leak on top of the document's own design. Neutralise
   them here at matching specificity: this wins over the base rules above, while the
   document's later inline rules still win wherever it defines one of these itself.
   ============================================================================ */
.ins-import .hero__category::before,
.ins-import .article h2::before,
.ins-import .article h2::after,
.ins-import .key-findings li::before,
.ins-import .footnotes li::before { content: none; }
.ins-import .article h2 { border-top: 0; padding-top: 0; }
.ins-import .article { max-width: none; margin: 0; }

/* Structural neutralisation: the base system rounds, clamps and pads these reused
   container classes (a beveled hero/CTA, a max-width band, extra hero padding). The
   document sets its own values with higher (doubled) specificity, so this only takes
   effect where the document leaves a property unset — i.e. exactly where DEFINE was
   leaking. Keeps imports pixel-faithful (full-bleed hero, square bands, etc.). */
.ins-import .hero, .ins-import .cta, .ins-import .callout, .ins-import .exhibit,
.ins-import .sidebar, .ins-import .case, .ins-import .btn-panel, .ins-import .key-findings,
.ins-import .pullquote, .ins-import .stats, .ins-import .two-col, .ins-import .refs,
.ins-import .article, .ins-import .article__body {
    border-radius: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* The base system also PADS these containers (e.g. .case gets 30px); the document
   pads its own inner elements instead, so double-padding shifts the text. Zero it —
   the document re-applies padding via its higher-specificity rules where it wants. */
.ins-import .hero, .ins-import .cta, .ins-import .callout, .ins-import .exhibit,
.ins-import .sidebar, .ins-import .case, .ins-import .btn-panel, .ins-import .key-findings,
.ins-import .pullquote { padding: 0; }

/* The base system forces `.article` to the serif face, so imported body/case text
   inherited Georgia instead of the document's own body font (e.g. Inter). Let it
   inherit from the document root; the document's own type rules still win. */
.ins-import .article, .ins-import .article__body { font-family: inherit; }
/* The base .c-toggle adds a "＋"/"－" pseudo-element; imported toggles carry their
   own chevron, so suppress the leaked mark. */
.ins-import .c-toggle::after,
.ins-import .c-toggle[aria-expanded="true"]::after { content: none; }
/* The base `.case .pill` gives the chip a border and a 14px bottom margin. The
   document's own eyebrow pill overrides colour/padding/radius (doubled specificity)
   but not margin/border, so those leak: inside the `.c-eyebrow` (align-items:center)
   flex row, the 14px bottom margin shifts the pill's centre ~7px above the sibling
   text, breaking the vertical alignment. Neutralise both — the row's `gap` handles
   spacing. Specificity ties the base rule and wins on source order. */
.ins-import .case .pill { margin: 0; border: 0; }

/* ============================================================================
   Public single-page view — render exactly like the editor.
   The published page also loads the define.global base stylesheets (bootstrap /
   reporting / define-main) which the editor does NOT; they push a 500 body weight
   onto everything. Pin article text to normal weight so the published page matches
   the editor. Also close the imported hero→stats gap and give the story / case
   rails a little breathing room above (they sat flush under the stats grid).
   ============================================================================ */
.page-shell { font-weight: 400; }
.insights-article--import .ins-import .hero { margin-bottom: 0; }
.insights-article--import .ins-import.ins-import .layout,
.insights-article--import .ins-import.ins-import .layout-3,
.insights-article--import .ins-import.ins-import .three-col { padding-top: 22px; }

/* ============================================================================
   Native support for author-contributed blocks (via SCHEMA CHANGE reports).
   These give a DEFINE-house rendering to builder-authored articles that use the
   classes. An imported article keeps its OWN CSS (scoped, higher specificity),
   so these never fight it — they only style articles that don't bring their own.
   ============================================================================ */

/* Hero stat strip — a full-width band of headline figures under the hero. */
.page-shell .stats { max-width: var(--r-shell); margin: 0 auto; padding: 0 4px; }
.page-shell .stats-inner { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-rule); }
.page-shell .stat { padding: 24px 20px 22px; border-right: 1px solid var(--c-rule); }
.page-shell .stat:last-child { border-right: 0; }
.page-shell .stat .fig { font-family: var(--ff-heading); font-weight: 600; font-size: clamp(24px, 3vw, 32px); color: var(--c-ink); line-height: 1; }
.page-shell .stat .fig .u { font-size: .55em; color: var(--c-primary); font-weight: 600; padding-left: 2px; }
.page-shell .stat .lbl { font-size: 12px; line-height: 1.4; color: var(--c-ink-muted); margin-top: 11px; }

/* Headline figure inside a .case hook. */
.page-shell .c-stat { display: flex; gap: 18px; align-items: flex-start; padding: 4px 0 8px; }
.page-shell .c-stat .fig { font-family: var(--ff-heading); font-weight: 600; font-size: 46px; line-height: 42px; color: var(--c-cyan); flex: 0 0 auto; }
.page-shell .c-stat .fig.sm { font-size: 30px; line-height: 42px; }
.page-shell .c-stat .cap { font-size: 14px; line-height: 21px; color: var(--c-ink-muted); }

/* Featured case — accent border, a "full case study" badge + primary link. */
.page-shell .case.featured { border-left-color: var(--c-primary); }
.page-shell .c-flag { display: inline-flex; align-items: center; gap: 6px; background: var(--c-primary); color: #fff; font: 700 10.5px var(--ff-body); letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; }
.page-shell .c-flag svg { width: 12px; height: 12px; }
.page-shell a.c-fullcs { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--ff-body); color: #fff; background: var(--c-primary); border-radius: 3px; padding: 9px 14px; text-decoration: none; }
.page-shell a.c-fullcs:hover { background: var(--c-primary-deep); }
.page-shell a.c-fullcs svg { width: 14px; height: 14px; }
.page-shell .c-foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--c-rule); }
.page-shell .c-src { font-size: 12.5px; color: var(--c-ink-muted); }

/* Dark narrative call-out box. */
.page-shell .callout { background: var(--c-hero-dark); color: #dbe4ea; border-radius: 14px; padding: clamp(28px, 3vw, 38px); margin: var(--r-gap) 0; max-width: var(--r-wide); }
.page-shell .callout .tag { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-cyan); margin-bottom: 14px; }
.page-shell .callout h3 { color: #fff; font-family: var(--ff-heading); font-weight: 600; font-size: 25px; margin: 0 0 16px; line-height: 1.18; }
.page-shell .callout p { color: #c2ced7; font-size: 16px; line-height: 1.58; margin: 0 0 16px; }
.page-shell .callout p:last-child { margin-bottom: 0; }

/* Exhibit payloads — flow diagram, comparison table, three-up plays. */
.page-shell .exhibit .pad { padding: 26px; }
.page-shell .flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.page-shell .flow .node { padding: 6px 4px; }
.page-shell .flow .cap { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-muted); margin-bottom: 10px; }
.page-shell .flow ul { margin: 0; padding: 0; list-style: none; }
.page-shell .flow li { font-size: 14px; line-height: 1.4; color: var(--c-ink); padding: 9px 0; border-top: 1px solid var(--c-rule); }
.page-shell .flow li:first-child { border-top: 0; }
.page-shell .flow .node.emph li { font-weight: 600; }
.page-shell .flow .arrow { display: flex; align-items: center; justify-content: center; padding: 0 12px; color: var(--c-cyan); }
.page-shell .flow .arrow svg { width: 24px; height: 24px; }
.page-shell table.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.page-shell .cmp th, .page-shell .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--c-rule); vertical-align: top; line-height: 1.42; }
.page-shell .cmp thead th { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink-muted); font-weight: 700; border-bottom: 2px solid var(--c-ink); }
.page-shell .cmp thead th:nth-child(3) { color: var(--c-primary); }
.page-shell .cmp tbody th { font-weight: 600; color: var(--c-ink); width: 26%; }
.page-shell .cmp td.next { background: #f3effe; }
.page-shell .plays { display: grid; grid-template-columns: repeat(3, 1fr); }
.page-shell .play { padding: 6px 22px 6px 0; border-right: 1px solid var(--c-rule); }
.page-shell .play:last-child { border-right: 0; padding-right: 0; }
.page-shell .play .pn { font-family: var(--ff-heading); font-weight: 600; font-size: 15px; color: var(--c-primary); }
.page-shell .play h4 { font-family: var(--ff-body); font-size: 16px; font-weight: 700; color: var(--c-ink); margin: 6px 0 11px; line-height: 1.25; }
.page-shell .play p { font-size: 14px; line-height: 1.5; color: var(--c-ink); margin: 0; }

@media (max-width: 900px) {
    .page-shell .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .page-shell .stat:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .page-shell .flow { grid-template-columns: 1fr; }
    .page-shell .flow .arrow { transform: rotate(90deg); padding: 12px 0; }
    .page-shell .plays { grid-template-columns: 1fr; }
    .page-shell .play { border-right: 0; border-bottom: 1px solid var(--c-rule); padding: 14px 0; }
    .page-shell .play:last-child { border-bottom: 0; }
}

/* Article pages get a clean white ground so the define-page lavender gradient
   never peeks below/around the content (e.g. the strip above the footer or the
   container gutters). The hero and content blocks paint their own backgrounds on
   top. :has() targets only articles, leaving the landing's own background intact. */
body.define-insights-page:has(main.is-article) { background: #fff !important; }
body.define-insights-page main.is-article { background: #fff; }

/* =============================================================================
   Imported-article MOBILE overrides.
   Imported documents ship their OWN responsive @media rules, scoped
   .ins-import.ins-import (higher specificity) and loaded AFTER this file — so to
   enforce consistent, legible mobile behaviour for the shared block types these
   overrides need matching specificity + !important. Doc phone breakpoint = 680px.
   ========================================================================== */
@media (max-width: 680px) {
    /* Hero: when the split hero stacks on mobile, the doc's wide 44px column gap
       (meant for the side-by-side desktop layout) leaves a big void between the
       copy and the graphic — tighten it. */
    .ins-import.ins-import .hero .wrap { gap: 20px !important; row-gap: 20px !important; }

    /* Case-study stat: stack the big figure ABOVE its caption, instead of a
       cramped number | narrow-column-of-text row. */
    .ins-import.ins-import .c-stat {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    .ins-import.ins-import .c-stat .cap {
        align-self: flex-start !important;
        text-align: left !important;
    }

    /* Exhibit tables keep their tabular FORM (like a figure/photo) and scroll
       sideways, rather than being reflowed into a one-column list. Undo the
       document's display:block / thead:none / td::before-label stacking, and let
       the figure scroll horizontally with the table holding a real min-width. */
    .ins-import.ins-import .exhibit {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        /* Scroll affordance (Lea Verou's scroll-shadow trick): a soft right-edge
           shadow shows while there is more table to the right and fades out once
           you reach the end — a faint, self-hiding "there's more →" hint. The white
           "cover" layers (background-attachment:local) scroll with the content and
           sit over the shadows at each end; the shadow layers (scroll) stay pinned
           to the container edges. A base #fff keeps the panel opaque. */
        background:
            linear-gradient(to right, #fff 32%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
            linear-gradient(to left, #fff 32%, rgba(255,255,255,0)) right center / 44px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(54,5,100,.16), rgba(54,5,100,0)) left center / 16px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(54,5,100,.16), rgba(54,5,100,0)) right center / 22px 100% no-repeat,
            #fff !important;
        background-attachment: local, local, scroll, scroll, local !important;
    }
    .ins-import.ins-import .exhibit table {
        display: table !important;
        table-layout: fixed !important;   /* planned columns, not content-driven */
        width: auto !important;
        min-width: 600px !important;
    }
    /* Plan the columns explicitly (table-layout:fixed reads the first row) so no
       single column hogs the width and columns 2-3 are legibly sized — the second
       column is already partly visible, hinting the sideways scroll. Sized for the
       common 3-col exhibit; extra columns just share the remainder. */
    .ins-import.ins-import .exhibit th:nth-child(1),
    .ins-import.ins-import .exhibit td:nth-child(1) { width: 30% !important; }
    .ins-import.ins-import .exhibit th:nth-child(2),
    .ins-import.ins-import .exhibit td:nth-child(2) { width: 38% !important; }
    .ins-import.ins-import .exhibit th:nth-child(3),
    .ins-import.ins-import .exhibit td:nth-child(3) { width: 32% !important; }
    .ins-import.ins-import .exhibit th, .ins-import.ins-import .exhibit td { white-space: normal !important; word-break: normal; overflow-wrap: break-word; }
    .ins-import.ins-import .exhibit thead { display: table-header-group !important; }
    .ins-import.ins-import .exhibit tbody { display: table-row-group !important; }
    .ins-import.ins-import .exhibit tr    { display: table-row !important; }
    .ins-import.ins-import .exhibit th,
    .ins-import.ins-import .exhibit td    { display: table-cell !important; }
    .ins-import.ins-import .exhibit td::before,
    .ins-import.ins-import .exhibit th::before { content: none !important; }
}