/* ============================================================
   EXPERTSURE DESIGN SYSTEM v2.0 (enqueued asset since 2026-07-02)
   Single source of truth for design tokens & component styles.
   Docs: docs/design-system.md
   ============================================================ */

/* --- DESIGN TOKENS --- */
:root {
    /* Brand */
    --es-primary: #0d47a1;
    --es-primary-light: #1565c0;

    /* Text */
    --es-text: #1a1a1a;
    --es-text-secondary: #64748b;
    --es-text-muted: #666;

    /* Surfaces */
    --es-card-bg: #f8fafc;
    --es-card-border: #e2e8f0;
    --es-border-light: #e0e0e0;
    --es-surface-light: #f9fafb;

    /* Semantic: pros/cons */
    --es-pro: #16a34a;
    --es-pro-bg: #f8fdf8;
    --es-pro-border: #dcfce7;
    --es-con: #dc2626;
    --es-con-bg: #fef8f8;
    --es-con-border: #fee2e2;

    /* Trustpilot */
    --es-star-fill: #00b67a;
    --es-star-empty: #dcdce6;

    /* Type scale (1.25 ratio) */
    --es-text-xs: 11px;
    --es-text-sm: 13px;
    --es-text-base: 15px;
    --es-text-lg: 17px;
    --es-text-xl: 22px;
    --es-text-2xl: 28px;
    --es-text-3xl: 32px;

    /* Spacing (4px base) */
    --es-1: 4px;
    --es-2: 8px;
    --es-3: 12px;
    --es-4: 16px;
    --es-5: 20px;
    --es-6: 24px;
    --es-8: 32px;
    --es-10: 40px;
    --es-16: 64px;

    /* Radii */
    --es-radius-sm: 4px;
    --es-radius: 8px;
    --es-radius-lg: 10px;

    /* Extended palette (tokenised from hardcoded values) */
    --es-table-header-bg: #f1f5f9;
    --es-table-header-text: #1e293b;
    --es-table-cell: #475569;
    --es-table-text: #334155;
    --es-highlight-bg: #f0f4ff;
    --es-link: #2563eb;
    --es-accent-blue: #3b82f6;
    --es-text-caption: #555;

    /* Quick Picks category colours */
    --es-qp-purple: #7c3aed;
    --es-qp-orange: #ea580c;

    /* Typography */
    --es-heading-font: 'Poppins', sans-serif;

    /* Transitions */
    --es-transition-fast: 0.15s ease;
    --es-transition-base: 0.25s ease;
    --es-focus-ring: rgba(13, 71, 161, 0.25);

    /* Inline Callout Box */
    --es-callout-info-bg: #eff6ff;
    --es-callout-info-border: #bfdbfe;
    --es-callout-info-label: #1e3a8a;
    --es-callout-warn-bg: #fff1f2;
    --es-callout-warn-border: #fecdd3;
    --es-callout-warn-label: #9f1239;
}

/* Featured image constraint — prevent overflow on small images */
.brxe-image img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   COMPONENT 1: Provider Header Card
   Usage: Every numbered entry in a listicle guide.
   ============================================================ */
.es-provider-card {
    border-top: 3px solid var(--es-primary);
    padding-top: var(--es-8);
    margin-top: var(--es-16);
    margin-bottom: var(--es-5);
}
.es-provider-card__inner {
    display: flex;
    align-items: center;
    gap: var(--es-4);
    flex-wrap: wrap;
}
.es-number-badge {
    background: var(--es-primary);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.es-provider-card__content {
    flex: 1;
    min-width: 200px;
}
.es-provider-name {
    font-size: var(--es-text-3xl);
    font-weight: 800;
    color: var(--es-text);
    margin: 0 0 var(--es-1) 0;
    padding: 0;
    border: none;
    line-height: 1.2;
}
.es-provider-tagline {
    font-size: var(--es-text-base);
    color: var(--es-text-secondary);
}
.es-trustpilot-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--es-1);
}
.es-trustpilot-stars__filled {
    color: var(--es-star-fill);
    font-size: 16px;
    letter-spacing: 1px;
}
.es-trustpilot-stars__empty {
    color: var(--es-star-empty);
}
.es-trustpilot-stars__label {
    font-size: var(--es-text-sm);
    color: var(--es-text-muted);
}

/* ============================================================
   COMPONENT 2: Editor's Pick Badge
   Usage: Max 1 per listicle. Inside heading or Quick Picks card.
   ============================================================ */
.es-badge-pick {
    background: var(--es-primary);
    color: #fff;
    font-size: var(--es-text-xs);
    padding: 3px 10px;
    border-radius: var(--es-radius-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    vertical-align: middle;
    text-transform: uppercase;
}
.es-badge-pick--sm {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 6px;
}

/* ============================================================
   COMPONENT 3: Quick Picks Box (v2)
   Usage: Every listicle with 5+ entries. After intro, before TOC.
   ============================================================ */
.es-quick-picks {
    margin-bottom: var(--es-8);
}
.es-quick-picks__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--es-4);
    color: var(--es-text);
}
.es-quick-picks__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--es-4);
}
@media (max-width: 768px) {
    .es-quick-picks__grid {
        gap: var(--es-3);
    }
    .es-qp-card {
        padding: var(--es-4);
    }
    .es-qp-stat {
        font-size: 18px;
    }
    .es-verdict__header {
        gap: var(--es-3);
    }
    .es-verdict-score {
        width: 64px;
        height: 64px;
    }
    .es-verdict-score__value {
        font-size: var(--es-text-xl);
    }
    .es-stat-grid {
        gap: var(--es-3);
    }
}
@media (max-width: 600px) {
    .es-quick-picks__grid {
        grid-template-columns: 1fr;
    }
}
.es-qp-card {
    background: #fff;
    border-radius: var(--es-radius);
    padding: var(--es-5);
    border: 1px solid var(--es-border-light);
    display: flex;
    flex-direction: column;
}
.es-qp-card--featured {
    border: 2px solid var(--es-primary);
}
.es-qp-card__category {
    font-size: var(--es-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--es-2);
}
.es-qp-card__provider {
    font-weight: 700;
    font-size: var(--es-text-lg);
    margin-bottom: 6px;
}
.es-qp-stat {
    font-size: var(--es-text-xl);
    font-weight: 800;
    color: var(--es-primary);
    margin-bottom: 6px;
}
.es-qp-stat__label {
    font-size: var(--es-text-sm);
    font-weight: 400;
    color: var(--es-text-muted);
}
.es-qp-card__features {
    font-size: var(--es-text-sm);
    color: var(--es-text-caption);
    margin-bottom: var(--es-3);
}
.es-qp-link {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    font-size: var(--es-text-sm);
    font-weight: 600;
    color: var(--es-primary);
    text-decoration: none;
    border: 1px solid var(--es-primary);
    padding: 6px var(--es-4);
    border-radius: 5px;
}
.es-qp-link:hover {
    background: var(--es-primary);
    color: #fff;
}

/* ============================================================
   COMPONENT 4: AppWiki CTA Banner
   Usage: After monetised provider sections. Max 1 per provider.
   ============================================================ */
.es-cta-banner {
    font-family: 'Poppins', 'Noto Sans', sans-serif;
    background: linear-gradient(135deg, var(--es-primary) 0%, var(--es-primary-light) 100%);
    border-radius: var(--es-radius-lg);
    padding: var(--es-6) 28px;
    margin-bottom: 28px;
    color: #fff;
}
.es-cta-banner__label {
    font-size: var(--es-text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 6px;
}
.es-cta-banner__headline {
    font-size: var(--es-text-xl);
    font-weight: 700;
    margin-bottom: var(--es-3);
}
.es-cta-btn {
    display: inline-block;
    background: #fff;
    color: var(--es-primary);
    font-weight: 700;
    padding: var(--es-3) 28px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
}
.es-cta-btn:hover {
    background: var(--es-highlight-bg);
}

/* Hero variant: white card with blue accent (avoids stacking with quote CTA) */
.es-cta-banner--hero {
    background: #fff;
    border: 1px solid var(--es-border-light);
    border-left: 4px solid var(--es-primary);
    color: var(--es-text);
}
.es-cta-banner--hero .es-cta-banner__label {
    color: var(--es-primary);
    opacity: 1;
}
.es-cta-banner--hero .es-cta-banner__headline {
    color: var(--es-text);
}
.es-cta-banner--hero .es-cta-btn {
    background: var(--es-primary);
    color: #fff;
}
.es-cta-banner--hero .es-cta-btn:hover {
    background: var(--es-primary-light);
}


/* ============================================================
   COMPONENT 5: Pros & Cons (v2 — Separated Two-Column)
   Usage: Every provider section in comparison/listicle guides.
   ============================================================ */
.es-pros-cons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--es-4);
    margin: var(--es-5) 0 28px 0;
    font-size: var(--es-text-base);
    line-height: 1.6;
}
.es-pros {
    background: var(--es-pro-bg);
    padding: var(--es-4) var(--es-5);
    border: 1px solid var(--es-pro-border);
    border-radius: var(--es-radius);
}
.es-cons {
    background: var(--es-con-bg);
    padding: var(--es-4) var(--es-5);
    border: 1px solid var(--es-con-border);
    border-radius: var(--es-radius);
}
.es-pros__header {
    font-weight: 700;
    font-size: var(--es-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-pro);
    margin-bottom: 10px;
    padding-bottom: var(--es-2);
    border-bottom: 1px solid var(--es-pro-border);
}
.es-cons__header {
    font-weight: 700;
    font-size: var(--es-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-con);
    margin-bottom: 10px;
    padding-bottom: var(--es-2);
    border-bottom: 1px solid var(--es-con-border);
}
.es-pc-item {
    display: flex;
    gap: var(--es-2);
    padding: 6px 0;
}
.es-pc-item__icon {
    font-size: 16px;
    flex-shrink: 0;
}
.es-pc-item__icon--pro {
    color: var(--es-pro);
}
.es-pc-item__icon--con {
    color: var(--es-con);
}
.es-pc-item__text {
    font-weight: 500;
}

/* ============================================================
   COMPONENT 5b: Pros/Cons Neutral Variant
   Usage: vs / comparison pages where both columns are positive.
   Removes green/red so the visual doesn't read as "good vs bad".
   Add `es-pros-cons--neutral` to the parent .es-pros-cons div.
   ============================================================ */
.es-pros-cons--neutral .es-pros,
.es-pros-cons--neutral .es-cons {
    background: var(--es-card-bg);
    border-color: var(--es-card-border);
}
.es-pros-cons--neutral .es-pros__header,
.es-pros-cons--neutral .es-cons__header {
    color: var(--es-text);
    border-bottom-color: var(--es-card-border);
}
.es-pros-cons--neutral .es-pc-item__icon--pro,
.es-pros-cons--neutral .es-pc-item__icon--con {
    color: var(--es-primary);
}

/* ============================================================
   COMPONENT 6: Verdict Box (NEW)
   Usage: Single-provider reviews. Before MVF form embed.
   ============================================================ */
.es-verdict {
    border: 2px solid var(--es-card-border);
    border-radius: var(--es-radius-lg);
    padding: var(--es-6) 28px;
    margin: var(--es-10) 0;
    background: #fff;
}
.es-verdict__header {
    display: flex;
    align-items: flex-start;
    gap: var(--es-5);
    flex-wrap: wrap;
    margin-bottom: var(--es-5);
}
.es-verdict-score {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--es-primary);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.es-verdict-score__value {
    font-size: var(--es-text-2xl);
    font-weight: 800;
    line-height: 1;
}
.es-verdict-score__max {
    font-size: var(--es-text-xs);
    opacity: 0.8;
}
.es-verdict-meta {
    flex: 1;
    min-width: 200px;
}
.es-verdict-meta__name {
    font-size: var(--es-text-xl);
    font-weight: 700;
    color: var(--es-text);
    margin-bottom: var(--es-2);
}
.es-verdict-meta__detail {
    font-size: var(--es-text-base);
    color: var(--es-text-secondary);
    padding: var(--es-1) 0;
}
.es-verdict__pros-cons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-3) var(--es-5);
    margin-bottom: var(--es-5);
    font-size: var(--es-text-sm);
}
.es-verdict__pro {
    color: var(--es-pro);
}
.es-verdict__con {
    color: var(--es-con);
}
.es-verdict-summary {
    font-size: var(--es-text-base);
    line-height: 1.6;
    color: var(--es-text);
    margin-bottom: var(--es-5);
    padding-top: var(--es-4);
    border-top: 1px solid var(--es-card-border);
}
.es-verdict-summary__label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--es-text-xs);
    letter-spacing: 0.5px;
    color: var(--es-text-secondary);
    margin-bottom: var(--es-2);
}
.es-verdict__actions {
    display: flex;
    gap: var(--es-3);
    flex-wrap: wrap;
}
.es-verdict__cta {
    display: inline-block;
    padding: var(--es-3) var(--es-6);
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--es-text-base);
    text-decoration: none;
}
.es-verdict__cta--primary {
    background: var(--es-primary);
    color: #fff;
}
.es-verdict__cta--primary:hover {
    background: var(--es-primary-light);
}
.es-verdict__cta--secondary {
    border: 2px solid var(--es-primary);
    color: var(--es-primary);
    background: #fff;
}
.es-verdict__cta--secondary:hover {
    background: var(--es-card-bg);
}
@media (max-width: 600px) {
    .es-verdict__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   COMPONENT 7: Table
   Usage: All data tables in guides.
   ============================================================ */
.es-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--es-8) 0;
    border-radius: var(--es-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid var(--es-card-border);
}
.es-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--es-text-base);
    background: #fff;
    min-width: 600px;
}
.es-table thead th {
    background: var(--es-card-bg);
    color: var(--es-text);
    font-weight: 700;
    text-align: left;
    padding: var(--es-4);
    border-bottom: 2px solid var(--es-card-border);
    white-space: nowrap;
}
.es-table tbody td {
    padding: 14px var(--es-4);
    border-bottom: 1px solid var(--es-card-border);
    color: var(--es-table-cell);
    vertical-align: top;
}
.es-table tbody tr:last-child td {
    border-bottom: none;
}
.es-ct-highlight {
    background: var(--es-highlight-bg);
}
.es-ct-highlight td {
    font-weight: 600;
}
.es-ct-provider {
    font-weight: 700;
    color: var(--es-text);
    white-space: nowrap;
}


/* ============================================================
   GUIDE TABLES — Universal Styling
   Targets ALL tables inside Bricks post-content area.
   Handles: wp-block-table wrappers, bare tables, NO_THEAD,
   sticky first column, scroll indicator, zebra stripes.
   ============================================================ */

/* --- Scroll container: wp-block-table wrapper --- */
.brxe-post-content figure.wp-block-table,
.brxe-post-content .wp-block-table {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    background: #fff;
}

/* --- Scroll container: bare tables (no figure wrapper) --- */
.brxe-post-content > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2rem 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    background: #fff;
}

/* --- Base table reset --- */
.brxe-post-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
}

/* --- Header cells (th anywhere in the table) --- */
.brxe-post-content table th {
    background: var(--es-table-header-bg);
    color: var(--es-table-header-text);
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    padding: 14px 20px;
    border-bottom: 2px solid var(--es-card-border);
    white-space: nowrap;
}

/* --- NO_THEAD fallback: first row bold <td> = header --- */
.brxe-post-content table:not(:has(thead)) > tbody > tr:first-child > td {
    background: var(--es-table-header-bg);
    color: var(--es-table-header-text);
    font-weight: 700;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 20px;
    border-bottom: 2px solid var(--es-card-border);
}

/* --- Data cells --- */
.brxe-post-content table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--es-table-header-bg);
    color: var(--es-table-text);
    vertical-align: top;
    line-height: 1.55;
}

/* --- Zebra striping (skip first row for NO_THEAD tables) --- */
.brxe-post-content table thead ~ tbody tr:nth-child(even),
.brxe-post-content table:not(:has(thead)) > tbody > tr:nth-child(even):not(:first-child) {
    background: var(--es-card-bg);
}

/* --- Row hover --- */
.brxe-post-content table tbody tr:hover {
    background: var(--es-highlight-bg);
    transition: background 0.15s ease;
}

/* --- Hover accent on first cell --- */
.brxe-post-content table tbody tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--es-accent-blue);
}

/* --- Don't hover-style the header row in NO_THEAD tables --- */
.brxe-post-content table:not(:has(thead)) > tbody > tr:first-child:hover {
    background: var(--es-table-header-bg);
}
.brxe-post-content table:not(:has(thead)) > tbody > tr:first-child:hover > td:first-child {
    box-shadow: none;
}

/* --- Last row: no bottom border --- */
.brxe-post-content table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Bold first column for labels --- */
.brxe-post-content table tbody td:first-child {
    font-weight: 600;
    color: var(--es-table-header-text);
}

/* --- Sticky first column --- */
.brxe-post-content table th:first-child,
.brxe-post-content table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 140px;
}
.brxe-post-content table thead th:first-child,
.brxe-post-content table:not(:has(thead)) > tbody > tr:first-child > td:first-child {
    z-index: 2;
    background: var(--es-table-header-bg);
}

/* Sticky column backgrounds — must match zebra/hover states */
.brxe-post-content table tbody tr:nth-child(odd) > td:first-child {
    background: #fff;
}
.brxe-post-content table thead ~ tbody tr:nth-child(even) > td:first-child,
.brxe-post-content table:not(:has(thead)) > tbody > tr:nth-child(even):not(:first-child) > td:first-child {
    background: var(--es-card-bg);
}
.brxe-post-content table tbody tr:hover > td:first-child {
    background: var(--es-highlight-bg);
}

/* Sticky column shadow separator */
.brxe-post-content table th:first-child,
.brxe-post-content table td:first-child {
    position: sticky;
    left: 0;
}
@supports (backdrop-filter: blur(1px)) {
    .brxe-post-content table th:first-child::after,
    .brxe-post-content table td:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: -1px;
        width: 8px;
        background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
        pointer-events: none;
    }
}

/* --- Links inside tables --- */
.brxe-post-content table a {
    color: var(--es-link);
    text-decoration: none;
    font-weight: 600;
}
.brxe-post-content table a:hover {
    text-decoration: underline;
}



/* --- Mobile refinements --- */
@media (max-width: 768px) {
    .brxe-post-content table th,
    .brxe-post-content table:not(:has(thead)) > tbody > tr:first-child > td {
        padding: 10px 14px;
        font-size: 0.78em;
    }
    .brxe-post-content table td {
        padding: 12px 14px;
    }
    .brxe-post-content table th:first-child,
    .brxe-post-content table td:first-child {
        min-width: 110px;
    }
}

/* ============================================================
   COMPONENT 8: Trust Signal Bar
   Usage: After intro, before Quick Picks. Builds E-E-A-T.
   ============================================================ */
.es-trust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--es-4) var(--es-5);
    padding: var(--es-4) var(--es-5);
    margin: var(--es-8) 0;
    background: linear-gradient(135deg, #eef2f7 0%, #f8fafc 100%);
    border: 1px solid var(--es-card-border);
    border-left: 4px solid var(--es-primary);
    border-radius: var(--es-radius);
    font-size: var(--es-text-sm);
    color: var(--es-text);
}
.es-trust-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-weight: 500;
}
.es-trust-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--es-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    flex-shrink: 0;
}
.es-trust-stat__value {
    font-weight: 800;
    color: var(--es-primary);
}
.es-trust-bar__link {
    font-size: 12px;
    color: var(--es-text);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}
.es-trust-bar__link:hover {
    color: var(--es-primary);
    text-decoration: underline;
}

/* ============================================================
   COMPONENT 9: Stat Card
   Usage: Cost guides, intros. Eye-catching metric callout.
   ============================================================ */
.es-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--es-4);
    margin: var(--es-6) 0;
}
.es-stat-card {
    background: #fff;
    border: 1px solid var(--es-card-border);
    border-top: 3px solid var(--es-primary);
    border-radius: var(--es-radius);
    padding: var(--es-5);
    text-align: center;
    min-width: 0;
    container-type: inline-size;
}
.es-stat-label {
    font-size: var(--es-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-text-secondary);
    margin-bottom: var(--es-2);
}
.es-stat-value {
    font-size: var(--es-text-3xl);
    font-size: clamp(18px, 8.5cqi, var(--es-text-3xl));
    font-weight: 800;
    color: var(--es-primary);
    line-height: 1.2;
    margin-bottom: var(--es-1);
    white-space: nowrap;
}
.es-stat-context {
    font-size: var(--es-text-sm);
    color: var(--es-text-muted);
}
/* BEM aliases — shortcode renders es-stat-card__value/label, keep both patterns */
.es-stat-card__label {
    font-size: var(--es-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-text-secondary);
    margin-bottom: var(--es-2);
}
.es-stat-card__value {
    font-size: var(--es-text-3xl);
    font-size: clamp(18px, 8.5cqi, var(--es-text-3xl));
    font-weight: 800;
    color: var(--es-primary);
    line-height: 1.2;
    margin-bottom: var(--es-1);
    white-space: nowrap;
}

/* ============================================================
   COMPONENT 10: Key Takeaway Box
   Usage: Section summaries for scanning readers.
   ============================================================ */
.es-takeaway {
    background: var(--es-card-bg);
    border: 1px solid var(--es-card-border);
    border-left: 3px solid var(--es-accent-blue);
    border-radius: var(--es-radius);
    margin: var(--es-6) 0;
    overflow: hidden;
}
.es-takeaway__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px var(--es-5);
    border-bottom: 1px solid var(--es-card-border);
}
.es-takeaway__icon {
    flex-shrink: 0;
}
.es-takeaway__label {
    font-weight: 700;
    font-size: var(--es-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-table-cell);
    margin: 0;
}
.es-takeaway__body {
    padding: var(--es-4) var(--es-5);
}
.es-takeaway__text {
    margin: 0;
    font-size: var(--es-text-base);
    line-height: 1.6;
    color: var(--es-table-text);
}
.es-takeaway__list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: var(--es-text-base);
    line-height: 1.7;
    color: var(--es-table-text);
    list-style: disc;
}
.es-takeaway__list li {
    padding: 4px 0;
}
.es-takeaway__list li::marker {
    color: var(--es-accent-blue);
}

/* ============================================================
   COMPONENT 11: Inline Callout Box
   Usage: [es_callout] shortcode — contextual inline callouts.
   Two variants: info (blue) and warning (rose).
   Distinct from Key Takeaway (amber) which is page-level.
   ============================================================ */
.es-callout {
    border: 1px solid;
    border-radius: var(--es-radius);
    margin: var(--es-5) 0;
    overflow: hidden;
}
.es-callout--info {
    background: var(--es-callout-info-bg);
    border-color: var(--es-callout-info-border);
}
.es-callout--warning {
    background: var(--es-callout-warn-bg);
    border-color: var(--es-callout-warn-border);
}
.es-callout__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--es-5);
    border-bottom: 1px solid;
}
.es-callout--info .es-callout__header {
    background: rgba(191, 219, 254, 0.25);
    border-color: var(--es-callout-info-border);
}
.es-callout--warning .es-callout__header {
    background: rgba(254, 205, 211, 0.25);
    border-color: var(--es-callout-warn-border);
}
.es-callout__icon {
    flex-shrink: 0;
}
.es-callout__label {
    font-weight: 700;
    font-size: var(--es-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.es-callout--info .es-callout__label {
    color: var(--es-callout-info-label);
}
.es-callout--warning .es-callout__label {
    color: var(--es-callout-warn-label);
}
.es-callout__body {
    padding: var(--es-4) var(--es-5);
}
.es-callout__text {
    margin: 0;
    font-size: var(--es-text-base);
    line-height: 1.6;
    color: #292524;
}
.es-callout__list {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: var(--es-text-base);
    line-height: 1.6;
    color: #292524;
    list-style: disc;
}
.es-callout__list li {
    padding: 3px 0;
}
.es-callout--info .es-callout__list li::marker {
    color: #1d4ed8;
}
.es-callout--warning .es-callout__list li::marker {
    color: #b91c1c;
}

/* ============================================================
   DATA VISUALIZATIONS (v1)
   Usage: Stats pages, cost guides. Pure CSS, no JavaScript.
   Requires --bar-pct CSS custom property on fill elements.
   ============================================================ */

/* --- Horizontal Bar Chart --- */
.es-bar-chart {
    margin: var(--es-6) 0;
    padding: var(--es-5);
    background: #fff;
    border: 1px solid var(--es-card-border);
    border-radius: var(--es-radius);
}
.es-bar-chart__title {
    font-size: var(--es-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-text-secondary);
    margin-bottom: var(--es-4);
}
.es-bar-chart__item {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    margin-bottom: var(--es-3);
}
.es-bar-chart__item:last-child {
    margin-bottom: 0;
}
.es-bar-chart__label {
    flex: 0 0 110px;
    font-size: var(--es-text-sm);
    font-weight: 600;
    color: var(--es-text);
    text-align: right;
}
.es-bar-chart__track {
    flex: 1;
    height: 28px;
    background: var(--es-card-bg);
    border-radius: var(--es-radius-sm);
    overflow: hidden;
}
.es-bar-chart__fill {
    height: 100%;
    border-radius: var(--es-radius-sm);
    background: var(--es-primary);
    width: var(--bar-pct);
    min-width: 2px;
}
.es-bar-chart__fill--alt {
    background: var(--es-primary-light);
}
.es-bar-chart__fill--muted {
    background: #90caf9;
}
.es-bar-chart__fill--light {
    background: #bbdefb;
}
.es-bar-chart__fill--danger {
    background: var(--es-con);
}
.es-bar-chart__fill--danger-light {
    background: #ef9a9a;
}
.es-bar-chart__value {
    flex: 0 0 55px;
    font-size: var(--es-text-sm);
    font-weight: 800;
    color: var(--es-primary);
}
@media (max-width: 600px) {
    .es-bar-chart__label { flex: 0 0 80px; font-size: 12px; }
    .es-bar-chart__track { height: 22px; }
}

/* --- Progress Bars --- */
.es-progress-group {
    margin: var(--es-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--es-3);
}
.es-progress-item {
    padding: var(--es-3) var(--es-5);
    background: #fff;
    border: 1px solid var(--es-card-border);
    border-radius: var(--es-radius);
}
.es-progress-item__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--es-2);
}
.es-progress-item__label {
    font-size: var(--es-text-sm);
    font-weight: 600;
    color: var(--es-text);
}
.es-progress-item__value {
    font-size: var(--es-text-xl);
    font-weight: 800;
    color: var(--es-primary);
}
.es-progress-item__bar {
    height: 10px;
    background: var(--es-card-bg);
    border-radius: 5px;
    overflow: hidden;
}
.es-progress-item__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--es-primary), var(--es-primary-light));
    border-radius: 5px;
    width: var(--bar-pct);
}
.es-progress-item__source {
    font-size: var(--es-text-xs);
    color: var(--es-text-muted);
    margin-top: var(--es-1);
}

/* --- Timeline --- */
.es-timeline {
    margin: var(--es-6) 0;
    padding: var(--es-5);
    background: #fff;
    border: 1px solid var(--es-card-border);
    border-radius: var(--es-radius);
}
.es-timeline__title {
    font-size: var(--es-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--es-text-secondary);
    margin-bottom: var(--es-5);
}
.es-timeline__track {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-top: 12px;
}
.es-timeline__track::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    height: 3px;
    background: var(--es-card-border);
    z-index: 0;
}
.es-timeline__node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 4px;
}
.es-timeline__dot {
    width: 14px;
    height: 14px;
    background: var(--es-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--es-primary);
    border-radius: 50%;
    margin-bottom: var(--es-2);
    flex-shrink: 0;
}
.es-timeline__node--active .es-timeline__dot {
    width: 18px;
    height: 18px;
    background: var(--es-pro);
    box-shadow: 0 0 0 2px var(--es-pro);
}
.es-timeline__date {
    font-size: var(--es-text-xs);
    font-weight: 700;
    color: var(--es-primary);
    margin-bottom: 2px;
}
.es-timeline__node--active .es-timeline__date {
    color: var(--es-pro);
}
.es-timeline__event {
    font-size: var(--es-text-base);
    font-weight: 700;
    color: var(--es-text);
}
.es-timeline__detail {
    font-size: var(--es-text-xs);
    color: var(--es-text-muted);
    margin-top: 2px;
}
@media (max-width: 600px) {
    .es-timeline__track {
        flex-direction: column;
        padding-top: 0;
        padding-left: 24px;
        gap: var(--es-4);
    }
    .es-timeline__track::before {
        top: 0; bottom: 0; left: 6px; right: auto;
        width: 3px; height: auto;
    }
    .es-timeline__node {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--es-3);
        text-align: left;
    }
    .es-timeline__dot { margin-bottom: 0; margin-top: 3px; }
}

/* ============================================================
   ACCESSIBILITY: Reduced Motion
   WCAG 2.1 AA — disable animations for users who prefer it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .brxe-post-content table tbody tr:hover {
        transition: none;
    }
}

/* ============================================================
   COMPONENT: Inline CTA
   Compact mid-content CTA for between provider sections.
   ============================================================ */
.es-inline-cta {
    display: flex;
    align-items: center;
    gap: var(--es-4);
    padding: var(--es-4) var(--es-5);
    margin: var(--es-6) 0;
    background: var(--es-highlight-bg);
    border-left: 4px solid var(--es-primary);
    border-radius: 0 var(--es-radius) var(--es-radius) 0;
}
.es-inline-cta__text {
    flex: 1;
    font-size: var(--es-text-base);
    font-weight: 600;
    color: var(--es-text);
    line-height: 1.4;
}
.es-inline-cta__btn {
    flex-shrink: 0;
    display: inline-block;
    padding: var(--es-2) var(--es-5);
    background: var(--es-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: var(--es-text-sm);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--es-transition-fast);
}
.es-inline-cta__btn:hover {
    background: var(--es-primary-light);
    color: #fff;
}
@media (max-width: 600px) {
    .es-inline-cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--es-3);
    }
    .es-inline-cta__btn {
        text-align: center;
        padding: var(--es-3) var(--es-5);
    }
}

/* ============================================================
   MICRO-INTERACTIONS (Phase 3)
   Subtle hover/active states for polished feel.
   ============================================================ */

/* 3.1 CTA Button lift on hover */
.es-cta-btn {
    transition: transform var(--es-transition-fast), box-shadow var(--es-transition-fast);
}
.es-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.15);
}
.es-cta-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 3.2 Quick Picks card hover */
.es-qp-card {
    transition: transform var(--es-transition-fast), box-shadow var(--es-transition-fast);
}
.es-qp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 3.3 Provider Header Card left accent */
.es-provider-card {
    border-left: 4px solid transparent;
    transition: border-left-color var(--es-transition-base);
}
.es-provider-card:hover {
    border-left-color: var(--es-primary);
}

/* 3.4 Number badge depth */
.es-number-badge {
    box-shadow: 0 2px 6px rgba(13, 71, 161, 0.3);
}

/* 3.5 Pros/Cons subtle hover */
.es-pros, .es-cons {
    transition: box-shadow var(--es-transition-fast);
}
.es-pros:hover {
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12);
}
.es-cons:hover {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}

/* 3.6 Verdict score entrance animation */
@keyframes es-score-in {
    0%   { transform: scale(0.7); opacity: 0; }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.es-verdict-score {
    animation: es-score-in 0.4s ease-out;
}

/* ============================================================
   COMPONENT: Sticky CTA Bar (All Devices)
   Fixed bottom bar — slides in after user scrolls past the
   hero quote CTA. Persistent conversion surface.
   ============================================================ */
.es-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: #fff;
    border-top: 1px solid var(--es-card-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    padding: var(--es-3) var(--es-4);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.es-sticky-cta.is-visible {
    transform: translateY(0);
}
.es-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    max-width: 860px;
    margin: 0 auto;
}
.es-sticky-cta__text {
    font-size: var(--es-text-sm);
    font-weight: 600;
    color: var(--es-text);
    line-height: 1.3;
}
.es-sticky-cta__text small {
    display: block;
    font-weight: 400;
    color: var(--es-text-secondary);
    font-size: var(--es-text-xs);
}
.es-sticky-cta__btn {
    flex-shrink: 0;
    padding: var(--es-3) var(--es-5);
    background: linear-gradient(135deg, var(--es-primary) 0%, var(--es-primary-light) 100%);
    color: #fff;
    border: none;
    border-radius: var(--es-radius-lg);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(13, 71, 161, 0.3);
    transition: transform var(--es-transition-fast), box-shadow var(--es-transition-fast);
}
.es-sticky-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.3);
}
/* Trust microcopy — desktop only */
.es-sticky-cta__trust {
    display: none;
    font-size: 12px;
    color: var(--es-text-secondary);
    white-space: nowrap;
}
@media (min-width: 769px) {
    .es-sticky-cta {
        padding: 10px var(--es-6);
    }
    .es-sticky-cta__text {
        font-size: 15px;
    }
    .es-sticky-cta__text small {
        font-size: 13px;
    }
    .es-sticky-cta__btn {
        padding: 12px 28px;
        font-size: 15px;
    }
    .es-sticky-cta__trust {
        display: block;
    }
}
/* Footer padding so sticky bar doesn't cover content */
body:has(.es-sticky-cta) #brx-footer { padding-bottom: 72px; }

/* Disable all Phase 3 animations for reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .es-cta-btn,
    .es-qp-card,
    .es-provider-card,
    .es-pros,
    .es-cons {
        transition: none;
    }
    .es-cta-btn:hover,
    .es-qp-card:hover {
        transform: none;
    }
    .es-verdict-score {
        animation: none;
    }
    .es-sticky-cta {
        transition: none;
    }
    .es-sticky-cta__btn:hover {
        transform: none;
    }
}

/* ── Author Card ──────────────────────────────────────────────────── */
.es-author-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: var(--es-card-bg, #f8fafc);
    border: 1px solid var(--es-card-border, #e5e7eb);
    border-radius: var(--es-radius, 10px);
    margin: 2rem 0;
}
.es-author-card__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.es-author-card__info {
    flex: 1;
    min-width: 0;
}
.es-author-card__name {
    font-family: var(--es-heading-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--es-text, #1a1a2e);
    margin: 0 0 2px;
}
.es-author-card__role {
    font-size: 13px;
    font-weight: 600;
    color: var(--es-primary, #0d47a1);
    margin: 0 0 8px;
}
.es-author-card__bio {
    font-size: 14px;
    line-height: 1.5;
    color: var(--es-text-secondary, #6b7280);
    margin: 0 0 8px;
}
.es-author-card__linkedin {
    font-size: 13px;
    color: var(--es-link, #2563eb);
    text-decoration: none;
    font-weight: 600;
}
.es-author-card__linkedin:hover {
    text-decoration: underline;
}
.es-author-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--es-text-muted, #9ca3af);
    margin: 0 0 2px;
}
.es-author-card--reviewer {
    border-top: 1px solid var(--es-card-border, #e5e7eb);
    margin-top: 0;
    padding-top: 16px;
    border-radius: 0 0 var(--es-radius, 10px) var(--es-radius, 10px);
}
@media (max-width: 480px) {
    .es-author-card { flex-direction: column; align-items: center; text-align: center; }
}

/* ── Reviewer Byline (top of content) ────────────────────────────── */
.es-reviewer-byline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--es-text-secondary, #6b7280);
    margin-bottom: 16px;
}
.es-reviewer-byline img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.es-reviewer-byline a {
    color: var(--es-text, #1a1a2e);
    font-weight: 600;
    text-decoration: none;
}
.es-reviewer-byline a:hover {
    text-decoration: underline;
}

/* ── Scoring Breakdown Card ──────────────────────────────────────── */
.es-scorecard {
    border: 1px solid var(--es-card-border, #e5e7eb);
    border-radius: var(--es-radius, 10px);
    overflow: hidden;
    margin: 2rem 0;
}
.es-scorecard__header {
    background: var(--es-primary, #0d47a1);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.es-scorecard__title {
    font-family: var(--es-heading-font);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}
.es-scorecard__total {
    font-size: 28px;
    font-weight: 800;
    font-family: var(--es-heading-font);
}
.es-scorecard__total small {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.7;
}
.es-scorecard__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--es-card-border, #e5e7eb);
}
.es-scorecard__row:nth-child(even) {
    background: var(--es-card-bg, #f8fafc);
}
.es-scorecard__row:last-child {
    border-bottom: none;
}
.es-scorecard__label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--es-text, #1a1a2e);
}
.es-scorecard__weight {
    font-size: 12px;
    color: var(--es-text-secondary, #6b7280);
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}
.es-scorecard__bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    max-width: 120px;
}
.es-scorecard__fill {
    height: 100%;
    border-radius: 4px;
    background: var(--es-primary, #0d47a1);
    transition: width 0.5s ease;
}
.es-scorecard__score {
    font-size: 15px;
    font-weight: 700;
    color: var(--es-text, #1a1a2e);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}