/* =========================================================================
   The Cybex Quarterly — Shared Stylesheet
   Retail AI & Analytics Insights
   -------------------------------------------------------------------------
   Optimized for 1600px viewport · Light editorial theme
   Load once on every page: <link rel="stylesheet" href="cybex-insights.css">
   ========================================================================= */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root {
    /* Ink (text) — cool slate scale for crisp contrast on white */
    --ink:          #0F172A;    /* Slate 900 — headlines, body */
    --ink-2:        #334155;    /* Slate 700 — secondary copy */
    --ink-3:        #64748B;    /* Slate 500 — meta, captions */
    --ink-4:        #94A3B8;    /* Slate 400 — disabled, tertiary */

    /* Paper (surfaces) — bright, clean whites */
    --paper:        #FFFFFF;    /* True white — page background */
    --paper-2:      #F8FAFC;    /* Slate 50 — raised cards */
    --paper-3:      #F1F5F9;    /* Slate 100 — shaded sections */
    --paper-tint:   #F5F9FF;    /* Very pale blue wash */

    /* Rules & dividers — cool neutrals */
    --rule:         #CBD5E1;    /* Slate 300 */
    --rule-soft:    #E2E8F0;    /* Slate 200 */
    --rule-faint:   #F1F5F9;    /* Slate 100 */

    /* Brand — Cybex blue, used prominently */
    --brand:        #0E7CFF;    /* Cybex Blue — links, accents */
    --brand-ink:    #0A56B8;    /* Deeper for hover */
    --brand-light:  #7AB9FF;    /* For gradients */
    --brand-wash:   rgba(14, 124, 255, 0.06);

    /* Signature — brightened claret */
    --signature:    #A32238;    /* Ruby claret — category tags, eyebrows */
    --signature-2:  #BA2C46;    /* Hover */
    --signature-wash: rgba(163, 34, 56, 0.05);

    /* Data colors */
    --data-pos:     #0E8A42;
    --data-neg:     #C54028;
    --data-caution: #B37C0C;

    /* Type scale (major third, 1.25) */
    --t-xs:   0.75rem;
    --t-sm:   0.875rem;
    --t-base: 1rem;
    --t-md:   1.125rem;
    --t-lg:   1.333rem;
    --t-xl:   1.777rem;
    --t-2xl:  2.369rem;
    --t-3xl:  3.157rem;
    --t-4xl:  4.209rem;
    --t-5xl:  5.61rem;

    /* Spacing (8pt base) */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
    --s-9: 96px; --s-10: 128px; --s-11: 160px;

    /* Radius — modest for editorial feel */
    --r-sm: 2px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Shadow — subtle on white */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-2: 0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-3: 0 12px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);

    /* Layout — optimized for 1600 */
    --shell:      1600px;
    --column:     78ch;
    --transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Very faint atmospheric tints */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 10% 5%, rgba(14, 124, 255, 0.025), transparent 40%),
        radial-gradient(circle at 95% 90%, rgba(163, 34, 56, 0.02), transparent 40%);
}

body > * { position: relative; z-index: 1; }

a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--brand-ink); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-feature-settings: "kern" 1, "liga" 1;
}

h1 { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); font-weight: 500; margin-top: var(--s-8); margin-bottom: var(--s-5); }
h3 { font-size: var(--t-xl); font-weight: 500; margin-top: var(--s-7); margin-bottom: var(--s-4); }
h4 { font-size: var(--t-lg); font-weight: 600; margin-top: var(--s-6); margin-bottom: var(--s-3); }
h5 { font-size: var(--t-md); font-weight: 600; }
h6 { font-size: var(--t-base); font-weight: 600; }

p { margin-bottom: var(--s-5); }

.lede {
    font-size: var(--t-lg);
    line-height: 1.6;
    color: var(--ink-2);
    font-weight: 300;
}

.lede::first-letter,
.drop-cap::first-letter {
    font-family: 'IBM Plex Serif', Georgia, serif;
    float: left;
    font-size: 5.2rem;
    line-height: 0.9;
    font-weight: 500;
    padding-right: 14px;
    padding-top: 8px;
    color: var(--signature);
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--signature);
    display: inline-block;
    margin-bottom: var(--s-4);
}

.eyebrow.subtle { color: var(--ink-3); }
.eyebrow.brand { color: var(--brand); }

.dek {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-2);
    margin-top: var(--s-4);
    max-width: 62ch;
}

.meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.meta .sep { color: var(--rule); padding: 0 var(--s-2); }
.meta strong { color: var(--ink); font-weight: 500; }

/* ---------- MASTHEAD ---------- */
.masthead {
    border-bottom: 1px solid var(--rule-soft);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.88);
}

.masthead-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: var(--s-4) var(--s-7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}

.masthead-brand {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
}
.masthead-brand:hover { color: var(--ink); }

.masthead-brand .mark {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--paper);
    background: var(--signature);
    padding: 5px 10px;
    border-radius: var(--r-sm);
}

.masthead-nav {
    display: flex;
    gap: var(--s-7);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

.masthead-nav a {
    color: var(--ink-2);
    padding: var(--s-3) 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.masthead-nav a:hover { color: var(--ink); border-bottom-color: var(--signature); }
.masthead-nav a.current { color: var(--ink); border-bottom-color: var(--signature); }

/* ---------- PAGE SHELL ---------- */
.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--s-7);
}

.shell-narrow {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--s-7);
}

/* ---------- INDEX HERO ---------- */
.index-hero {
    padding: var(--s-10) 0 var(--s-9);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    overflow: hidden;
}

.index-hero::before {
    content: "";
    position: absolute;
    right: -5%;
    top: 0;
    bottom: 0;
    width: 45%;
    background:
        radial-gradient(ellipse at top right, rgba(14, 124, 255, 0.08), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(163, 34, 56, 0.05), transparent 70%);
    pointer-events: none;
}

.index-hero .shell { position: relative; }

.index-hero h1 {
    font-size: var(--t-5xl);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 18ch;
}

.index-hero .dek {
    margin-top: var(--s-6);
    font-size: var(--t-xl);
    font-style: normal;
    font-weight: 300;
    color: var(--ink-2);
    max-width: 58ch;
    font-family: 'IBM Plex Sans', sans-serif;
}

/* ---------- FILTER BAR ---------- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--rule-soft);
    flex-wrap: wrap;
}

.filter-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-3);
    margin-right: var(--s-3);
}

.filter-chip {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-2);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper);
    transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ---------- FEATURED ARTICLE ---------- */
.featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
    padding: var(--s-9) 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: center;
}

.featured-body .eyebrow { color: var(--signature); }
.featured-body h2 {
    margin: var(--s-4) 0 0;
    font-size: var(--t-3xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 18ch;
}
.featured-body h2 a { color: var(--ink); }
.featured-body h2 a:hover { color: var(--brand); }

.featured-body .dek {
    font-style: normal;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--t-md);
    color: var(--ink-2);
    margin-top: var(--s-5);
    font-weight: 300;
    line-height: 1.7;
    max-width: 52ch;
}

.featured-body .meta { margin-top: var(--s-6); }

.featured-body .read-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-6);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--brand);
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--brand);
    transition: all var(--transition);
}

.featured-body .read-link:hover {
    color: var(--brand-ink);
    border-bottom-color: var(--brand-ink);
    gap: var(--s-3);
}

.featured-visual {
    background: linear-gradient(135deg, var(--brand) 0%, #3B9CFF 50%, #7AB9FF 100%);
    border-radius: var(--r-lg);
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    box-shadow: var(--shadow-3);
}

.featured-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.25), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(163, 34, 56, 0.2), transparent 55%);
}

.featured-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.03) 20px 21px);
    pointer-events: none;
}

.featured-visual-content {
    position: relative;
    text-align: center;
    padding: var(--s-7);
    z-index: 1;
}

.featured-visual .issue-number {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: 10rem;
    font-weight: 300;
    line-height: 1;
    color: var(--paper);
    display: block;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.featured-visual .issue-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--s-4);
    display: block;
}

/* ---------- ARTICLE GRID ---------- */
.section-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-3);
    padding: var(--s-8) 0 var(--s-4);
    border-bottom: 1px solid var(--ink);
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.section-label strong {
    color: var(--ink);
    font-weight: 600;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule-soft);
    margin-top: -1px;
}

.article-card {
    padding: var(--s-7) var(--s-6);
    border-right: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
    position: relative;
    min-height: 340px;
}

.article-card:nth-child(3n) { border-right: none; }

.article-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--signature);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.article-card:hover {
    background: var(--paper-2);
}

.article-card:hover::before {
    transform: scaleX(1);
}

.article-card:hover .article-title a {
    color: var(--brand);
}

.article-card .issue {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--s-3);
}

.article-card .category {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--signature);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: var(--s-4);
    padding-left: var(--s-3);
    border-left: 2px solid var(--signature);
}

.article-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: var(--s-4);
    letter-spacing: -0.01em;
}

.article-title a {
    color: inherit;
    transition: color var(--transition);
}

.article-dek {
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--ink-2);
    margin-bottom: var(--s-5);
    flex: 1;
    font-weight: 300;
}

.article-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-faint);
}

/* ---------- ARTICLE PAGE ---------- */
.article-hero {
    padding: var(--s-7) 0 var(--s-6);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    overflow: hidden;
}

.article-hero::before {
    content: "";
    position: absolute;
    right: -10%;
    top: -50%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(14, 124, 255, 0.06), transparent 60%);
    pointer-events: none;
}

.article-hero .shell-narrow { position: relative; }

.article-hero .eyebrow { color: var(--signature); }

.article-hero h1 {
    font-size: var(--t-4xl);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-top: var(--s-4);
    max-width: 20ch;
}

.article-hero .dek {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: var(--t-lg);
    color: var(--ink-2);
    max-width: 62ch;
    margin-top: var(--s-5);
    line-height: 1.55;
}

.article-hero .byline {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-soft);
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    flex-wrap: wrap;
}

/* ---------- ARTICLE LAYOUT ---------- */
.article-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--s-9);
    padding: var(--s-6) 0;
}

.article-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    padding-top: var(--s-2);
}

.article-toc h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
}

.article-toc ul {
    list-style: none;
    font-size: var(--t-md);
}

.article-toc li { margin-bottom: var(--s-3); }

.article-toc a {
    color: var(--ink-2);
    display: block;
    line-height: 1.5;
    padding-left: var(--s-3);
    border-left: 2px solid transparent;
    transition: all var(--transition);
}
.article-toc a:hover {
    color: var(--ink);
    border-left-color: var(--signature);
    padding-left: var(--s-4);
}

.article-body {
    /* Let article-body fill the grid column; constrain only text-only blocks for readability */
    max-width: none;
    font-size: var(--t-md);
    line-height: 1.75;
    color: var(--ink-2);
}

/* Keep prose readable at ~90ch while letting visual blocks (grids, cards, tables, media) span full width */
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote,
.article-body section > p,
.article-body section > ul,
.article-body section > ol,
.article-body section > blockquote,
.article-body .intro,
.article-body .executive-summary,
.article-body .pull-quote {
    max-width: 90ch;
}

.article-body p { margin-bottom: var(--s-5); }

.article-body h2 {
    font-size: var(--t-2xl);
    font-weight: 500;
    color: var(--ink);
    margin-top: var(--s-8);
    margin-bottom: var(--s-5);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule-soft);
}
.article-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.article-body h3 {
    font-size: var(--t-xl);
    font-weight: 500;
    color: var(--ink);
    margin-top: var(--s-7);
    margin-bottom: var(--s-4);
}

.article-body strong { color: var(--ink); font-weight: 600; }

.article-body ul, .article-body ol { margin: 0 0 var(--s-5) var(--s-5); }
.article-body li { margin-bottom: var(--s-2); }

/* ---------- PULL QUOTE ---------- */
.pull-quote {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    line-height: 1.35;
    font-weight: 400;
    color: var(--ink);
    padding: var(--s-5) 0 var(--s-5) var(--s-6);
    margin: var(--s-7) 0;
    border-left: 3px solid var(--signature);
    font-style: italic;
    letter-spacing: -0.01em;
}

.pull-quote cite {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: var(--s-4);
}

/* ---------- CARD PATTERNS ---------- */
.factors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    margin: var(--s-6) 0;
}

.factor-card {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-5);
    transition: all var(--transition);
    box-shadow: var(--shadow-1);
}
.factor-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.factor-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--s-2);
}

.factor-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--signature);
    display: block;
    margin-bottom: var(--s-3);
}

.factor-items {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
}

/* Comparison boxes */
.comparison-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin: var(--s-6) 0;
}

.comparison-box {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}

.comparison-box h3 {
    font-size: var(--t-md);
    font-weight: 500;
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
}

.comparison-box.traditional { border-top: 3px solid var(--ink-3); }
.comparison-box.intelligent { border-top: 3px solid var(--signature); }

.metric-row {
    display: flex;
    justify-content: space-between;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule-faint);
    font-size: var(--t-sm);
}
.metric-row:last-child { border-bottom: none; }
.metric-row > span:first-child { color: var(--ink-3); }
.metric-row .metric-val {
    color: var(--ink);
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* Use case box */
.use-case {
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--signature);
    border-radius: var(--r-md);
    padding: var(--s-6);
    margin: var(--s-6) 0;
}

.use-case-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--s-4);
}

.case-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule-soft);
}

.stat { text-align: left; }

.stat-value {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-2xl);
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-top: var(--s-2);
}

/* Timeline */
.implementation-timeline {
    margin: var(--s-6) 0;
    border-left: 1px solid var(--rule);
    padding-left: 0;
}

.timeline-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--s-5);
    padding: var(--s-5) 0 var(--s-5) var(--s-6);
    margin-left: -1px;
    border-left: 1px solid transparent;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: var(--s-6);
    width: 9px;
    height: 9px;
    background: var(--paper);
    border: 2px solid var(--signature);
    border-radius: 50%;
}

.timeline-number {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 400;
    color: var(--signature);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.timeline-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--s-2);
}

.timeline-desc {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

/* Highlight box */
.highlight-box {
    background: var(--brand-wash);
    border: 1px solid rgba(14, 124, 255, 0.15);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    padding: var(--s-6);
    margin: var(--s-6) 0;
}

.highlight-box h3 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    margin: 0 0 var(--s-4);
    color: var(--ink);
}

.highlight-box ul { margin: 0 0 0 var(--s-4); }
.highlight-box li { margin-bottom: var(--s-3); font-size: var(--t-sm); }

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
}

.data-table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 2px solid var(--ink);
    background: var(--paper-2);
}

.data-table td {
    padding: var(--s-4);
    border-bottom: 1px solid var(--rule-faint);
    color: var(--ink-2);
}

.data-table tr:hover td { background: var(--paper-2); }

/* ---------- CONTINUE READING ---------- */
.continue-reading {
    border-top: 1px solid var(--rule);
    padding: var(--s-8) 0;
    margin-top: var(--s-9);
}

.continue-reading .eyebrow { color: var(--ink-3); }
.continue-reading h3 {
    font-size: var(--t-xl);
    font-weight: 500;
    margin: var(--s-3) 0 var(--s-6);
}

.continue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-6);
}

.continue-card {
    padding: var(--s-6);
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    transition: all var(--transition);
    box-shadow: var(--shadow-1);
}
.continue-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.continue-card .issue {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signature);
    font-weight: 600;
}

.continue-card h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 500;
    margin: var(--s-2) 0 var(--s-3);
    line-height: 1.25;
}

.continue-card h4 a { color: var(--ink); }
.continue-card:hover h4 a { color: var(--brand); }

.continue-card p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    margin: 0;
    line-height: 1.6;
}

/* ---------- AUTHOR BIO ---------- */
.author-bio {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--s-7);
    padding: var(--s-8) 0;
    margin-top: var(--s-8);
    border-top: 1px solid var(--ink);
}

.author-portrait {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, #3B9CFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--paper);
    letter-spacing: -0.02em;
    box-shadow: var(--shadow-2);
}

.author-content .eyebrow { margin-bottom: var(--s-2); }

.author-name {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--s-2);
}

.author-credential {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: var(--s-4);
}

.author-title {
    font-size: var(--t-md);
    color: var(--ink-2);
    margin-bottom: var(--s-4);
    font-weight: 400;
}

.author-bio p {
    font-size: var(--t-base);
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: var(--s-4);
    max-width: 80ch;
    font-weight: 300;
}

.author-links {
    display: flex;
    gap: var(--s-5);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.author-links a {
    color: var(--brand);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--brand);
    transition: all var(--transition);
}
.author-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ---------- FOOTER ---------- */
.site-footer {
    border-top: 1px solid var(--rule-soft);
    padding: var(--s-7) 0;
    margin-top: var(--s-8);
    background: var(--paper);
}

.footer-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--s-7);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-5);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
}

.footer-inner a { color: var(--ink-2); }
.footer-inner a:hover { color: var(--signature); }

/* ---------- UTILITY ---------- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-2) var(--s-4);
    z-index: 100;
    border-radius: 0 0 var(--r-sm) 0;
    font-size: var(--t-sm);
}
.skip-link:focus { top: 0; color: var(--paper); }

.text-mono { font-family: 'IBM Plex Mono', monospace; }
.text-serif { font-family: 'IBM Plex Serif', Georgia, serif; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1280px) {
    .featured { gap: var(--s-7); }
    .index-hero h1 { font-size: var(--t-4xl); }
    .article-hero h1 { font-size: var(--t-3xl); }
}

@media (max-width: 1024px) {
    :root { --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 80px; }
    .article-layout { grid-template-columns: 1fr; gap: var(--s-6); }
    .article-toc {
        position: static;
        padding: var(--s-5);
        background: var(--paper-2);
        border: 1px solid var(--rule-soft);
        border-radius: var(--r-md);
    }
    .featured { grid-template-columns: 1fr; gap: var(--s-6); }
    .featured-visual { aspect-ratio: 16/8; order: -1; }
    .featured-visual .issue-number { font-size: 7rem; }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .article-card:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
    .article-card:nth-child(2n) { border-right: none; }
    .masthead-inner { padding: var(--s-4) var(--s-5); }
}

@media (max-width: 720px) {
    :root {
        --t-3xl: 2.369rem;
        --t-4xl: 2.9rem;
        --t-5xl: 3.4rem;
    }
    .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .masthead-nav { flex-wrap: wrap; gap: var(--s-4); }
    .index-hero { padding: var(--s-7) 0 var(--s-6); }
    .article-grid { grid-template-columns: 1fr; }
    .article-card { border-right: none !important; min-height: auto; }
    .continue-grid { grid-template-columns: 1fr; }
    .comparison-section { grid-template-columns: 1fr; }
    .author-bio { grid-template-columns: 1fr; text-align: left; }
    .author-portrait { margin-bottom: var(--s-4); }
    .shell, .shell-narrow { padding: 0 var(--s-4); }
    .footer-inner { padding: 0 var(--s-4); }
    .featured-visual .issue-number { font-size: 5rem; }
}

/* =========================================================================
   LEGACY COMPONENT SUPPORT
   -------------------------------------------------------------------------
   Styles for custom class names used in articles 02-19. These apply the new
   design system to content patterns that existed before the template
   unification, without requiring every article to be rewritten.
   ========================================================================= */

/* --- Card variants (all render as refined editorial cards) --- */
.article-body .stat-card,
.article-body .pattern-card,
.article-body .matrix-card,
.article-body .benefit-card,
.article-body .feature-card,
.article-body .flow-card,
.article-body .plan-card,
.article-body .metric-card,
.article-body .use-case-card,
.article-body .card {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-5);
    box-shadow: var(--shadow-1);
    transition: all var(--transition);
}

.article-body .stat-card:hover,
.article-body .pattern-card:hover,
.article-body .matrix-card:hover,
.article-body .benefit-card:hover,
.article-body .feature-card:hover,
.article-body .flow-card:hover,
.article-body .plan-card:hover,
.article-body .metric-card:hover,
.article-body .use-case-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

/* --- Grid wrappers --- */
.article-body .stat-grid,
.article-body .metric-grid,
.article-body .card-grid,
.article-body .pattern-grid,
.article-body .matrix-grid,
.article-body .benefit-grid,
.article-body .feature-grid,
.article-body .flow-grid,
.article-body .plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    margin: var(--s-6) 0;
}

/* --- Titles inside cards --- */
.article-body .pattern-title,
.article-body .matrix-title,
.article-body .feature-title,
.article-body .plan-title,
.article-body .benefit-title,
.article-body .stage-title,
.article-body .flow-title,
.article-body .card-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-3);
    line-height: 1.3;
}

/* --- Descriptive copy inside cards --- */
.article-body .feature-desc,
.article-body .benefit-desc,
.article-body .flow-desc,
.article-body .pattern-list,
.article-body .plan-list,
.article-body .matrix-content {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    font-weight: 300;
}

.article-body .pattern-list,
.article-body .plan-list {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 0;
}

.article-body .pattern-list li,
.article-body .plan-list li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--rule-faint);
    font-size: var(--t-sm);
}
.article-body .pattern-list li:last-child,
.article-body .plan-list li:last-child { border-bottom: none; }

/* --- Metric patterns --- */
.article-body .metric-value,
.article-body .metric-value-comp {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-2xl);
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: block;
}

.article-body .metric-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-top: var(--s-2);
    display: block;
}

.article-body .metric-trend {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--data-pos);
    letter-spacing: 0.08em;
}

.article-body .metric-trend.negative { color: var(--data-neg); }
.article-body .metric-trend.caution { color: var(--data-caution); }

/* --- Flow / process visualizations --- */
.article-body .flow-number {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 400;
    color: var(--signature);
    line-height: 1;
    display: inline-block;
    margin-bottom: var(--s-2);
    font-variant-numeric: tabular-nums;
}

.article-body .flow-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--signature);
    display: block;
    margin-bottom: var(--s-2);
}

/* --- Inline labels (chips, tags, badges) --- */
.article-body .chip,
.article-body .tag,
.article-body .tool-badge,
.article-body .metric-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    margin: 2px 4px 2px 0;
}

.article-body .tool-badge {
    background: var(--brand-wash);
    color: var(--brand);
    border-color: rgba(14, 124, 255, 0.2);
}

/* --- Dividers --- */
.article-body .divider,
.article-body .section-divider {
    border: none;
    height: 1px;
    background: var(--rule-soft);
    margin: var(--s-7) 0;
}

/* --- Warning / callout / formula boxes --- */
.article-body .warning-box,
.article-body .formula-box,
.article-body .callout {
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--signature);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.article-body .formula-box {
    border-left-color: var(--brand);
    background: var(--brand-wash);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-sm);
}

.article-body .warning-box {
    border-left-color: var(--data-caution);
    background: rgba(179, 124, 12, 0.04);
}

.article-body .warning-box h3,
.article-body .formula-box h3,
.article-body .callout h3 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    margin: 0 0 var(--s-3);
    color: var(--ink);
}

/* --- Chart / visual containers --- */
.article-body .chart-container,
.article-body .visual-container {
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-6);
    margin: var(--s-6) 0;
}

.article-body .chart-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
}

/* --- Content sections --- */
.article-body .content-section {
    margin: var(--s-7) 0;
}

/* --- Feature list with dots --- */
.article-body .feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--rule-faint);
}

.article-body .feature-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 9px;
    background: var(--signature);
    border-radius: 50%;
}

.article-body .feature-item:last-child { border-bottom: none; }

/* --- Matrix cells --- */
.article-body .matrix-cell {
    padding: var(--s-4);
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
}

/* --- Size / percentage labels (used in size curve article) --- */
.article-body .size-percentage {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* --- Pattern bar (visual indicator) --- */
.article-body .pattern-bar {
    height: 4px;
    background: var(--rule-soft);
    border-radius: 2px;
    overflow: hidden;
    margin: var(--s-3) 0;
    position: relative;
}

.article-body .pattern-bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: var(--fill, 60%);
    background: linear-gradient(90deg, var(--brand), var(--signature));
    border-radius: 2px;
}

/* --- Intro paragraph (alias for .lede) --- */
.article-body .intro {
    font-size: var(--t-lg);
    line-height: 1.6;
    color: var(--ink-2);
    font-weight: 300;
    margin-bottom: var(--s-6);
}

.article-body .intro::first-letter {
    font-family: 'IBM Plex Serif', Georgia, serif;
    float: left;
    font-size: 5.2rem;
    line-height: 0.9;
    font-weight: 500;
    padding-right: 14px;
    padding-top: 8px;
    color: var(--signature);
}

/* =========================================================================
   PATTERN-BASED FALLBACKS
   -------------------------------------------------------------------------
   Attribute selectors catch semantic patterns in class names so custom
   component classes across 18 articles render cohesively without having
   to style each one individually. Specific .class styles above override
   these via specificity where needed.
   ========================================================================= */

/* Any "-card" class → refined editorial card */
.article-body [class$="-card"]:not([class*="continue-card"]):not([class*="blog-card"]):not([class*="article-card"]) {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-5);
    box-shadow: var(--shadow-1);
    transition: all var(--transition);
}

.article-body [class$="-card"]:not([class*="continue-card"]):not([class*="blog-card"]):not([class*="article-card"]):hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

/* Any "-grid" class → auto-fit grid */
.article-body [class$="-grid"]:not(.continue-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-4);
    margin: var(--s-6) 0;
}

/* Any "-title" class → serif, refined */
.article-body [class$="-title"]:not(.article-title):not(.use-case-title):not(.chart-title):not(.timeline-title):not(.factor-title) {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-3);
    line-height: 1.3;
    letter-spacing: -0.005em;
}

/* Any "-value" class → big serif number */
.article-body [class$="-value"]:not(.metric-val) {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-2xl);
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: block;
}

/* Any "-label" class → mono small caps */
.article-body [class$="-label"]:not(.filter-label):not(.issue-label) {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    display: block;
    margin-top: var(--s-2);
}

/* Any "-desc" or "-content" or "-subtext" class → body text */
.article-body [class$="-desc"],
.article-body [class$="-subtext"] {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    font-weight: 300;
}

/* Any "-number" class → serif numeral */
.article-body [class$="-number"]:not(.timeline-number):not(.blog-number):not(.issue-number) {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 400;
    color: var(--signature);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* Any "-target" class → small mono label with brand accent */
.article-body [class$="-target"] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    color: var(--data-pos);
    letter-spacing: 0.1em;
    margin-top: var(--s-2);
    display: block;
}

/* Bar containers and fills — progress-style visualizations */
.article-body [class$="-bar"]:not(.pattern-bar):not(.progress-bar) {
    height: 8px;
    background: var(--rule-soft);
    border-radius: 4px;
    overflow: hidden;
    margin: var(--s-2) 0;
    position: relative;
}

.article-body [class$="-fill"] {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), var(--signature));
    border-radius: 4px;
}

.article-body .bar-container {
    margin: var(--s-3) 0;
}

/* Pipeline / funnel / step patterns */
.article-body .pipeline-stage,
.article-body .funnel-stage,
.article-body .flow-step,
.article-body .methodology-step,
.article-body .timeline-phase {
    padding: var(--s-4) var(--s-5);
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--signature);
    border-radius: var(--r-sm);
    margin-bottom: var(--s-3);
    transition: all var(--transition);
}

.article-body .pipeline-stage:hover,
.article-body .funnel-stage:hover,
.article-body .flow-step:hover,
.article-body .methodology-step:hover,
.article-body .timeline-phase:hover {
    border-color: var(--brand);
    border-left-color: var(--brand);
}

/* Success / info / warning callouts */
.article-body .success-callout {
    background: rgba(14, 138, 66, 0.05);
    border: 1px solid rgba(14, 138, 66, 0.15);
    border-left: 3px solid var(--data-pos);
    border-radius: var(--r-md);
    padding: var(--s-5);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
}

.article-body .info-callout {
    background: var(--brand-wash);
    border: 1px solid rgba(14, 124, 255, 0.15);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    padding: var(--s-5);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
}

.article-body .warning {
    background: rgba(179, 124, 12, 0.05);
    border-left: 3px solid var(--data-caution);
    padding: var(--s-4) var(--s-5);
    margin: var(--s-5) 0;
    border-radius: var(--r-md);
    font-size: var(--t-sm);
}

/* Demand state indicators (badges) */
.article-body .high-demand,
.article-body .medium-demand,
.article-body .low-demand {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 999px;
    margin: 2px 0;
}

.article-body .high-demand {
    background: rgba(14, 138, 66, 0.1);
    color: var(--data-pos);
    border: 1px solid rgba(14, 138, 66, 0.25);
}

.article-body .medium-demand {
    background: rgba(179, 124, 12, 0.1);
    color: var(--data-caution);
    border: 1px solid rgba(179, 124, 12, 0.25);
}

.article-body .low-demand {
    background: rgba(100, 116, 139, 0.1);
    color: var(--ink-3);
    border: 1px solid var(--rule);
}

/* Formula — inline monospace */
.article-body .formula,
.article-body .formula-box {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--paper-2);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--brand);
    font-size: var(--t-sm);
    margin: var(--s-4) 0;
    color: var(--ink);
    line-height: 1.6;
}

/* Store boxes (article 02 specifically) */
.article-body .store-box {
    padding: var(--s-4);
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    text-align: center;
}

.article-body .store-name {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-2);
}

.article-body .store-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--s-2) 0;
}

.article-body .store-metrics {
    display: flex;
    justify-content: center;
    gap: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule-faint);
    margin-top: var(--s-3);
}

.article-body .store-metrics .metric { text-align: center; }

.article-body .metric {
    font-size: var(--t-sm);
}

/* Segment circles (RFM) */
.article-body .segment-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--signature));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--paper);
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 500;
    margin-bottom: var(--s-3);
}

/* Tool badges row */
.article-body .tool-badges,
.article-body .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: var(--s-3) 0;
}

/* Comparison title — slightly larger */
.article-body .comparison-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--s-3);
}

/* Anomaly header — flex row with time */
.article-body .anomaly-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-faint);
}

.article-body .anomaly-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    color: var(--ink-3);
}

.article-body .anomaly-action {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    color: var(--brand);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Signal indicators */
.article-body .signal-indicators {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: var(--s-3);
}

/* Accuracy row — horizontal bar with label */
.article-body .accuracy-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s-4);
    align-items: center;
    margin-bottom: var(--s-3);
}

.article-body .accuracy-label {
    font-size: var(--t-sm);
    color: var(--ink-2);
    text-align: left;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
}

/* Feature list — clean bulleted alternative */
.article-body .feature-list {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0;
}

.article-body .feature-list li {
    padding: var(--s-3) 0 var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--rule-faint);
    position: relative;
    font-size: var(--t-sm);
    line-height: 1.6;
}

.article-body .feature-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--signature);
    font-weight: 600;
}

.article-body .feature-list li:last-child { border-bottom: none; }

/* Forecast element */
.article-body .forecast {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-sm);
    color: var(--brand);
    background: var(--brand-wash);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    display: inline-block;
}

/* =========================================================================
   SOLUTION PAGES
   -------------------------------------------------------------------------
   Components used by Cybex Platform solution pages (retailai-*, shopify-*,
   aistrategy, insights, workflow, automation). Distinct from article pages —
   same brand vocabulary, different information architecture.
   ========================================================================= */

/* --- Solution hero: lighter, brand-focused, badge + headline --- */
.solution-hero {
    padding: var(--s-9) 0 var(--s-8);
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    overflow: hidden;
}

.solution-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -15%;
    width: 50%;
    height: 140%;
    background:
        radial-gradient(ellipse at center, rgba(14, 124, 255, 0.08), transparent 55%),
        radial-gradient(ellipse at 30% 70%, rgba(163, 34, 56, 0.04), transparent 50%);
    pointer-events: none;
}

.solution-hero .shell { position: relative; }

.solution-hero .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--signature-wash);
    border: 1px solid rgba(163, 34, 56, 0.15);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--signature);
    margin-bottom: var(--s-5);
}

.solution-hero h1 {
    font-size: var(--t-4xl);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 22ch;
    color: var(--ink);
}

.solution-hero .dek {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: var(--t-lg);
    color: var(--ink-2);
    max-width: 72ch;
    margin-top: var(--s-5);
    line-height: 1.55;
}

.solution-hero .hero-actions {
    display: flex;
    gap: var(--s-4);
    margin-top: var(--s-6);
    flex-wrap: wrap;
}

/* --- Primary / secondary buttons used across solution pages --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: var(--brand);
    color: var(--paper);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: var(--r-sm);
    transition: all var(--transition);
    border: 1px solid var(--brand);
}

.btn-primary:hover {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: var(--paper);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    background: transparent;
    color: var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: var(--r-sm);
    transition: all var(--transition);
    border: 1px solid var(--ink);
}

.btn-secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) 0;
    color: var(--brand);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 2px solid var(--brand);
    transition: all var(--transition);
}

.btn-ghost:hover {
    color: var(--brand-ink);
    border-bottom-color: var(--brand-ink);
    gap: var(--s-3);
}

/* --- Page section wrapper --- */
.page-section {
    padding: var(--s-9) 0;
    border-bottom: 1px solid var(--rule-soft);
}

.page-section:last-of-type { border-bottom: none; }

.page-section .eyebrow { margin-bottom: var(--s-3); }

.page-section h2 {
    font-size: var(--t-2xl);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 var(--s-4);
    line-height: 1.15;
    max-width: 30ch;
}

.page-section .section-intro {
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 75ch;
    margin-bottom: var(--s-6);
    font-weight: 300;
}

.page-section h3 {
    font-size: var(--t-xl);
    font-weight: 500;
    color: var(--ink);
    margin: var(--s-7) 0 var(--s-4);
}

.page-section p,
.page-section ul,
.page-section ol {
    max-width: 75ch;
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: var(--s-4);
}

.page-section ul,
.page-section ol {
    padding-left: var(--s-5);
}

.page-section li {
    margin-bottom: var(--s-2);
}

.page-section strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Capability grid: used for "Core AI Use Cases" and similar --- */
.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin: var(--s-6) 0;
}

.capability-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.capability-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.capability-card {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-6);
    transition: all var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.capability-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.capability-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--signature);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.capability-card:hover::before {
    transform: scaleX(1);
}

.capability-card .num {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-xl);
    font-weight: 400;
    color: var(--signature);
    line-height: 1;
    margin-bottom: var(--s-3);
    font-variant-numeric: tabular-nums;
}

.capability-card h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-lg);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-3);
    line-height: 1.25;
}

.capability-card p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0 0 var(--s-3);
    font-weight: 300;
    max-width: none;
}

.capability-card ul {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0 0;
    font-size: var(--t-sm);
}

.capability-card ul li {
    padding: var(--s-2) 0 var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--rule-faint);
    position: relative;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0;
}

.capability-card ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--signature);
    font-weight: 600;
}

.capability-card ul li:last-child { border-bottom: none; }

/* --- Benefit grid: 3-up cards for "Key Benefits" sections --- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin: var(--s-6) 0;
}

.benefit-card {
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--brand);
    border-radius: var(--r-md);
    padding: var(--s-6);
    transition: all var(--transition);
}

.benefit-card:hover {
    border-color: var(--rule);
    border-top-color: var(--brand);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.benefit-card h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--s-3);
    line-height: 1.3;
}

.benefit-card p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    margin: 0;
    font-weight: 300;
    max-width: none;
}

/* --- Phase grid: 3-up implementation phase cards --- */
.phase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin: var(--s-6) 0;
}

.phase-card {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-6);
    position: relative;
    transition: all var(--transition);
}

.phase-card:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}

.phase-card .phase-tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--signature);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--s-3);
    padding-left: var(--s-3);
    border-left: 2px solid var(--signature);
}

.phase-card h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-2);
    line-height: 1.3;
}

.phase-card .duration {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--s-3);
}

.phase-card p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.65;
    margin: 0;
    font-weight: 300;
    max-width: none;
}

/* --- Two-column list (What You Gain / What You Avoid) --- */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    margin: var(--s-6) 0;
}

.two-column .column h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
}

.two-column .column.positive h4 { color: var(--data-pos); border-bottom-color: var(--data-pos); }
.two-column .column.negative h4 { color: var(--ink-3); border-bottom-color: var(--rule); }
.two-column .column.brand h4 { color: var(--brand); border-bottom-color: var(--brand); }

.two-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.two-column li {
    padding: var(--s-3) 0 var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--rule-faint);
    position: relative;
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

.two-column li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--signature);
    font-weight: 600;
}

.two-column li:last-child { border-bottom: none; }

/* --- CTA banner: replaces the old green cta-box --- */
.cta-banner {
    background: linear-gradient(135deg, var(--ink) 0%, #1a2942 100%);
    border-radius: var(--r-lg);
    padding: var(--s-8);
    margin: var(--s-8) 0 var(--s-7);
    text-align: center;
    color: var(--paper);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-3);
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 25%, rgba(14, 124, 255, 0.15), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(163, 34, 56, 0.15), transparent 55%);
    pointer-events: none;
}

.cta-banner > * { position: relative; z-index: 1; }

.cta-banner .eyebrow {
    color: var(--brand-light);
    margin-bottom: var(--s-3);
}

.cta-banner h2 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-2xl);
    font-weight: 400;
    color: var(--paper);
    margin: 0 0 var(--s-4);
    letter-spacing: -0.015em;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner p {
    font-size: var(--t-md);
    color: rgba(250, 247, 242, 0.85);
    max-width: 58ch;
    margin: 0 auto var(--s-6);
    line-height: 1.6;
    font-weight: 300;
}

.cta-banner .btn-primary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.cta-banner .btn-primary:hover {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
}

.cta-banner .btn-secondary {
    color: var(--paper);
    border-color: rgba(250, 247, 242, 0.5);
}

.cta-banner .btn-secondary:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.cta-banner .actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Value metric card (for ROI / executive pages) --- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin: var(--s-6) 0;
}

.value-card {
    background: var(--paper);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    padding: var(--s-6);
    position: relative;
    transition: all var(--transition);
}

.value-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-2);
}

.value-card .metric-word {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-3xl);
    font-weight: 300;
    color: var(--signature);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: var(--s-4);
    display: block;
}

.value-card h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-3);
}

.value-card p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
    max-width: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .capability-grid,
    .benefit-grid,
    .phase-grid,
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .capability-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .two-column { grid-template-columns: 1fr; gap: var(--s-5); }
    .solution-hero h1 { font-size: var(--t-3xl); }
}

@media (max-width: 720px) {
    .capability-grid,
    .benefit-grid,
    .phase-grid,
    .value-grid { grid-template-columns: 1fr; }
    .cta-banner { padding: var(--s-6); }
    .cta-banner h2 { font-size: var(--t-xl); }
}

/* --- Workflow step details: label/value mini-boxes inside each step --- */
.step-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-faint);
}

.detail-box {
    font-size: var(--t-sm);
}

.detail-box strong {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.detail-box span {
    color: var(--ink);
    font-size: var(--t-sm);
    line-height: 1.4;
}

@media (max-width: 720px) {
    .step-details { grid-template-columns: 1fr; }
}

/* --- Flow diagram: horizontal process visualization --- */
.flow-diagram {
    margin: var(--s-6) 0;
    padding: var(--s-6);
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
}

.flow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-4);
}

.flow-row:last-child { margin-bottom: 0; }

.flow-box {
    padding: var(--s-3) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    min-width: 140px;
    text-align: center;
}

.flow-box.accent {
    background: var(--signature-wash);
    border-color: var(--signature);
    color: var(--signature);
}

.flow-box.brand {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand);
}

.flow-arrow {
    color: var(--ink-3);
    font-size: var(--t-lg);
    font-weight: 300;
}

.flow-arrow-down {
    color: var(--ink-3);
    font-size: var(--t-lg);
    text-align: center;
    margin: var(--s-2) 0;
}

/* --- Neutralize <section class="card"> — used as section wrapper, not card --- */
.article-body section.card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin: 0;
    transition: none;
}
.article-body section.card:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

/* --- Content asides used inline within article body --- */
.article-body aside.key-points,
.article-body aside.strategy-box,
.article-body aside.example-box,
.article-body aside.conclusion {
    background: var(--paper-2);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--signature);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.article-body aside.strategy-box {
    border-left-color: var(--brand);
    background: var(--brand-wash);
}

.article-body aside.example-box {
    border-left-color: var(--data-pos);
    background: rgba(14, 138, 66, 0.04);
}

.article-body aside.conclusion {
    border-left-color: var(--signature);
    background: var(--signature-wash);
    font-size: var(--t-md);
}

.article-body aside.key-points h3,
.article-body aside.key-points h4,
.article-body aside.strategy-box h3,
.article-body aside.strategy-box h4,
.article-body aside.example-box h3,
.article-body aside.example-box h4,
.article-body aside.conclusion h3,
.article-body aside.conclusion h4,
.article-body aside.highlight-box h3,
.article-body aside.highlight-box h4,
.article-body aside.warning-box h3,
.article-body aside.warning-box h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 600;
    margin: 0 0 var(--s-3);
    color: var(--ink);
}

.article-body aside ul { margin: 0 0 0 var(--s-4); }
.article-body aside li { margin-bottom: var(--s-2); }

/* Generic <aside> inside article-body but not a recognized variant */
.article-body > aside,
.article-body section > aside {
    margin: var(--s-6) 0;
}

/* Lift inline-aside containers to match warning-box treatment */
.article-body aside.warning-box {
    background: rgba(179, 124, 12, 0.04);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--data-caution);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.article-body aside.highlight-box {
    background: var(--brand-wash);
    border: 1px solid rgba(14, 124, 255, 0.15);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-6);
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

/* --- Bare <table> in article body (no .data-table class) --- */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--s-6) 0;
    font-size: var(--t-sm);
}
.article-body table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 2px solid var(--ink);
    background: var(--paper-2);
}
.article-body table td {
    padding: var(--s-4);
    border-bottom: 1px solid var(--rule-faint);
    color: var(--ink-2);
    vertical-align: top;
    line-height: 1.5;
}
.article-body table tr:hover td { background: var(--paper-2); }

/* --- Neutralize legacy inline color styles --- */
.article-body [style*="color: #"] { color: inherit !important; }
.article-body [style*="background:"] { /* let them through but they're rare post-conversion */ }

/* ---------- PRINT ---------- */
@media print {
    body { background: white; }
    .masthead, .article-toc, .site-footer, .filter-bar, .continue-reading { display: none; }
    .article-body { max-width: 100%; }
    a { color: var(--ink); text-decoration: underline; }
}