/* =====================================================================
   IntegraDox — Site styles v6 "Mix razonado"
   =====================================================================
   Layered on Bootstrap 5 + theme.css. All values come from --idx-* tokens
   so both light and dark themes share component code.

   Section vocabulary (the 8 beats):
     .idx-hero        Beat 1 — promise (2-col text + visual + trust strip)
     .idx-problem     Beat 2 — dark band, pull-quote (serif moment)
     .idx-anatomy     Beat 3 — schematic (core + modules + extensions)
     .idx-modules     Beat 4 — asymmetric grid w/ per-module accents
     .idx-global      Beat 5 — global/regional split, two columns
     .idx-proof       Beat 6 — editorial credibility paragraph
     .idx-pricing     Beat 7 — pricing teaser
     .idx-cta         Beat 8 — dark close with clay rule
   ===================================================================== */

/* ---------- Base ---------- */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--idx-font-sans);
    font-feature-settings: "ss01", "cv11";
    font-size: var(--idx-text-base);
    line-height: var(--idx-leading-normal);
    color: var(--idx-fg);
    background: var(--idx-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    margin: 0;
    letter-spacing: var(--idx-tracking-tight);
}
h1 { font-size: var(--idx-display); line-height: var(--idx-leading-display); letter-spacing: var(--idx-tracking-display); }
h2 { font-size: var(--idx-text-3xl); line-height: var(--idx-leading-tight); }
@media (max-width: 768px) { h2 { font-size: var(--idx-text-2xl); } }
h3 { font-size: var(--idx-text-xl); line-height: var(--idx-leading-tight); }
h4 { font-size: var(--idx-text-lg); }
h5 { font-size: var(--idx-text-base); font-weight: var(--idx-weight-semibold); }

/* The single serif moment: the "problem" beat pull-quote */
.idx-serif {
    font-family: var(--idx-font-serif);
    font-weight: 500;
    letter-spacing: var(--idx-tracking-tight);
}

p { margin: 0; color: var(--idx-fg-muted); line-height: var(--idx-leading-normal); }
.lead { font-size: var(--idx-text-md); line-height: var(--idx-leading-snug); color: var(--idx-fg-muted); }

a {
    color: var(--idx-fg-display);
    text-decoration: none;
    transition: color var(--idx-dur-fast) var(--idx-ease);
}
a:hover { color: var(--idx-primary); }

::selection { background: var(--idx-primary-soft); color: var(--idx-fg-display); }

.idx-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ---------- Layout shell ---------- */

.idx-container {
    max-width: var(--idx-container-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--idx-container-pad);
}
main { display: block; }
section { padding-block: var(--idx-section-y); position: relative; }

/* ---------- Eyebrows & hairlines ---------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    border-left: 2px solid var(--idx-accent);
    color: var(--idx-fg-muted);
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    font-weight: var(--idx-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    line-height: 1;
}
.idx-hairline { height: 1px; background: var(--idx-border); border: 0; }

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-weight: var(--idx-weight-medium);
    --bs-btn-font-size: var(--idx-text-sm);
    --bs-btn-border-radius: var(--idx-radius);
    transition: background-color var(--idx-dur-fast) var(--idx-ease),
                border-color var(--idx-dur-fast) var(--idx-ease),
                color var(--idx-dur-fast) var(--idx-ease),
                box-shadow var(--idx-dur-fast) var(--idx-ease);
}
.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-font-size: var(--idx-text-base);
}
.btn-primary {
    --bs-btn-bg:           var(--idx-primary);
    --bs-btn-border-color: var(--idx-primary);
    --bs-btn-color:        var(--idx-primary-fg);
    --bs-btn-hover-bg:           var(--idx-primary-hover);
    --bs-btn-hover-border-color: var(--idx-primary-hover);
    --bs-btn-hover-color:        var(--idx-primary-fg);
    --bs-btn-active-bg:    var(--idx-primary-press);
    --bs-btn-active-border-color: var(--idx-primary-press);
    --bs-btn-active-color: var(--idx-primary-fg);
}
.btn-outline {
    background: transparent;
    border: 1px solid var(--idx-border-strong);
    color: var(--idx-fg-display);
}
.btn-outline:hover {
    background: var(--idx-bg-subtle);
    color: var(--idx-fg-display);
    border-color: var(--idx-fg-muted);
}
.btn-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--idx-fg-display);
    font-weight: var(--idx-weight-medium);
    font-size: var(--idx-text-sm);
    padding: 0.625rem 0.25rem;
    background: transparent;
    border: 0;
    text-decoration: none;
}
.btn-link-arrow .bi { transition: transform var(--idx-dur) var(--idx-ease); }
.btn-link-arrow:hover { color: var(--idx-primary); }
.btn-link-arrow:hover .bi { transform: translateX(3px); }

:focus-visible {
    outline: none;
    box-shadow: var(--idx-shadow-focus);
    border-radius: 2px;
}

/* ---------- Navbar ---------- */

.idx-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--idx-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
            backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--idx-border);
}
.idx-navbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-2);
    height: 64px;
}
.idx-brand {
    display: inline-flex;
    align-items: center;
    color: var(--idx-fg-display);
}
.idx-brand:hover { color: var(--idx-fg-display); }
.idx-brand img { height: 32px; width: auto; display: block; }

.idx-nav {
    display: none;
    align-items: center;
    gap: var(--idx-space-4);
    list-style: none;
    margin: 0; padding: 0;
}
.idx-nav a {
    color: var(--idx-fg-muted);
    font-weight: var(--idx-weight-medium);
    font-size: var(--idx-text-sm);
}
.idx-nav a:hover { color: var(--idx-fg-display); }

.idx-navbar__actions { display: flex; align-items: center; gap: var(--idx-space-1); }

.idx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--idx-radius);
    background: transparent;
    color: var(--idx-fg-muted);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--idx-dur-fast) var(--idx-ease),
                color var(--idx-dur-fast) var(--idx-ease);
}
.idx-icon-btn:hover { background: var(--idx-bg-subtle); color: var(--idx-fg-display); }

.idx-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--idx-radius);
    border: 1px solid var(--idx-border-strong);
    background: transparent;
    color: var(--idx-fg-display);
    cursor: pointer;
}
@media (min-width: 992px) {
    .idx-nav { display: flex; }
    .idx-burger { display: none; }
}

.idx-mobile-menu {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--idx-bg);
    border-top: 1px solid var(--idx-border);
    padding: var(--idx-space-3) var(--idx-container-pad);
    display: none;
    /* Sits above the navbar (z=1030) so any visual overlap is resolved
       in the menu's favor. Note: the partial moves this div OUT of the
       <header>, because the header's backdrop-filter creates a
       containing block that would otherwise re-anchor `position: fixed`
       to the 64px-tall header instead of the viewport (menu shrinks
       to 0 height). Both fixes are needed — DOM placement AND z-index. */
    z-index: 1031;
    overflow-y: auto;
}
.idx-mobile-menu.is-open { display: block; }
.idx-mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.idx-mobile-menu a {
    display: block;
    padding: var(--idx-space-2) var(--idx-space-1);
    color: var(--idx-fg-display);
    font-weight: var(--idx-weight-medium);
    font-size: var(--idx-text-lg);
    border-bottom: 1px solid var(--idx-border);
}

/* =====================================================================
   BEAT 1 — HERO (2-col text + visual + trust strip below, full-width)
   ===================================================================== */

.idx-hero {
    background: var(--idx-bg);
    padding-block: clamp(80px, 10vw, 128px) clamp(56px, 8vw, 80px);
    position: relative;
    overflow: hidden;
}
.idx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--idx-grid);
    background-size: 8px 8px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 0%, black 0%, transparent 60%);
            mask-image: radial-gradient(ellipse at 70% 0%, black 0%, transparent 60%);
    opacity: 0.55;
    pointer-events: none;
}
.idx-hero__inner { position: relative; z-index: 1; }
.idx-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 72px;
}
@media (min-width: 992px) {
    .idx-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}
.idx-hero__text { max-width: 580px; }
.idx-hero__eyebrow { margin-bottom: var(--idx-space-3); display: inline-flex; }
.idx-hero h1 {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    font-size: var(--idx-display);
    line-height: var(--idx-leading-display);
    letter-spacing: var(--idx-tracking-display);
    color: var(--idx-fg-display);
    margin: 0 0 var(--idx-space-3);
    max-width: 720px;
    text-wrap: balance;
}
.idx-hero h1 .em { color: var(--idx-primary); }
.idx-hero__sub {
    font-size: var(--idx-text-md);
    line-height: var(--idx-leading-snug);
    color: var(--idx-fg-muted);
    margin-bottom: var(--idx-space-4);
    max-width: 580px;
}
.idx-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idx-space-2);
}

/* Hero visual: a stylized "ledger console" */
.idx-hero__visual {
    background: var(--idx-surface);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-lg);
    padding: 22px;
    box-shadow: var(--idx-shadow-lift);
}
.idx-hero__visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--idx-border);
    margin-bottom: 16px;
    font-family: var(--idx-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
}
.idx-hero__visual-header .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--idx-accent);
    display: inline-block;
    margin-right: 6px;
}
.idx-hero__visual-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.idx-kpi {
    background: var(--idx-paper-2);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius);
    padding: 14px 14px;
}
[data-theme="dark"] .idx-kpi { background: var(--idx-surface-2); }
.idx-kpi__label {
    font-family: var(--idx-font-mono);
    font-size: 10px;
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: 6px;
}
.idx-kpi__value {
    font-size: 22px;
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    line-height: 1;
    letter-spacing: -0.02em;
}
.idx-kpi__value .unit { font-size: 11px; color: var(--idx-fg-subtle); margin-left: 4px; font-weight: 500; }
.idx-kpi__delta { font-size: 11px; margin-top: 4px; color: var(--idx-sage); font-family: var(--idx-font-mono); }
.idx-kpi__delta.warn { color: var(--idx-accent); }
.idx-hero__visual-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--idx-border);
    font-size: 12px;
    align-items: center;
}
.idx-hero__visual-row .lbl { color: var(--idx-fg-muted); }
.idx-hero__visual-row .num { color: var(--idx-fg-display); font-weight: var(--idx-weight-semibold); font-family: var(--idx-font-mono); }
.idx-hero__visual-row .status {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--idx-primary-soft);
    color: var(--idx-primary);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    font-family: var(--idx-font-mono);
    font-weight: var(--idx-weight-medium);
}

/* Trust strip (full-width below hero grid) */
.idx-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--idx-border);
    border-top: 1px solid var(--idx-border);
    border-bottom: 1px solid var(--idx-border);
}
@media (min-width: 768px) { .idx-trust { grid-template-columns: repeat(3, 1fr); } }
.idx-trust__item { background: var(--idx-bg); padding: 18px 20px; }
.idx-trust__label {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: 6px;
}
.idx-trust__value {
    font-size: 14px;
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    line-height: 1.3;
}

/* =====================================================================
   BEAT 2 — PROBLEM (dark, centered pull-quote in serif)
   ===================================================================== */

.idx-problem {
    background: var(--idx-bg-strong);
    color: var(--idx-fg-on-strong);
    padding-block: clamp(72px, 9vw, 112px);
    text-align: center;
}
.idx-problem .eyebrow {
    color: rgba(247, 244, 237, 0.55);
    border-left-color: var(--idx-accent);
    margin: 0 auto var(--idx-space-3);
}
.idx-problem__quote {
    font-family: var(--idx-font-serif);
    font-weight: 400;
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--idx-fg-on-strong);
    max-width: 900px;
    margin: 0 auto;
    text-wrap: balance;
}
.idx-problem__quote .accent { color: var(--idx-accent); }
.idx-problem__bullets {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-3);
    max-width: 820px;
    margin: var(--idx-space-6) auto 0;
    text-align: left;
}
@media (min-width: 768px) { .idx-problem__bullets { grid-template-columns: repeat(3, 1fr); gap: var(--idx-space-4); } }
.idx-problem__bullet {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 18px;
}
.idx-problem__bullet-num {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-accent);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: 8px;
}
.idx-problem__bullet-text {
    font-size: var(--idx-text-sm);
    color: rgba(247, 244, 237, 0.85);
    line-height: var(--idx-leading-snug);
}

/* =====================================================================
   BEAT 3 — ANATOMY (paper-2, 1 core + 6 modules schematic + extensions)
   ===================================================================== */

.idx-anatomy { background: var(--idx-surface-2); }
.idx-anatomy__head { max-width: 720px; margin-bottom: var(--idx-space-6); }
.idx-anatomy__head .eyebrow { margin-bottom: var(--idx-space-2); }
.idx-anatomy__head h2 { margin: var(--idx-space-2) 0; }
.idx-anatomy__head .lead { max-width: 640px; }

.idx-anatomy__schema {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-3);
    padding: var(--idx-space-4);
    background: var(--idx-bg);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-lg);
    margin-bottom: var(--idx-space-3);
}
@media (min-width: 768px) {
    .idx-anatomy__schema { grid-template-columns: 200px 1fr; align-items: stretch; }
}
.idx-anatomy__core {
    background: var(--idx-mod-admin);
    color: var(--idx-paper);
    border-radius: var(--idx-radius);
    padding: var(--idx-space-3) var(--idx-space-2_5, 1.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 140px;
}
.idx-anatomy__core .slug {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    opacity: 0.75;
    margin-bottom: 6px;
}
.idx-anatomy__core .name {
    font-family: var(--idx-font-sans);
    font-size: 20px;
    font-weight: var(--idx-weight-semibold);
    letter-spacing: var(--idx-tracking-tight);
    margin: 0 0 4px;
}
.idx-anatomy__core .role {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    opacity: 0.85;
}
.idx-anatomy__ring {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
@media (min-width: 992px) { .idx-anatomy__ring { grid-template-columns: repeat(3, 1fr); } }
.idx-anatomy__cell {
    border: 1px solid var(--idx-border);
    border-top: 3px solid;
    border-radius: var(--idx-radius-sm);
    padding: 12px 14px;
    background: var(--idx-surface);
}
.idx-anatomy__cell .slug {
    font-family: var(--idx-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
    margin-bottom: 4px;
}
.idx-anatomy__cell .name {
    font-size: 13px;
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
}

/* Map anatomy cells to module accents */
.idx-anatomy__cell[data-mod="account"]  { border-top-color: var(--idx-mod-account); }
.idx-anatomy__cell[data-mod="bank"]     { border-top-color: var(--idx-mod-bank); }
.idx-anatomy__cell[data-mod="payroll"]  { border-top-color: var(--idx-mod-payroll); }
.idx-anatomy__cell[data-mod="asset"]    { border-top-color: var(--idx-mod-asset); }
.idx-anatomy__cell[data-mod="lease"]    { border-top-color: var(--idx-mod-lease); }
.idx-anatomy__cell[data-mod="prod"]     { border-top-color: var(--idx-mod-prod); opacity: 0.7; }

/* Extensions chip strip */
.idx-extensions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idx-space-1) var(--idx-space-2);
    padding: var(--idx-space-3) var(--idx-space-3);
    background: var(--idx-bg-subtle);
    border-radius: var(--idx-radius);
}
.idx-extensions__label {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
    margin-right: var(--idx-space-1);
}
.idx-extension {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-sm);
    background: var(--idx-surface-2);
    color: var(--idx-fg-muted);
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    font-weight: var(--idx-weight-medium);
}
.idx-extension--planned {
    color: var(--idx-fg-subtle);
    background: transparent;
    border-style: dashed;
}
.idx-extension .tag { color: var(--idx-fg-subtle); margin-left: 4px; }

/* Custom extension call-out — sits below the chip catalog. Visually
   distinct so it reads as "and beyond the catalog, we also build…"
   rather than another row of chips. */
.idx-anatomy__custom {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--idx-space-3);
    align-items: start;
    margin-top: var(--idx-space-3);
    padding: var(--idx-space-3);
    background: var(--idx-surface);
    border: 1px solid var(--idx-border);
    border-left: 3px solid var(--idx-accent, var(--idx-primary));
    border-radius: var(--idx-radius);
}
.idx-anatomy__custom-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--idx-accent-soft, var(--idx-bg-subtle));
    display: flex; align-items: center; justify-content: center;
    color: var(--idx-accent, var(--idx-primary));
    font-size: 20px;
}
.idx-anatomy__custom-body h3 {
    margin: 0 0 6px;
    font-size: var(--idx-text-lg);
    color: var(--idx-fg-display);
    font-weight: var(--idx-weight-semibold);
}
.idx-anatomy__custom-body p {
    margin: 0 0 var(--idx-space-2);
    color: var(--idx-fg-muted);
    font-size: var(--idx-text-sm);
    line-height: 1.6;
    max-width: 720px;
}
.idx-anatomy__custom-cta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--idx-text-sm); font-weight: 600;
    color: var(--idx-primary);
    text-decoration: none;
}
.idx-anatomy__custom-cta:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .idx-anatomy__custom { grid-template-columns: 1fr; }
    .idx-anatomy__custom-icon { width: 40px; }
}

/* =====================================================================
   BEAT 4 — MODULES (asymmetric grid with per-module accents + stats inline)
   ===================================================================== */

.idx-modules { background: var(--idx-bg-subtle); }
.idx-modules__head { max-width: 720px; margin-bottom: var(--idx-space-6); }
.idx-modules__head .eyebrow { margin-bottom: var(--idx-space-2); }
.idx-modules__head h2 { margin: var(--idx-space-2) 0; }
.idx-modules__head .lead { max-width: 620px; }

.idx-modules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-2);
}
@media (min-width: 576px) { .idx-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .idx-modules-grid { grid-template-columns: repeat(3, 1fr); } }

.idx-module-card {
    background: var(--idx-surface);
    border-radius: var(--idx-radius_lg, 8px);
    padding: var(--idx-space-3);
    border-top: 4px solid var(--accent-color, var(--idx-border-strong));
    box-shadow: var(--idx-shadow-hairline), var(--idx-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--idx-space-1_5);
    transition: transform var(--idx-dur) var(--idx-ease),
                box-shadow var(--idx-dur) var(--idx-ease);
    position: relative;
}
.idx-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--idx-shadow-hairline), var(--idx-shadow-md);
}
.idx-module-card--core {
    grid-column: span 1;
    grid-row: span 1;
}
@media (min-width: 992px) {
    .idx-module-card--core { grid-column: span 2; grid-row: span 2; }
}

.idx-module-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-1_5);
}
.idx-module-card__id {
    display: flex;
    align-items: center;
    gap: 10px;
}
.idx-module-card__icon {
    width: 36px;
    height: 36px;
    color: var(--accent-color, var(--idx-fg-muted));
    flex-shrink: 0;
}
.idx-module-card__slug {
    font-family: var(--idx-font-mono);
    font-size: 12px;
    font-weight: var(--idx-weight-medium);
    color: var(--accent-color, var(--idx-fg-muted));
}
.idx-module-card__category {
    font-family: var(--idx-font-mono);
    font-size: 10px;
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
}
.idx-module-card__title {
    font-family: var(--idx-font-sans);
    font-size: 19px;
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    line-height: var(--idx-leading-tight);
    letter-spacing: var(--idx-tracking-tight);
    margin: 6px 0 2px;
}
.idx-module-card--core .idx-module-card__title {
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.03em;
}
.idx-module-card__body {
    font-size: var(--idx-text-sm);
    color: var(--idx-fg-muted);
    line-height: var(--idx-leading-snug);
    margin: 0;
    flex: 1;
}
.idx-module-card--core .idx-module-card__body { font-size: 15.5px; }

.idx-module-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--idx-space-3);
    padding-top: var(--idx-space-2);
    border-top: 1px solid var(--idx-border);
    margin-top: 6px;
}
.idx-metric .m-label {
    font-family: var(--idx-font-mono);
    font-size: 10px;
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: 3px;
}
.idx-metric .m-value {
    font-family: var(--idx-font-mono);
    font-size: 13px;
    font-weight: var(--idx-weight-medium);
    color: var(--idx-fg-display);
}

.idx-module-card--coming { opacity: 0.82; }
.idx-module-card--coming .idx-metric .m-value { color: var(--idx-fg-subtle); font-style: italic; }

/* Map module accents */
.idx-module-card[data-mod="admin"]    { --accent-color: var(--idx-mod-admin); }
.idx-module-card[data-mod="account"]  { --accent-color: var(--idx-mod-account); }
.idx-module-card[data-mod="bank"]     { --accent-color: var(--idx-mod-bank); }
.idx-module-card[data-mod="payroll"]  { --accent-color: var(--idx-mod-payroll); }
.idx-module-card[data-mod="asset"]    { --accent-color: var(--idx-mod-asset); }
.idx-module-card[data-mod="lease"]    { --accent-color: var(--idx-mod-lease); }
.idx-module-card[data-mod="prod"]     { --accent-color: var(--idx-mod-prod); }

/* =====================================================================
   BEAT 5 — GLOBAL / REGIONAL (paper, 2-column split)
   ===================================================================== */

.idx-global { background: var(--idx-bg); }
.idx-global__head { max-width: 760px; margin-bottom: var(--idx-space-6); }
.idx-global__head .eyebrow { margin-bottom: var(--idx-space-2); }
.idx-global__head h2 { margin: var(--idx-space-2) 0; }

.idx-global__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-6);
}
@media (min-width: 768px) { .idx-global__grid { grid-template-columns: 1fr 1fr; gap: var(--idx-space-8); } }

.idx-global__col h3 {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
    margin-bottom: var(--idx-space-2);
    font-weight: var(--idx-weight-medium);
}
.idx-global__col ul { list-style: none; padding: 0; margin: 0; }
.idx-global__col li {
    padding: 14px 0;
    border-bottom: 1px solid var(--idx-border);
    font-size: 15px;
    color: var(--idx-fg-display);
    display: flex;
    align-items: baseline;
    gap: 14px;
    line-height: var(--idx-leading-snug);
}
.idx-global__col li code {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-accent);
    background: var(--idx-accent-soft);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* =====================================================================
   BEAT 6 — PROOF (paper, editorial paragraph w/ mono callouts)
   ===================================================================== */

.idx-proof { background: var(--idx-surface-2); }

/* Two-column layout on wide screens — copy left, hash-chain visual
   right. Below 900px it stacks. The visual is decorative; on mobile
   we drop it so the text doesn't sit under a tall ornamental block. */
.idx-proof__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-5, 3rem);
    align-items: start;
}
@media (min-width: 900px) {
    .idx-proof__grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); }
}
.idx-proof__head { max-width: 720px; margin-bottom: var(--idx-space-4); }
.idx-proof__head .eyebrow { margin-bottom: var(--idx-space-2); }
.idx-proof__head h2 { margin: var(--idx-space-2) 0; }

.idx-proof__body {
    max-width: 720px;
    font-size: var(--idx-text-md);
    line-height: 1.65;
    color: var(--idx-fg-display);
}
.idx-proof__body code {
    font-family: var(--idx-font-mono);
    font-size: 0.875em;
    color: var(--idx-primary);
    background: var(--idx-primary-soft);
    padding: 2px 6px;
    border-radius: 3px;
}
.idx-proof__seals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--idx-space-2) var(--idx-space-4);
    margin-top: var(--idx-space-4);
    padding-top: var(--idx-space-3);
    border-top: 1px solid var(--idx-border);
}
.idx-proof__seal {
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
}

/* =====================================================================
   BEAT 7 — PRICING TEASER (paper-2, 2-col, no real plans)
   ===================================================================== */

.idx-pricing {
    background: var(--idx-bg);
    border-top: 1px solid var(--idx-border);
    border-bottom: 1px solid var(--idx-border);
}
.idx-pricing__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-4);
    align-items: start;
}
@media (min-width: 768px) { .idx-pricing__inner { grid-template-columns: 1fr 1fr; gap: var(--idx-space-6); } }

.idx-pricing__left .eyebrow { margin-bottom: var(--idx-space-2); }
.idx-pricing__left h2 { margin: var(--idx-space-2) 0 0; }
.idx-pricing__right .lead { margin-bottom: var(--idx-space-3); }

/* =====================================================================
   BEAT 8 — CTA BAND (dark, 2-col with clay vertical rule)
   ===================================================================== */

.idx-cta {
    background: var(--idx-bg-strong);
    color: var(--idx-fg-on-strong);
    padding-block: clamp(80px, 10vw, 128px);
}
.idx-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-4);
    align-items: center;
}
@media (min-width: 992px) {
    .idx-cta__grid { grid-template-columns: 1fr 1px 1fr; gap: var(--idx-space-8); }
}
.idx-cta__rule {
    display: none;
    width: 1px;
    height: 96px;
    background: var(--idx-accent);
}
@media (min-width: 992px) { .idx-cta__rule { display: block; } }
.idx-cta h2 {
    font-family: var(--idx-font-sans);
    color: var(--idx-fg-on-strong);
    margin: var(--idx-space-2) 0 0;
}
.idx-cta .eyebrow {
    color: var(--idx-accent);
    border-left-color: var(--idx-accent);
}
.idx-cta p {
    color: rgba(247, 244, 237, 0.78);
    font-size: var(--idx-text-md);
    line-height: var(--idx-leading-snug);
    margin-bottom: var(--idx-space-3);
    max-width: 520px;
}
.idx-cta .btn-primary {
    --bs-btn-bg: var(--idx-paper);
    --bs-btn-border-color: var(--idx-paper);
    --bs-btn-color: var(--idx-ink-1000);
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-hover-color: var(--idx-ink-1000);
}
.idx-cta .btn-link-arrow { color: var(--idx-fg-on-strong); }
.idx-cta .btn-link-arrow:hover { color: var(--idx-accent); }

/* =====================================================================
   FOOTER
   ===================================================================== */

.idx-footer {
    background: var(--idx-bg-subtle);
    color: var(--idx-fg-muted);
    padding-block: var(--idx-space-12) var(--idx-space-4);
}
.idx-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-4);
    margin-bottom: var(--idx-space-6);
}
@media (min-width: 768px) {
    .idx-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--idx-space-6); }
}
.idx-footer h5 {
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    font-weight: var(--idx-weight-medium);
    color: var(--idx-fg-display);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: var(--idx-space-2);
}
.idx-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.idx-footer ul a {
    color: var(--idx-fg-muted);
    font-size: var(--idx-text-sm);
}
.idx-footer ul a:hover { color: var(--idx-fg-display); }
.idx-footer__brand p {
    margin-top: var(--idx-space-2);
    font-size: var(--idx-text-sm);
    max-width: 32ch;
}
.idx-footer__brand .demo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--idx-space-2);
    color: var(--idx-primary);
    font-weight: var(--idx-weight-medium);
    font-size: var(--idx-text-sm);
}
.idx-footer__bottom {
    border-top: 1px solid var(--idx-border);
    padding-top: var(--idx-space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-2);
    font-size: var(--idx-text-xs);
    color: var(--idx-fg-subtle);
    font-family: var(--idx-font-mono);
}

/* ---------- Dropdown polish ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--idx-surface);
    --bs-dropdown-color: var(--idx-fg);
    --bs-dropdown-link-color: var(--idx-fg-display);
    --bs-dropdown-link-hover-bg: var(--idx-bg-subtle);
    --bs-dropdown-link-hover-color: var(--idx-fg-display);
    --bs-dropdown-link-active-bg: var(--idx-primary-soft);
    --bs-dropdown-link-active-color: var(--idx-primary);
    --bs-dropdown-border-color: var(--idx-border);
    --bs-dropdown-border-radius: var(--idx-radius);
    box-shadow: var(--idx-shadow-md);
    padding: 6px;
    font-size: var(--idx-text-sm);
}
.dropdown-item { border-radius: var(--idx-radius-sm); padding: 8px 12px; }

/* =====================================================================
   COOKIES CONSENT BANNER
   ===================================================================== */
.idx-cookies {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(880px, calc(100vw - 32px));
    background: var(--idx-surface);
    border: 1px solid var(--idx-border-strong);
    border-radius: var(--idx-radius-lg);
    box-shadow: var(--idx-shadow-lift);
    padding: var(--idx-space-2_5, 1.25rem) var(--idx-space-3);
    z-index: 1050;
    animation: idx-cookies-in 280ms var(--idx-ease-out);
}
@keyframes idx-cookies-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.idx-cookies__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--idx-space-2);
    align-items: center;
}
@media (min-width: 720px) {
    .idx-cookies__inner { grid-template-columns: 1fr auto; gap: var(--idx-space-3); }
}
.idx-cookies__msg {
    font-size: var(--idx-text-sm);
    color: var(--idx-fg-muted);
    margin: 0;
    line-height: 1.5;
}
.idx-cookies__actions {
    display: flex;
    align-items: center;
    gap: var(--idx-space-2);
    justify-self: end;
}
.idx-cookies__link {
    color: var(--idx-fg-muted);
    font-size: var(--idx-text-sm);
    font-weight: var(--idx-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--idx-border-strong);
}
.idx-cookies__link:hover { color: var(--idx-fg-display); text-decoration-color: var(--idx-primary); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   MINI-LEDGER PREVIEW — shown inside the doxadmin (core) module card.
   Schematic, monospaced mock-up of the "single ledger of record" so the
   spotlight card has something visual without being a real chart.
   ===================================================================== */
.idx-ledger-mini {
    margin: var(--idx-space-3) 0 0;
    padding: var(--idx-space-2);
    background: var(--idx-bg-subtle);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius);
    font-family: var(--idx-font-mono);
    font-size: 11.5px;
    color: var(--idx-fg-display);
    overflow: hidden;
}
.idx-ledger-mini__head,
.idx-ledger-mini__row {
    display: grid;
    grid-template-columns: 52px 1fr 80px 80px;
    gap: 8px;
    padding: 6px 10px;
    align-items: center;
}
.idx-ledger-mini__head {
    color: var(--idx-fg-subtle);
    font-size: 9.5px;
    letter-spacing: var(--idx-tracking-eyebrow);
    text-transform: uppercase;
    border-bottom: 1px solid var(--idx-border);
}
.idx-ledger-mini__row + .idx-ledger-mini__row,
.idx-ledger-mini__head + .idx-ledger-mini__row { border-top: 1px dashed var(--idx-border); }
.idx-ledger-mini__row .ts  { color: var(--idx-fg-subtle); }
.idx-ledger-mini__row .num { text-align: right; }
.idx-ledger-mini__row .num.pos { color: var(--idx-mod-account, var(--idx-primary)); font-weight: 600; }
.idx-ledger-mini__foot {
    margin-top: 4px;
    padding: 6px 10px;
    border-top: 1px solid var(--idx-border);
    color: var(--idx-fg-subtle);
    font-size: 10.5px;
    display: flex; align-items: center; gap: 6px;
}
.idx-ledger-mini__foot .bi { color: var(--idx-primary); }

/* =====================================================================
   HASH CHAIN VISUAL — right side of the TRUST BY DESIGN beat.
   Decorative, hidden on mobile (the copy already tells the story).
   ===================================================================== */
.idx-proof__chain {
    display: none; /* show on wide screens only */
}
@media (min-width: 900px) {
    .idx-proof__chain {
        display: block;
        align-self: start;
        padding: var(--idx-space-3);
        background: var(--idx-surface);
        border: 1px solid var(--idx-border);
        border-radius: var(--idx-radius);
        font-family: var(--idx-font-mono);
    }
}
.idx-chain__label {
    font-size: 10.5px; color: var(--idx-fg-subtle);
    text-transform: uppercase; letter-spacing: var(--idx-tracking-eyebrow);
    margin-bottom: var(--idx-space-2);
}
.idx-chain__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0;
}
.idx-chain__block {
    position: relative;
    padding: 10px 12px;
    background: var(--idx-bg-subtle);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-sm);
}
.idx-chain__block + .idx-chain__block { margin-top: 22px; }
/* Connecting arrow drawn with a pseudo-element between blocks. */
.idx-chain__block + .idx-chain__block::before {
    content: "↓";
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    color: var(--idx-fg-subtle);
    font-size: 14px;
    line-height: 1;
}
.idx-chain__block.is-fresh {
    border-color: var(--idx-primary);
    box-shadow: 0 4px 20px -8px rgba(26,52,120,.28);
}
.idx-chain__row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11.5px;
    color: var(--idx-fg-display);
    margin-bottom: 4px;
}
.idx-chain__row .t { color: var(--idx-fg-subtle); }
.idx-chain__row .h { letter-spacing: 0.5px; }
.idx-chain__row .h-prev { color: var(--idx-fg-muted); }
.idx-chain__row .h-new  { color: var(--idx-primary); font-weight: 600; }
.idx-chain__meta {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--idx-fg-subtle);
    border-top: 1px dashed var(--idx-border);
    padding-top: 6px;
}
.idx-chain__caption {
    margin-top: var(--idx-space-2);
    font-size: 10.5px;
    color: var(--idx-fg-subtle);
    display: flex; align-items: center; gap: 6px;
}
.idx-chain__caption .bi { color: var(--idx-mod-account, var(--idx-primary)); }


/* =====================================================================
   BLOG — Editorial system
   --------------------------------------------------------------------
   Mirrors the /modulos vocabulary (.idx-hero + .eyebrow + asymmetric
   grid + .idx-*-card__top split) but on the blog's own slate-tone
   accent (--idx-blog-accent). The page beats:

     1. .idx-hero          editorial promise (shared site hero)
     2. .idx-blog-filter   chip strip (tag filter)
     3. .idx-blog-posts    grid of .idx-blog-card on bg-subtle
     4. .idx-blog-pager    centered numeric pager
     5. .idx-cta           dark close (reused, not duplicated)

   For the single post:
     6. .idx-blog-show-hero  back link + tags + h1 + lede + meta
     7. .idx-blog-cover      16:9 figure outside the reading column
     8. .idx-blog-body       rendered Markdown (typography rules)
     9. .idx-blog-footnote   article footer (tags + locales)
    10. .idx-blog-related    sibling grid (reuses .idx-blog-card)

   Density: tighter than reading surfaces (Linear / Vercel blog), but
   still text-led — 2 columns even at desktop so excerpts breathe.
   No box shadows. Hover = -2px translateY + slate border. The blog
   should feel like an editor's wall, not a SaaS dashboard.
   ===================================================================== */

/* ---- Filter chips ---- */
.idx-blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--idx-space-5);
}
.idx-blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--idx-border);
    background: transparent;
    color: var(--idx-fg-muted);
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    font-weight: var(--idx-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    text-decoration: none;
    transition: background var(--idx-dur-fast) var(--idx-ease),
                color var(--idx-dur-fast) var(--idx-ease),
                border-color var(--idx-dur-fast) var(--idx-ease);
    line-height: 1;
}
.idx-blog-chip:hover {
    color: var(--idx-fg-display);
    border-color: var(--idx-blog-accent);
}
.idx-blog-chip.is-active {
    background: var(--idx-fg-display);
    color: var(--idx-bg);
    border-color: var(--idx-fg-display);
}
.idx-blog-chip.is-active:hover {
    color: var(--idx-bg);
}

/* ---- Posts section ---- */
.idx-blog-posts { background: var(--idx-bg-subtle); }

.idx-blog-grid {
    display: grid;
    gap: var(--idx-space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .idx-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--idx-space-4);
    }
    /* Single-post case: the 2-col template would leave the right column
       empty. Collapse to 1 col and cap width so the lone card doesn't
       spread across the full container — reads as "featured post". */
    .idx-blog-grid:has(> .idx-blog-card:only-child) {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin-inline: auto;
    }
}

/* ---- Card ---- */
.idx-blog-card {
    background: var(--idx-surface);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--idx-dur) var(--idx-ease),
                border-color var(--idx-dur) var(--idx-ease);
    position: relative;
}
.idx-blog-card:hover {
    transform: translateY(-2px);
    border-color: var(--idx-blog-accent);
}
.idx-blog-card a { color: inherit; text-decoration: none; }
.idx-blog-card a:hover { color: inherit; }

.idx-blog-card__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--idx-surface-2);
    border-bottom: 1px solid var(--idx-border);
}
.idx-blog-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--idx-ease);
}
.idx-blog-card:hover .idx-blog-card__cover img {
    transform: scale(1.03);
}

.idx-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--idx-space-1_5);
    padding: var(--idx-space-4);
    flex: 1;
}
@media (min-width: 992px) {
    .idx-blog-card__body { padding: var(--idx-space-3) var(--idx-space-3) var(--idx-space-2); }
}

.idx-blog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-2);
}
.idx-blog-card__tags {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    font-weight: var(--idx-weight-medium);
    color: var(--idx-blog-accent);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.idx-blog-card__read {
    font-family: var(--idx-font-mono);
    font-size: 10px;
    font-weight: var(--idx-weight-medium);
    color: var(--idx-fg-subtle);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    white-space: nowrap;
    flex-shrink: 0;
}

.idx-blog-card__title {
    font-family: var(--idx-font-sans);
    font-size: 1.5rem;
    font-weight: var(--idx-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--idx-tracking-tight);
    color: var(--idx-fg-display);
    margin: 6px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 992px) { .idx-blog-card__title { font-size: 1.625rem; } }
.idx-blog-card__title a { color: var(--idx-fg-display); }

.idx-blog-card__excerpt {
    font-size: var(--idx-text-sm);
    line-height: 1.55;
    color: var(--idx-fg-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.idx-blog-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-2);
    margin-top: var(--idx-space-2);
    padding-top: var(--idx-space-2);
    border-top: 1px solid var(--idx-border);
    flex-wrap: wrap;
}
.idx-blog-card__meta {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-fg-subtle);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    min-width: 0;
}
.idx-blog-card__meta strong {
    color: var(--idx-fg-muted);
    font-weight: var(--idx-weight-medium);
}
.idx-blog-card__meta .sep { opacity: 0.45; }

.idx-blog-card__cta {
    color: var(--idx-blog-accent);
    font-family: var(--idx-font-sans);
    font-size: var(--idx-text-sm);
    font-weight: var(--idx-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: color var(--idx-dur-fast) var(--idx-ease);
}
.idx-blog-card__cta .bi {
    transition: transform var(--idx-dur) var(--idx-ease);
}
.idx-blog-card:hover .idx-blog-card__cta {
    color: var(--idx-fg-display);
}
.idx-blog-card:hover .idx-blog-card__cta .bi {
    transform: translateX(3px);
}

/* ---- Empty state for the tag filter ---- */
.idx-blog-empty-inline {
    max-width: 480px;
    margin: var(--idx-space-6) auto;
    text-align: center;
    color: var(--idx-fg-muted);
    font-size: var(--idx-text-md);
}
.idx-blog-empty-inline a { color: var(--idx-blog-accent); }

/* ---- Pager ---- */
.idx-blog-pager {
    display: flex;
    justify-content: center;
    gap: var(--idx-space-4);
    margin-top: var(--idx-space-6);
    align-items: center;
    color: var(--idx-fg-muted);
    font-size: var(--idx-text-sm);
}
.idx-blog-pager .btn { border-radius: var(--idx-radius); }
.idx-blog-pager__counter {
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
}

/* =====================================================================
   BLOG — Single post (show)
   ===================================================================== */

.idx-blog-show-hero {
    background: var(--idx-bg);
    padding-block: clamp(72px, 9vw, 112px) clamp(40px, 5vw, 56px);
    position: relative;
}
.idx-blog-show-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--idx-grid);
    background-size: 8px 8px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 55%);
            mask-image: radial-gradient(ellipse at 30% 0%, black 0%, transparent 55%);
    opacity: 0.45;
    pointer-events: none;
}
.idx-blog-show-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.idx-blog-show-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--idx-fg-muted);
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    font-weight: var(--idx-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    text-decoration: none;
    margin-bottom: var(--idx-space-3);
    transition: color var(--idx-dur-fast) var(--idx-ease);
}
.idx-blog-show-hero__back:hover { color: var(--idx-fg-display); }
.idx-blog-show-hero__back .bi {
    transition: transform var(--idx-dur) var(--idx-ease);
}
.idx-blog-show-hero__back:hover .bi { transform: translateX(-3px); }

.idx-blog-show-hero__tags {
    margin-bottom: var(--idx-space-3);
}

.idx-blog-show-hero__title {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: var(--idx-tracking-display);
    color: var(--idx-fg-display);
    margin: 0 0 var(--idx-space-3);
    text-wrap: balance;
}

.idx-blog-show-hero__lede {
    font-family: var(--idx-font-serif);
    font-weight: 400;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.45;
    color: var(--idx-fg-muted);
    margin: 0 0 var(--idx-space-4);
    max-width: 680px;
}

.idx-blog-show-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--idx-space-2);
    font-size: var(--idx-text-sm);
    color: var(--idx-fg-subtle);
}
.idx-blog-show-hero__meta strong {
    color: var(--idx-fg-display);
    font-weight: var(--idx-weight-medium);
}
.idx-blog-show-hero__meta .sep { opacity: 0.45; }
.idx-blog-show-hero__meta .read-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--idx-border);
    border-radius: 999px;
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
}

/* ---- Cover (outside the reading column, slightly wider) ---- */
.idx-blog-cover-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: var(--idx-container-pad);
    padding-bottom: var(--idx-space-5);
}
.idx-blog-cover {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--idx-radius-lg);
    background: var(--idx-surface-2);
    border: 1px solid var(--idx-border);
}
.idx-blog-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Body (Markdown) ---- */
.idx-blog-body {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--idx-font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--idx-fg);
}
.idx-blog-body > *:first-child { margin-top: 0; }
.idx-blog-body p {
    margin: 0 0 1.25em;
    color: var(--idx-fg);
}
.idx-blog-body h2 {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: var(--idx-tracking-tight);
    color: var(--idx-fg-display);
    margin: 2.5em 0 0.6em;
    position: relative;
}
.idx-blog-body h2::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    background: var(--idx-blog-bar);
    margin-bottom: 0.65em;
    border-radius: 1px;
}
.idx-blog-body h3 {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--idx-fg-display);
    margin: 2em 0 0.5em;
}
.idx-blog-body h4 {
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    font-size: 1.0625rem;
    color: var(--idx-fg-display);
    margin: 1.75em 0 0.4em;
}
.idx-blog-body a {
    color: var(--idx-blog-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--idx-dur-fast) var(--idx-ease);
}
.idx-blog-body a:hover { color: var(--idx-fg-display); }
.idx-blog-body strong {
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
}
.idx-blog-body em { font-style: italic; }
.idx-blog-body ul,
.idx-blog-body ol {
    margin: 1.25em 0;
    padding-left: 1.5em;
}
.idx-blog-body li {
    margin: 0.5em 0;
    line-height: 1.7;
}
.idx-blog-body li > p { margin-bottom: 0.5em; }
/* Blockquote acts as an inline callout — the only "graphic" the author
   has at hand in plain Markdown, so we make it count. Subtle slate-tinted
   surface, big decorative quote glyph at the corner, generous breathing
   room. Works for both quotes and "tip / dato" blocks. */
.idx-blog-body blockquote {
    position: relative;
    margin: 2.25em 0;
    padding: 1.5em 1.75em 1.5em 2em;
    background: var(--idx-bg-subtle);
    border-left: 4px solid var(--idx-blog-accent);
    border-radius: 0 var(--idx-radius) var(--idx-radius) 0;
    font-family: var(--idx-font-serif);
    font-style: italic;
    font-size: 1.125rem;
    color: var(--idx-fg);
    line-height: 1.55;
}
.idx-blog-body blockquote::before {
    content: "\201C";          /* opening curly double-quote */
    position: absolute;
    top: -0.2em;
    right: 0.4em;
    font-family: var(--idx-font-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--idx-blog-accent);
    opacity: 0.18;
    pointer-events: none;
}
.idx-blog-body blockquote p { margin-bottom: 0.75em; }
.idx-blog-body blockquote p:last-child { margin-bottom: 0; }
.idx-blog-body blockquote strong {
    font-style: normal;
    font-family: var(--idx-font-sans);
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-blog-accent);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    font-size: 0.78em;
    display: inline-block;
    margin-right: 0.3em;
}
.idx-blog-body code {
    font-family: var(--idx-font-mono);
    font-size: 0.92em;
    background: var(--idx-surface-2);
    padding: 0.15em 0.4em;
    border-radius: var(--idx-radius-sm);
    color: var(--idx-fg-display);
}
.idx-blog-body pre {
    background: var(--idx-fg-display);
    border-radius: var(--idx-radius);
    padding: 1.25em;
    overflow-x: auto;
    margin: 1.75em 0;
    font-family: var(--idx-font-mono);
    font-size: 0.9em;
    line-height: 1.55;
    color: var(--idx-bg);
}
.idx-blog-body pre code {
    background: transparent;
    padding: 0;
    color: var(--idx-bg);
    font-size: inherit;
}
.idx-blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--idx-radius);
    margin: 2em auto;
    display: block;
}
/* Markdown paragraph wrapping an image (Parsedown emits <p><img/></p>) —
   promote it visually to a figure: subtle slate-tinted frame, centered,
   generous breathing room. The immediately following <p> (when written in
   italics by the author) is treated as the caption: mono small, slate,
   centered. */
.idx-blog-body p:has(> img:only-child) {
    margin: 2.5em 0 0.5em;
    padding: clamp(16px, 3vw, 32px);
    background: var(--idx-bg-subtle);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-lg);
    text-align: center;
}
.idx-blog-body p:has(> img:only-child) > img {
    margin: 0 auto;
    max-width: 480px;   /* SVG charts read best at this width on long-form */
    width: 100%;
}
.idx-blog-body p:has(> img:only-child) + p > em:only-child {
    display: block;
    font-style: normal;
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    color: var(--idx-fg-muted);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 560px;
    margin: 0 auto 2.5em;
}

/* Per-post inline infographic injected by the view (see blog_show.php
   $chartMap). 2-column layout on wide screens: SVG left, caption with
   legend right. Stacks on mobile. Subtle slate frame matches the
   blockquote treatment so the post has one consistent "highlight"
   visual language. */
.idx-blog-chart {
    margin: 3em 0;
    padding: clamp(20px, 3vw, 36px);
    background: var(--idx-bg-subtle);
    border: 1px solid var(--idx-border);
    border-radius: var(--idx-radius-lg);
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 640px) {
    .idx-blog-chart {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    }
}
.idx-blog-chart img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
}
.idx-blog-chart figcaption {
    font-family: var(--idx-font-sans);
    font-size: var(--idx-text-sm);
    color: var(--idx-fg);
    line-height: 1.55;
    text-align: left;
}
.idx-blog-chart figcaption strong {
    display: block;
    font-family: var(--idx-font-mono);
    font-size: var(--idx-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-blog-accent);
    margin-bottom: 0.6em;
    font-weight: var(--idx-weight-semibold);
}
.idx-blog-chart figcaption ul {
    list-style: none;
    padding: 0;
    margin: 0.5em 0 0.75em;
    display: grid;
    gap: 0.45em;
}
.idx-blog-chart figcaption li {
    display: grid;
    grid-template-columns: 14px 38px 1fr;
    align-items: baseline;
    gap: 10px;
    font-size: var(--idx-text-sm);
    line-height: 1.4;
}
.idx-blog-chart figcaption li::before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--swatch, var(--idx-blog-accent));
    border-radius: 2px;
    align-self: center;
}
.idx-blog-chart figcaption li .pct {
    font-family: var(--idx-font-mono);
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    font-size: 0.92em;
}
.idx-blog-chart figcaption small {
    display: block;
    margin-top: 1em;
    font-family: var(--idx-font-mono);
    font-size: 11px;
    color: var(--idx-fg-subtle);
    font-style: italic;
    line-height: 1.5;
}
.idx-blog-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75em 0;
    font-size: var(--idx-text-sm);
    font-family: var(--idx-font-sans);
}
.idx-blog-body th,
.idx-blog-body td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--idx-border);
    text-align: left;
}
.idx-blog-body th {
    background: var(--idx-surface-2);
    font-weight: var(--idx-weight-semibold);
    color: var(--idx-fg-display);
    font-family: var(--idx-font-mono);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
}
.idx-blog-body hr {
    border: 0;
    height: 32px;
    margin: 2.5em 0;
    text-align: center;
    position: relative;
}
.idx-blog-body hr::after {
    content: "\25C6";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--idx-blog-accent);
    font-size: 12px;
    opacity: 0.6;
}

/* ---- Article footnote (tags + locales) ---- */
.idx-blog-footnote {
    max-width: 720px;
    margin: var(--idx-space-6) auto 0;
    padding-top: var(--idx-space-4);
    border-top: 1px solid var(--idx-border);
    display: flex;
    flex-direction: column;
    gap: var(--idx-space-3);
}
.idx-blog-footnote__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--idx-space-3);
    flex-wrap: wrap;
    font-size: var(--idx-text-sm);
    color: var(--idx-fg-subtle);
}
.idx-blog-footnote__tags {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.idx-blog-footnote__label {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
    color: var(--idx-fg-subtle);
    margin-right: 4px;
}
.idx-blog-footnote__updated {
    font-family: var(--idx-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--idx-tracking-eyebrow);
}
.idx-blog-footnote__locales {
    font-size: var(--idx-text-sm);
    color: var(--idx-fg-subtle);
    line-height: 1.5;
}
.idx-blog-footnote__locales .bi { color: var(--idx-fg-muted); margin-right: 6px; }
.idx-blog-footnote__locales a {
    color: var(--idx-blog-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: var(--idx-weight-medium);
    margin: 0 4px;
}
.idx-blog-footnote__locales a:hover { color: var(--idx-fg-display); }

/* ---- Related ---- */
.idx-blog-related {
    background: var(--idx-bg-subtle);
}
.idx-blog-related__head {
    margin-bottom: var(--idx-space-5);
    max-width: 720px;
}
.idx-blog-related__head .eyebrow {
    margin-bottom: var(--idx-space-2);
}
.idx-blog-related__head h2 {
    margin: 0;
    font-size: var(--idx-text-2xl);
    color: var(--idx-fg-display);
}