/*
 * xFactory B3 block library — shared primitives (00-base).
 * All batch-3 components live under the xf3- prefix.
 */

/* XF3-TOKENS-BEGIN — system-connected design tokens.
   Brand colour / danger colour / fonts follow the CMS theme options
   (admin → Theme options), injected as --color-primary / --color-danger /
   --primary-font / --secondary-font in partials/header.blade.php.
   Static hex values are only fallbacks for missing vars / legacy engines. */
:root {
    --xf3-primary: var(--color-primary, #1366f6);
    --xf3-primary-hover: #0d4fc4;
    --xf3-primary-deep: #1148ad;
    --xf3-primary-2: #4f8dff;
    --xf3-primary-tint: #7fb0ff;
    --xf3-primary-tint-2: #9ec2ff;
    --xf3-primary-tint-3: #b9d2fb;
    --xf3-primary-tint-4: #cfe0ff;
    --xf3-primary-tint-5: #dce7fb;
    --xf3-primary-tint-6: #eaf1ff;
    --xf3-primary-tint-7: #eef4ff;
    --xf3-primary-tint-8: #f5f9ff;
    --xf3-primary-soft: #eaf1ff;
    --xf3-primary-navy: #1d3a75;
    --xf3-danger: var(--color-danger, #dc2626);
    --xf3-danger-deep: #b42318;
    --xf3-danger-tint: #fecaca;
    --xf3-danger-bg: #fef2f2;
    --xf3-danger-night: #4a1416;

    /* neutral scale — aligned to the parent theme's gray ramp
       (gray-900 #101828 · gray-600 #475467 · gray-500 #667085 ·
        gray-200 #eaecf0 · gray-100 #f2f4f7 · gray-50 #f9fafb) */
    --xf3-ink: #101828;
    --xf3-ink-2: #475467;
    --xf3-muted: #667085;
    --xf3-line: #eaecf0;
    --xf3-soft: #f2f4f7;
    --xf3-soft-2: #f9fafb;
    --xf3-dark: #0c1730;
    --xf3-dark-2: #13234a;
    --xf3-success: #16a34a;
    --xf3-warning: #d97706;
    --xf3-whatsapp: #25d366;
    --xf3-radius: 14px;
    --xf3-radius-lg: 20px;
    --xf3-shadow-sm: 0 4px 14px rgba(15, 27, 51, 0.07);
    --xf3-shadow: 0 18px 50px rgba(15, 27, 51, 0.10);
    --xf3-shadow-hover: 0 26px 60px rgba(15, 27, 51, 0.16);
    --xf3-gradient: linear-gradient(135deg, #1366f6 0%, #3b82f6 55%, #6aa5ff 100%);
    --xf3-gradient-dark: linear-gradient(135deg, #0c1730 0%, #16294f 60%, #1d3a75 100%);
    /* metrics/numbers use the CMS body font (never a self-hosted typeface) */
    --xf3-font-num: var(--primary-font, "Helvetica Neue", Arial, sans-serif);
}

/* Derive every brand shade from the CMS primary colour.
   Falls back to the static hexes above on engines without color-mix. */
@supports (background: color-mix(in srgb, red, blue)) {
    :root {
        --xf3-primary-hover: color-mix(in srgb, var(--color-primary, #1366f6) 80%, black);
        --xf3-primary-deep: color-mix(in srgb, var(--color-primary, #1366f6) 70%, black);
        --xf3-primary-2: color-mix(in srgb, var(--color-primary, #1366f6) 52%, white);
        --xf3-primary-tint: color-mix(in srgb, var(--color-primary, #1366f6) 52%, white);
        --xf3-primary-tint-2: color-mix(in srgb, var(--color-primary, #1366f6) 40%, white);
        --xf3-primary-tint-3: color-mix(in srgb, var(--color-primary, #1366f6) 30%, white);
        --xf3-primary-tint-4: color-mix(in srgb, var(--color-primary, #1366f6) 20%, white);
        --xf3-primary-tint-5: color-mix(in srgb, var(--color-primary, #1366f6) 13%, white);
        --xf3-primary-tint-6: color-mix(in srgb, var(--color-primary, #1366f6) 8%, white);
        --xf3-primary-tint-7: color-mix(in srgb, var(--color-primary, #1366f6) 6%, white);
        --xf3-primary-tint-8: color-mix(in srgb, var(--color-primary, #1366f6) 3%, white);
        --xf3-primary-soft: color-mix(in srgb, var(--color-primary, #1366f6) 8%, white);
        --xf3-primary-navy: color-mix(in srgb, var(--color-primary, #1366f6) 45%, #0c1730);
        --xf3-danger-deep: color-mix(in srgb, var(--color-danger, #dc2626) 78%, black);
        --xf3-danger-tint: color-mix(in srgb, var(--color-danger, #dc2626) 22%, white);
        --xf3-danger-bg: color-mix(in srgb, var(--color-danger, #dc2626) 6%, white);
        --xf3-danger-night: color-mix(in srgb, var(--color-danger, #dc2626) 24%, #0c1730);
        --xf3-gradient: linear-gradient(135deg,
            var(--color-primary, #1366f6) 0%,
            color-mix(in srgb, var(--color-primary, #1366f6) 52%, white) 100%);
        --xf3-gradient-dark: linear-gradient(135deg,
            #0c1730 0%,
            color-mix(in srgb, var(--color-primary, #1366f6) 35%, #0c1730) 100%);
    }
}
/* XF3-TOKENS-END */

/* ---- B3 heading system ----
   Mirror the parent theme's .text-heading-* scale (primary font, weight 700)
   for every bare h1–h6 inside a block. Without this, headings inherit the
   parent theme's bare-tag defaults — secondary font + oversized line-heights
   (h3 = 44px/54px) — which makes block titles look unrelated to the rest of
   the site. Component-specific size/weight rules keep their own values (they
   win by specificity); this block only fixes the inherited defaults. */

.xf-b3 h1, .xf-b3 h2, .xf-b3 h3, .xf-b3 h4, .xf-b3 h5, .xf-b3 h6 {
    font-family: var(--primary-font), sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--xf3-ink);
    line-height: 1.2;
}
.xf-b3 h1 { line-height: 1.12; }
.xf-b3 h2 { line-height: 1.05; }
.xf-b3 h3 { line-height: 1.1; }
.xf-b3 h4 { line-height: 1.15; }
.xf-b3 h6 { line-height: 1.22; }

/* ---- section helpers ---- */

.xf-b3 .xf3-inner {
    position: relative;
}

.xf3-head-center .xf-section-head {
    text-align: center;
}

.xf3-head-center .xf-section-head__subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

.xf-b3 .xf-section-head {
    margin-bottom: 34px;
}

.xf3-dark {
    background: var(--xf3-dark);
    color: rgba(255, 255, 255, 0.82);
}

.xf3-dark .xf-section-head__title,
.xf3-dark h1, .xf3-dark h2, .xf3-dark h3, .xf3-dark h4 {
    color: #fff;
}

.xf3-dark .xf-section-head__subtitle,
.xf3-dark .color-gray-500 {
    color: rgba(255, 255, 255, 0.68) !important;
}

.xf3-dark .xf-eyebrow {
    color: var(--xf3-primary-tint);
}

.xf3-soft {
    background: var(--xf3-soft);
}

.xf3-primary-bg {
    background: var(--xf3-gradient);
    color: #fff;
}

/* ---- grids ---- */

.xf3-grid {
    display: grid;
    gap: 22px;
}

.xf3-grid--2 { grid-template-columns: repeat(2, 1fr); }
.xf3-grid--3 { grid-template-columns: repeat(3, 1fr); }
.xf3-grid--4 { grid-template-columns: repeat(4, 1fr); }
.xf3-grid--5 { grid-template-columns: repeat(5, 1fr); }
.xf3-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- common atoms ---- */

.xf3-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-icon--circle { border-radius: 50%; }
.xf3-icon--dark { background: rgba(255, 255, 255, 0.1); color: var(--xf3-primary-tint-2); }
.xf3-icon--lg { width: 60px; height: 60px; font-size: 26px; border-radius: 16px; }

.xf3-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    background: #fff;
    border: 1px solid var(--xf3-line);
    white-space: nowrap;
}

.xf3-chip i { color: var(--xf3-primary); font-size: 14px; }
.xf3-chip--soft { background: var(--xf3-primary-soft); border-color: transparent; color: var(--xf3-primary-deep); }
.xf3-chip--dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); }
.xf3-chip--dark i { color: var(--xf3-primary-tint); }

.xf3-note {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

.xf3-dark .xf3-note { color: rgba(255, 255, 255, 0.55); }

.xf3-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--xf3-radius);
    background: var(--xf3-soft-2);
}

.xf3-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xf3-media--16x9 { aspect-ratio: 16 / 9; }
.xf3-media--4x3 { aspect-ratio: 4 / 3; }
.xf3-media--1x1 { aspect-ratio: 1 / 1; }
.xf3-media--3x4 { aspect-ratio: 3 / 4; }

.xf3-card {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.xf3-card--hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--xf3-shadow-hover);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
}

.xf3-tag--new { color: #0f766e; background: #ccfbf1; }
.xf3-tag--hot { color: var(--xf3-danger-deep); background: var(--xf3-danger-bg); }
.xf3-tag--blue { color: var(--xf3-primary-deep); background: var(--xf3-primary-soft); }

/* ---- buttons (B3 extras; .xf-btn from landing.css stays base) ---- */

.xf3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    border: 1px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space: nowrap;
}

.xf3-btn--primary { background: var(--xf3-primary); color: #fff; box-shadow: 0 10px 24px rgba(var(--bs-primary-rgb), .28); }
.xf3-btn--primary:hover { background: var(--xf3-primary-hover); color: #fff; transform: translateY(-2px); }
.xf3-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.xf3-btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.xf3-btn--light { background: #fff; color: var(--xf3-ink); }
.xf3-btn--light:hover { transform: translateY(-2px); color: var(--xf3-primary); }
.xf3-btn--outline { background: transparent; border-color: var(--xf3-line); color: var(--xf3-ink-2); }
.xf3-btn--outline:hover { border-color: var(--xf3-primary); color: var(--xf3-primary); }
.xf3-btn--whatsapp { background: var(--xf3-whatsapp); color: #fff; }
.xf3-btn--whatsapp:hover { color: #fff; background: #1eb858; }
.xf3-btn--sm { padding: 9px 18px; font-size: 13.5px; }
.xf3-btn--lg { padding: 16px 34px; font-size: 16.5px; }

/* ---- forms ---- */

.xf3-field { margin-bottom: 14px; }

.xf3-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-input,
.xf3-select,
.xf3-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--xf3-line);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--xf3-ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.xf3-input:focus,
.xf3-select:focus,
.xf3-textarea:focus {
    outline: none;
    border-color: var(--xf3-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .14);
}

.xf3-textarea { min-height: 96px; resize: vertical; }

.xf3-form-note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-form-feedback {
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
}

.xf3-form-feedback.is-success,
.xf3-form-feedback.is-visible.is-success { display: block; background: #ecfdf3; color: #137a3c; border: 1px solid #b6ebc9; }
.xf3-form-feedback.is-error,
.xf3-form-feedback.is-visible.is-error { display: block; background: var(--xf3-danger-bg); color: var(--xf3-danger-deep); border: 1px solid var(--xf3-danger-tint); }

/* ---- tables ---- */

.xf3-table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.xf3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 560px;
}

.xf3-table th,
.xf3-table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--xf3-line);
    vertical-align: middle;
}

.xf3-table thead th {
    background: var(--xf3-soft);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--xf3-ink-2);
    white-space: nowrap;
}

.xf3-table tbody tr:last-child td { border-bottom: none; }
.xf3-table tbody tr:hover { background: var(--xf3-primary-tint-8); }
.xf3-table .is-hl { background: var(--xf3-primary-tint-8); }
.xf3-table .is-hl:hover { background: var(--xf3-primary-tint-6); }

.xf3-yes { color: var(--xf3-success); }
.xf3-no { color: #c3ccd9; }
.xf3-yes i, .xf3-no i { font-size: 17px; }

/* ---- rating stars ---- */

.xf3-stars { display: inline-flex; gap: 2px; color: #f59e0b; font-size: 14px; }
.xf3-stars .off { color: #d7deea; }

/* ---- reveal stagger for B3 item elements ---- */

.xf-anim-ready .xf-inview [class*="xf3-stagger"] {
    animation: xf-rise .55s cubic-bezier(.22,.61,.36,1) both;
}

.xf-anim-ready .xf-inview .xf3-stagger:nth-child(1) { animation-delay: .04s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(2) { animation-delay: .10s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(3) { animation-delay: .16s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(4) { animation-delay: .22s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(5) { animation-delay: .28s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(6) { animation-delay: .34s; }
.xf-anim-ready .xf-inview .xf3-stagger:nth-child(n+7) { animation-delay: .40s; }

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

@media (max-width: 991.98px) {
    .xf3-grid--4, .xf3-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .xf3-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .xf3-grid--2, .xf3-grid--3, .xf3-grid--4, .xf3-grid--5 { grid-template-columns: 1fr; }
    .xf3-grid { gap: 16px; }

    /* Long labels must wrap inside their chips/buttons instead of
       pushing the page wider than the viewport. */
    .xf-b3 .xf3-chip {
        max-width: 100%;
        white-space: normal;
    }
    .xf-b3 .xf-btn {
        max-width: 100%;
        white-space: normal;
    }
    /* Grid/flex columns collapse to 1fr but their items still carry the
       default min-width:auto — let inner media shrink instead of overflowing. */
    .xf-b3 .xf3-grid > *,
    .xf-b3 [class*="__grid"] > *,
    .xf-b3 [class*="__visual"] { min-width: 0; }
}

/* ---- accessibility / motion / print ---- */

.xf-b3.xf-no-anim {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .xf-b3 [class*="xf3-stagger"] {
        animation: none !important;
    }
}

@media print {
    .xf3-floating, .xf3-stickybar { display: none !important; }
}
/*
 * xFactory B3 — cases family.
 * Variants: feature (large split + challenge/approach/results + metrics),
 *           grid (project cards with highlighted result).
 * Every rule is scoped under .xf3-cases.
 */

.xf3-cases h3,
.xf3-cases h4 { margin: 0; }
.xf3-cases p { margin: 0; }
.xf3-cases dd { margin: 0; }

/* =====================================================================
   feature — large editorial split
   ===================================================================== */

.xf3-cases--feature { background: var(--xf3-soft); }

.xf3-cases .xf3-cs-feat {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    align-items: start;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-cases .xf3-cs-feat__media {
    position: sticky;
    top: 24px;
}

.xf3-cases .xf3-cs-feat__img {
    box-shadow: 0 16px 38px rgba(15, 27, 51, .16);
}

.xf3-cases .xf3-cs-feat__result {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--xf3-gradient);
    box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), .26);
}

.xf3-cases .xf3-cs-feat__result i { font-size: 17px; }

.xf3-cases .xf3-cs-feat__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0 0;
}

.xf3-cases .xf3-cs-feat__facts dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8494ab;
}

.xf3-cases .xf3-cs-feat__facts dd {
    margin-top: 5px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--xf3-ink);
    overflow-wrap: anywhere;
}

.xf3-cases .xf3-cs-feat__facts dd i {
    margin-right: 5px;
    font-size: 13px;
    color: var(--xf3-primary);
}

.xf3-cases .xf3-cs-feat__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--xf3-ink);
}

.xf3-cases .xf3-cs-feat__blocks {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 26px;
}

.xf3-cases .xf3-cs-feat__block {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-cases .xf3-cs-feat__block:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.xf3-cases .xf3-cs-feat__block-icon {
    width: 52px;
    height: 52px;
    font-size: 21px;
}

.xf3-cases .xf3-cs-feat__block-icon--ok {
    color: #0f7a4f;
    background: #e6f7ef;
}

.xf3-cases .xf3-cs-feat__block h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-cases .xf3-cs-feat__block p {
    margin-top: 7px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--xf3-muted);
}

/* Metrics band */
.xf3-cases .xf3-cs-feat__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 22px;
    padding: 28px 30px;
    background: var(--xf3-dark);
    border-radius: var(--xf3-radius-lg);
}

.xf3-cases .xf3-cs-feat__metric {
    text-align: center;
    padding: 6px 12px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.xf3-cases .xf3-cs-feat__metric:last-child { border-right: none; }

.xf3-cases .xf3-cs-feat__metric strong {
    display: block;
    font-family: var(--xf3-font-num);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.xf3-cases .xf3-cs-feat__metric span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .62);
}

/* =====================================================================
   grid — project cards with highlighted result
   ===================================================================== */

.xf3-cases .xf3-cs-card { position: relative; }

.xf3-cases .xf3-cs-stretch {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.xf3-cases .xf3-cs-card__media { border-radius: 0; }

.xf3-cases .xf3-cs-card__industry {
    position: absolute;
    left: 14px;
    bottom: 14px;
    right: 14px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(12, 23, 48, .78);
    backdrop-filter: blur(4px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xf3-cases .xf3-cs-card__body { padding: 20px 22px 22px; }

.xf3-cases .xf3-cs-card__result {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #0f7a4f;
    background: #e6f7ef;
}

.xf3-cases .xf3-cs-card__result i { font-size: 13px; }

.xf3-cases .xf3-cs-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--xf3-ink);
}

.xf3-cases .xf3-cs-card__summary {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-cases .xf3-cs-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-primary);
}

.xf3-cases .xf3-cs-card__link i { transition: transform .25s ease; }
.xf3-cases .xf3-cs-card:hover .xf3-cs-card__link i { transform: translateX(4px); }

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .xf3-cases .xf3-cs-feat {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 22px;
    }
    .xf3-cases .xf3-cs-feat__media {
        position: static;
        max-width: 520px;
    }
    .xf3-cases .xf3-cs-feat__metrics { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
    .xf3-cases .xf3-cs-feat__metric:nth-child(2) { border-right: none; }
    .xf3-cases .xf3-cs-feat__metric:nth-child(-n+2) {
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
}

@media (max-width: 575.98px) {
    .xf3-cases .xf3-cs-feat__title { font-size: 22px; }
    .xf3-cases .xf3-cs-feat__facts { grid-template-columns: 1fr; gap: 10px; }
    .xf3-cases .xf3-cs-feat__metrics { grid-template-columns: 1fr; padding: 22px; }
    .xf3-cases .xf3-cs-feat__metric { border-right: none; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .xf3-cases .xf3-cs-feat__metric:last-child { border-bottom: none; padding-bottom: 0; }
    .xf3-cases .xf3-cs-feat__block { grid-template-columns: 1fr; gap: 10px; }
}
/*
 * xFactory B3 — cert family.
 * Variants: wall · awards · audit · compliance · members · patents.
 * Every rule is scoped under .xf3-cert.
 */

.xf3-cert h3,
.xf3-cert h4 { margin: 0; }
.xf3-cert p { margin: 0; }
.xf3-cert ol,
.xf3-cert ul { margin: 0; padding: 0; list-style: none; }

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

.xf3-cert__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 26px;
}

.xf3-cert__note i { margin-top: 3px; color: var(--xf3-primary); }

/* ============================================================ wall === */
/* Landscape certificate cards with a slide-up verify overlay. */

.xf3-cert__wall {
    display: grid;
    gap: 24px;
}

.xf3-cert__grid--3 { grid-template-columns: repeat(3, 1fr); }
.xf3-cert__grid--2 { grid-template-columns: repeat(2, 1fr); }

.xf3-cert .xf3-cert-card {
    display: flex;
    flex-direction: column;
}

.xf3-cert .xf3-cert-card__media {
    border-radius: var(--xf3-radius) var(--xf3-radius) 0 0;
    border-bottom: 1px solid var(--xf3-line);
    background: #fff;
}

.xf3-cert .xf3-cert-card__media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.xf3-cert .xf3-cert-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xf3-cert .xf3-cert-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(12, 23, 48, 0) 38%, rgba(12, 23, 48, .82) 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.xf3-cert .xf3-cert-card:hover .xf3-cert-card__hover { opacity: 1; }

.xf3-cert .xf3-cert-card__zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    transform: translateY(8px);
    transition: transform .3s ease;
}

.xf3-cert .xf3-cert-card__verify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--xf3-primary);
    box-shadow: 0 10px 24px rgba(var(--bs-primary-rgb), .35);
    transform: translateY(8px);
    transition: background .25s ease, transform .3s ease;
}

.xf3-cert .xf3-cert-card__verify:hover { background: var(--xf3-primary-hover); }

.xf3-cert .xf3-cert-card:hover .xf3-cert-card__zoom,
.xf3-cert .xf3-cert-card:hover .xf3-cert-card__verify { transform: translateY(0); }

.xf3-cert .xf3-cert-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px 20px;
}

.xf3-cert .xf3-cert-card__title {
    font-size: 16px;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-cert .xf3-cert-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-cert .xf3-cert-card__id {
    font-family: var(--xf3-font-num);
    font-size: 12.5px;
    color: var(--xf3-ink-2);
    background: var(--xf3-soft);
    border: 1px solid var(--xf3-line);
    padding: 2px 9px;
    border-radius: 999px;
}

.xf3-cert .xf3-cert-card__extra {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

/* ========================================================= awards === */
/* Descending year timeline with trophy nodes. */

.xf3-cert--awards { background: var(--xf3-soft); }

.xf3-cert__awards {
    position: relative;
    max-width: 940px;
}

.xf3-cert__awards::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 118px;
    width: 2px;
    background: linear-gradient(180deg, var(--xf3-primary-tint-3) 0%, #e3e9f3 100%);
}

.xf3-cert__award {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 44px;
    padding: 0 0 26px;
}

.xf3-cert__award:last-child { padding-bottom: 0; }

.xf3-cert__award-year {
    position: relative;
    text-align: right;
}

.xf3-cert__award-y {
    display: block;
    font-family: var(--xf3-font-num);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--xf3-primary);
    padding-top: 6px;
}

.xf3-cert__award-node {
    position: absolute;
    right: -55px;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--xf3-primary);
    background: #fff;
    border: 2px solid var(--xf3-primary-tint-3);
    box-shadow: 0 6px 16px rgba(15, 27, 51, .08);
}

.xf3-cert__award-card {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    padding: 20px 24px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.xf3-cert__award-card:hover {
    transform: translateX(4px);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-cert__award-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.xf3-cert__award-title {
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-cert__doclink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    transition: background .25s ease, color .25s ease;
}

.xf3-cert__doclink:hover { background: var(--xf3-primary); color: #fff; }

.xf3-cert__award-by {
    margin-top: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-cert__award-extra {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

/* ========================================================== audit === */
/* Dark readiness panel: glass auditor cards + numbered booking steps. */

.xf3-cert--audit {
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, .82);
}

.xf3-cert--audit .xf-section-head__title { color: #fff; }
.xf3-cert--audit .xf-section-head__subtitle { color: rgba(255, 255, 255, .68); }
.xf3-cert--audit .xf-eyebrow { color: var(--xf3-primary-tint); }

.xf3-cert__auditors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 22px;
}

.xf3-cert__auditor {
    padding: 24px;
    border-radius: var(--xf3-radius-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: background .3s ease, transform .3s ease, border-color .3s ease;
}

.xf3-cert__auditor:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(127, 176, 255, .45);
    transform: translateY(-4px);
}

.xf3-cert__auditor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.xf3-cert__auditor-name {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.xf3-cert__auditor-scope {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .65);
}

.xf3-cert__audit-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 26px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.xf3-cert__audit-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-family: var(--xf3-font-num);
    font-size: 13px;
    font-weight: 800;
    color: var(--xf3-primary-tint-2);
    background: rgba(127, 176, 255, .12);
    border: 1px solid rgba(127, 176, 255, .3);
    margin-bottom: 13px;
}

.xf3-cert__audit-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 8px;
}

.xf3-cert__audit-text {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
}

.xf3-cert__audit-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.xf3-cert__audit-cta .xf-buttons { margin: 0; }

.xf3-cert__audit-line {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    max-width: 460px;
}

.xf3-cert__audit-line i { color: var(--xf3-primary-tint); flex: 0 0 auto; }

/* ====================================================== compliance === */
/* Typographic mark tiles, no fake logo imagery. */

.xf3-cert__marks {
    display: grid;
    gap: 22px;
}

.xf3-cert__mark {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    background: #fff;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

.xf3-cert__mark:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-cert__mark-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 72px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f4f7fc 0%, var(--xf3-primary-tint-5) 100%);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-cert__mark-glyph {
    font-family: var(--xf3-font-num);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--xf3-ink);
}

.xf3-cert__mark-check {
    position: absolute;
    top: -9px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    background: var(--xf3-success);
    border: 2px solid #fff;
}

.xf3-cert__mark-std {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--xf3-ink-2);
    min-height: 40px;
}

.xf3-cert__mark-issuer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--xf3-muted);
}

.xf3-cert__mark-issuer i { color: var(--xf3-primary); }

.xf3-cert__mark-scope {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-cert__mark-doc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--xf3-line);
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-primary);
    transition: gap .25s ease;
}

.xf3-cert__mark-doc i { transition: transform .25s ease; }
.xf3-cert__mark-doc:hover i { transform: translateX(4px); }

/* ========================================================= members === */

.xf3-cert--members { background: var(--xf3-soft); }

.xf3-cert__members {
    display: grid;
    gap: 22px;
}

.xf3-cert .xf3-cert__member {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.xf3-cert__member-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.xf3-cert__member-name {
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--xf3-ink);
    min-height: 46px;
}

.xf3-cert__member-id {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--xf3-soft);
    border: 1px dashed var(--xf3-primary-tint-3);
}

.xf3-cert__member-idlabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

.xf3-cert__member-idval {
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-primary);
    letter-spacing: .02em;
}

.xf3-cert__member-extra {
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-cert__member-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-primary);
}

.xf3-cert__member-link i { transition: transform .25s ease; }
.xf3-cert__member-link:hover i { transform: translateX(4px); }

/* ========================================================= patents === */

.xf3-cert .xf3-cert__patents { box-shadow: var(--xf3-shadow-sm); }

.xf3-cert__patent-no {
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-cert__patent-no i {
    color: var(--xf3-warning);
    margin-right: 8px;
}

.xf3-cert__patent-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    min-width: 220px;
}

.xf3-cert .xf3-cert__patent-region {
    font-size: 12px;
    font-weight: 700;
}

.xf3-cert__patent-status {
    font-size: 13px;
    color: var(--xf3-muted);
    white-space: nowrap;
}

.xf3-cert__patent-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-primary);
    white-space: nowrap;
}

.xf3-cert__patent-link i { transition: transform .25s ease; }
.xf3-cert__patent-link a:hover i { transform: translateX(3px); }

/* ====================================================== responsive === */

@media (max-width: 991.98px) {
    .xf3-cert__grid--3 { grid-template-columns: repeat(2, 1fr); }
    .xf3-cert__auditors { grid-template-columns: 1fr; }
    .xf3-cert__audit-steps { grid-template-columns: repeat(2, 1fr); }
    .xf3-cert__audit-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767.98px) {
    .xf3-cert__awards::before { left: 22px; }
    .xf3-cert__award { grid-template-columns: 1fr; gap: 0; padding-left: 56px; }
    .xf3-cert__award-year { text-align: left; margin-bottom: 12px; }
    .xf3-cert__award-y { font-size: 20px; padding-top: 0; }
    .xf3-cert__award-node {
        left: -45px;
        right: auto;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .xf3-cert__award-card { padding: 18px; }
}

@media (max-width: 575.98px) {
    .xf3-cert__grid--2,
    .xf3-cert__grid--3 { grid-template-columns: 1fr; }
    .xf3-cert__audit-steps { grid-template-columns: 1fr; }
    .xf3-cert .xf3-cert-card__hover { opacity: 1; }
    .xf3-cert__patent-title { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-cert *,
    .xf3-cert *::before,
    .xf3-cert *::after { transition: none !important; }
}
/*
 * xFactory B3 — cta family (14 variants).
 * All rules scoped under .xf3-cta.
 * Variants: gradient, split, card, fullbleed, countdown, tradeshow,
 * seasonal, ribbon, event, quotedark, downloads, whatsapp,
 * partnership, mega.
 */

.xf3-cta h2,
.xf3-cta h3 { margin: 0; }

/* Light headings inside dark/photo panels (catalog dark flag is off,
   so the shared .xf3-dark heading overrides do not apply here). */
.xf3-cta__gradient .xf-section-head__title,
.xf3-cta__bleed-inner .xf-section-head__title,
.xf3-cta__countdown-box .xf-section-head__title,
.xf3-cta__wa-copy .xf-section-head__title,
.xf3-cta__mega .xf-section-head__title { color: #fff !important; }

.xf3-cta__gradient .xf-section-head__subtitle,
.xf3-cta__bleed-inner .xf-section-head__subtitle,
.xf3-cta__countdown-box .xf-section-head__subtitle,
.xf3-cta__wa-copy .xf-section-head__subtitle,
.xf3-cta__mega .xf-section-head__subtitle { color: rgba(255, 255, 255, .8) !important; }

.xf3-cta__gradient .xf-eyebrow,
.xf3-cta__countdown-box .xf-eyebrow,
.xf3-cta__mega .xf-eyebrow { color: var(--xf3-primary-tint-3); }

.xf3-cta__wa-copy .xf-eyebrow { color: #d3f9e2; }
.xf3-cta__bleed-inner .xf-eyebrow { color: var(--xf3-primary-tint-2); }

.xf3-cta .xf3-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.xf3-cta .xf3-cta__actions--center { justify-content: center; }

.xf3-cta .xf3-cta__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.xf3-cta .xf3-cta__chips--left { justify-content: flex-start; }

.xf3-cta .xf3-cta__trust {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--xf3-muted);
    text-align: center;
}

.xf3-cta .xf3-cta__trust i { margin-right: 6px; }
.xf3-cta .xf3-cta__trust--left { text-align: left; }

/* ---- gradient (rounded gradient card on neutral page) ---- */

.xf3-cta--gradient { padding-top: 0; padding-bottom: 0; background: transparent; }

.xf3-cta--gradient .xf3-inner,
.xf3-cta--gradient .xf-section-head { margin-bottom: 0; }

.xf3-cta .xf3-cta__gradient {
    position: relative;
    padding: 64px 48px;
    text-align: center;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
}

.xf3-cta--gradient .xf3-cta__gradient {
    background: var(--xf3-gradient);
    box-shadow: 0 26px 60px rgba(var(--bs-primary-rgb), .32);
}

.xf3-cta .xf3-cta__gradient .xf3-cta__trust { color: rgba(255, 255, 255, .75); }

/* ---- split ---- */

.xf3-cta--split { background: #fff; }

.xf3-cta .xf3-cta__split {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: center;
}

.xf3-cta .xf3-cta__checklist {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xf3-cta .xf3-cta__checklist li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-cta .xf3-cta__checklist i { color: var(--xf3-success); font-size: 17px; }

.xf3-cta .xf3-cta__split-panel {
    padding: 34px 32px;
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-5);
}

.xf3-cta .xf3-cta__panel-title { font-size: 20px; color: var(--xf3-ink); }
.xf3-cta .xf3-cta__panel-text { margin: 8px 0 0; font-size: 14px; color: var(--xf3-muted); }
.xf3-cta .xf3-cta__panel-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.xf3-cta .xf3-cta__panel-btns .xf3-btn { width: 100%; }
.xf3-cta .xf3-cta__panel-btns i { font-size: 16px; }

/* ---- card ---- */

.xf3-cta--card { background: var(--xf3-soft); }

.xf3-cta .xf3-cta__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 42px 46px;
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-cta .xf3-cta__card .xf-section-head { margin-bottom: 0; }
.xf3-cta .xf3-cta__card-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px;
}

.xf3-cta .xf3-cta__card-actions .xf3-btn { width: 100%; justify-content: center; }

/* ---- fullbleed ---- */

.xf3-cta--fullbleed { padding: 0; background: var(--xf3-dark); }

.xf3-cta .xf3-cta__bleed {
    background-size: cover;
    background-position: center;
}

.xf3-cta .xf3-cta__bleed-inner {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    padding-bottom: 72px;
    max-width: 640px;
}

/* ---- countdown ---- */

.xf3-cta--countdown { background: var(--xf3-dark); }

.xf3-cta .xf3-cta__countdown-box { text-align: center; }

.xf3-cta .xf3-cta__cd {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    margin: 30px 0 6px;
}

.xf3-cta .xf3-cta__cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
    padding: 18px 12px;
    border-radius: var(--xf3-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

.xf3-cta .xf3-cta__cd-num {
    font-family: var(--xf3-font-num);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.xf3-cta .xf3-cta__cd-label {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.xf3-cta .xf3-cta__cd-sep {
    padding-top: 16px;
    font-size: 26px;
    font-weight: 800;
    color: rgba(255, 255, 255, .3);
}

.xf3-cta .xf3-cta__cd-ended {
    flex-basis: 100%;
    display: none;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--xf3-danger-tint);
}

.xf3-cta .xf3-cta__cd.is-ended .xf3-cta__cd-cell,
.xf3-cta .xf3-cta__cd.is-ended .xf3-cta__cd-sep { opacity: .35; }
.xf3-cta .xf3-cta__cd.is-ended .xf3-cta__cd-ended { display: block; }

.xf3-cta--countdown .xf3-cta__trust { color: rgba(255, 255, 255, .55); }

/* ---- tradeshow ---- */

.xf3-cta--tradeshow { background: var(--xf3-soft); }

.xf3-cta .xf3-cta__ts-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
}

.xf3-cta .xf3-cta__ts-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 28px;
    text-align: center;
}

.xf3-cta .xf3-cta__ts-card .xf3-icon { align-self: center; }

.xf3-cta .xf3-cta__ts-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

.xf3-cta .xf3-cta__ts-value { font-size: 17px; font-weight: 700; color: var(--xf3-ink); }

.xf3-cta .xf3-cta__ts-card--hl {
    border-color: var(--xf3-primary-tint-3);
    background: linear-gradient(180deg, var(--xf3-primary-tint-8) 0%, #fff 100%);
    box-shadow: var(--xf3-shadow-sm);
}

/* ---- seasonal ---- */

.xf3-cta--seasonal {
    background: radial-gradient(1200px 320px at 50% -80px, #fff7e8 0%, var(--xf3-soft) 70%);
}

.xf3-cta .xf3-cta__seasonal { text-align: center; }

.xf3-cta .xf3-cta__seasonal-gift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 18px;
    font-size: 28px;
    color: #b45309;
    background: #fef3c7;
}

.xf3-cta .xf3-cta__promo { margin-top: 22px; }
.xf3-cta .xf3-cta__promo .xf3-chip {
    padding: 9px 16px;
    background: #fff;
    border-color: #f3d9a7;
    color: #92600a;
}
.xf3-cta .xf3-cta__promo .xf3-chip i { color: #b45309; }

/* ---- ribbon ---- */

.xf3-cta--ribbon {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--xf3-dark);
}

.xf3-cta .xf3-cta__ribbon {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 28px;
    border-radius: 12px;
    background: var(--xf3-gradient-dark);
    border: 1px solid rgba(255, 255, 255, .08);
}

.xf3-cta .xf3-cta__ribbon-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 20px;
    color: var(--xf3-primary-tint-2);
    background: rgba(255, 255, 255, .08);
}

.xf3-cta .xf3-cta__ribbon-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    color: #fff;
}

.xf3-cta .xf3-cta__ribbon .xf3-btn { flex: 0 0 auto; }
.xf3-cta .xf3-cta__ribbon .xf3-btn i { font-size: 14px; }

/* ---- event ---- */

.xf3-cta--event { background: #fff; }

.xf3-cta .xf3-cta__event {
    display: grid;
    grid-template-columns: 300px 1fr;
    overflow: hidden;
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-cta .xf3-cta__event-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 34px 28px;
    background: var(--xf3-soft);
    border-right: 1px solid var(--xf3-line);
}

.xf3-cta .xf3-cta__event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 26px;
    color: #fff;
    background: var(--xf3-gradient);
}

.xf3-cta .xf3-cta__event-meta { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.xf3-cta .xf3-cta__event-meta dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}
.xf3-cta .xf3-cta__event-meta dt i { margin-right: 6px; }
.xf3-cta .xf3-cta__event-meta dd {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-cta .xf3-cta__event-body { padding: 32px 34px; }
.xf3-cta .xf3-cta__event-body .xf-section-head { margin-bottom: 18px; }

.xf3-cta .xf3-cta__event-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.xf3-cta .xf3-cta__event-seats {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 12.5px;
}

.xf3-cta .xf3-cta__event-foot .xf3-cta__actions { margin-top: 0; }

/* ---- quotedark ---- */

.xf3-cta--quotedark { background: var(--xf3-dark); }

.xf3-cta .xf3-cta__quotedark {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 30px 20px 10px;
}

.xf3-cta .xf3-cta__qd-quote {
    font-size: 46px;
    line-height: 1;
    color: var(--xf3-primary-2);
    opacity: .8;
}

.xf3-cta .xf3-cta__qd-text {
    margin-top: 18px !important;
    font-size: clamp(24px, 3.4vw, 34px) !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -.01em;
}

.xf3-cta .xf3-cta__qd-by {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}

/* ---- downloads ---- */

.xf3-cta--downloads { background: var(--xf3-soft); }

.xf3-cta .xf3-cta__downloads {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xf3-cta .xf3-cta__dl-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    text-decoration: none;
}

.xf3-cta .xf3-cta__dl-icon { flex: 0 0 auto; }
.xf3-cta .xf3-cta__dl-name {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    min-width: 0;
}
.xf3-cta .xf3-cta__dl-btn { flex: 0 0 auto; }
.xf3-cta .xf3-cta__dl-btn i { font-size: 14px; }

/* ---- whatsapp ---- */

.xf3-cta--whatsapp {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

.xf3-cta .xf3-cta__wa {
    border-radius: var(--xf3-radius-lg);
    padding: 60px 40px;
    text-align: center;
    background: linear-gradient(135deg, #128c5e 0%, var(--xf3-whatsapp) 60%, #4ee08a 100%);
    box-shadow: 0 26px 60px rgba(37, 211, 102, .3);
}

.xf3-cta .xf3-cta__wa .xf3-cta__trust { color: rgba(255, 255, 255, .8); }
.xf3-cta .xf3-cta__wa .xf3-btn--whatsapp { background: #0b3d29; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.xf3-cta .xf3-cta__wa .xf3-btn--whatsapp:hover { background: #072b1d; color: #fff; }

/* ---- partnership ---- */

.xf3-cta--partnership { background: #fff; }

.xf3-cta .xf3-cta__partnership {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.xf3-cta .xf3-cta__benefits { padding: 32px 34px; box-shadow: var(--xf3-shadow-sm); }

.xf3-cta .xf3-cta__benefits-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px !important;
    color: var(--xf3-ink) !important;
}

.xf3-cta .xf3-cta__benefits-title i { color: var(--xf3-primary); }

.xf3-cta .xf3-cta__benefits ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.xf3-cta .xf3-cta__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--xf3-ink-2);
}

.xf3-cta .xf3-cta__benefits li i {
    margin-top: 2px;
    color: var(--xf3-success);
    font-size: 17px;
}

/* ---- mega ---- */

.xf3-cta--mega { background: var(--xf3-gradient-dark); }

.xf3-cta .xf3-cta__mega {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    padding: 26px 10px 10px;
}

.xf3-cta .xf3-cta__mega .xf-section-head__title {
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -.01em;
}

.xf3-cta .xf3-cta__mega .xf3-cta__trust { color: rgba(255, 255, 255, .55); }

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

@media (max-width: 991.98px) {
    .xf3-cta .xf3-cta__split,
    .xf3-cta .xf3-cta__partnership { grid-template-columns: 1fr; gap: 30px; }
    .xf3-cta .xf3-cta__card { flex-direction: column; align-items: stretch; gap: 26px; padding: 32px 28px; }
    .xf3-cta .xf3-cta__card-actions { min-width: 0; }
    .xf3-cta .xf3-cta__event { grid-template-columns: 1fr; }
    .xf3-cta .xf3-cta__event-date {
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--xf3-line);
    }
    .xf3-cta .xf3-cta__event-meta { flex-direction: row; flex-wrap: wrap; gap: 20px; }
    .xf3-cta .xf3-cta__gradient,
    .xf3-cta .xf3-cta__wa { padding: 48px 28px; }
}

@media (max-width: 575.98px) {
    .xf3-cta .xf3-cta__ts-meta { grid-template-columns: 1fr; }
    .xf3-cta .xf3-cta__cd { gap: 6px; }
    .xf3-cta .xf3-cta__cd-cell { min-width: 0; flex: 1 1 0; padding: 14px 6px; }
    .xf3-cta .xf3-cta__cd-num { font-size: 27px; }
    .xf3-cta .xf3-cta__cd-sep { display: none; }
    .xf3-cta .xf3-cta__ribbon { flex-wrap: nowrap; gap: 12px; padding: 14px 16px; }
    .xf3-cta .xf3-cta__ribbon-text { font-size: 13.5px; }
    .xf3-cta .xf3-cta__ribbon .xf3-btn { padding: 9px 14px; font-size: 12.5px; white-space: normal; }
    .xf3-cta .xf3-cta__dl-row { flex-wrap: wrap; padding: 18px; }
    .xf3-cta .xf3-cta__dl-btn { width: 100%; }
    .xf3-cta .xf3-cta__event-body { padding: 26px 22px; }
    .xf3-cta .xf3-cta__event-foot { flex-direction: column; align-items: stretch; }
    .xf3-cta .xf3-cta__event-foot .xf3-cta__actions { justify-content: stretch; }
    .xf3-cta .xf3-cta__event-foot .xf3-btn { flex: 1 1 auto; }
    .xf3-cta .xf3-cta__actions .xf3-btn { width: 100%; }
    .xf3-cta .xf3-cta__split-panel { padding: 26px 22px; }
}
/*
 * xFactory B3 — contact family (13 variants).
 * All rules scoped under .xf3-contact.
 * Variants: info, departments, offices, team, hours, social, qr,
 * urgent, legal, directory, locations, teamgrid, founder.
 */

.xf3-contact { background: var(--xf3-soft); }
.xf3-contact h3 { margin: 0; }
.xf3-contact p { margin: 0; }

.xf3-contact .xf3-contact__grid { margin-top: 6px; }

.xf3-contact .xf3-contact__card,
.xf3-contact .xf3-contact__dept,
.xf3-contact .xf3-contact__office,
.xf3-contact .xf3-contact__rep,
.xf3-contact .xf3-contact__qr,
.xf3-contact .xf3-contact__legal-card,
.xf3-contact .xf3-contact__person,
.xf3-contact .xf3-contact__loc {
    padding: 26px;
}

/* ---- shared text bits ---- */

.xf3-contact .xf3-contact__label {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-contact .xf3-contact__value {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--xf3-ink-2);
    overflow-wrap: anywhere;
}

.xf3-contact .xf3-contact__sub {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-contact .xf3-contact__sub i,
.xf3-contact .xf3-contact__address + .xf3-contact__sub i {
    margin-right: 6px;
    color: var(--xf3-primary);
}

.xf3-contact .xf3-contact__link { text-decoration: none; }
.xf3-contact .xf3-contact__link:hover { color: var(--xf3-primary); }

/* ---- info ---- */

.xf3-contact .xf3-contact__icon { margin-bottom: 2px; }

/* ---- departments ---- */

.xf3-contact .xf3-contact__dept-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.xf3-contact .xf3-contact__sla { white-space: nowrap; }

/* ---- offices ---- */

.xf3-contact .xf3-contact__address {
    margin: 10px 0 0;
    font-style: normal;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-contact .xf3-contact__maplink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-primary);
    text-decoration: none;
}

.xf3-contact .xf3-contact__maplink i { font-size: 14px; }
.xf3-contact .xf3-contact__maplink:hover { text-decoration: underline; }

/* ---- team (sales reps) ---- */

.xf3-contact .xf3-contact__rep { text-align: center; }

.xf3-contact .xf3-contact__avatar {
    max-width: 108px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 10px 26px rgba(15, 27, 51, .14);
}

.xf3-contact .xf3-contact__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-contact .xf3-contact__region { margin-top: 10px; }

.xf3-contact .xf3-contact__rep-mail {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13.5px;
}

.xf3-contact .xf3-contact__rep-mail i { font-size: 14px; }

/* ---- hours ---- */

.xf3-contact--hours { background: #fff; }

.xf3-contact .xf3-contact__hours-wrap { max-width: 880px; margin: 0 auto; }

.xf3-contact .xf3-contact__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.xf3-contact .xf3-contact__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: #137a3c;
    background: #ecfdf3;
    border: 1px solid #b6ebc9;
}

.xf3-contact .xf3-contact__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--xf3-success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .18);
}

.xf3-contact .xf3-contact__status-note {
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-contact .xf3-contact__table th[scope="row"] { font-weight: 700; color: var(--xf3-ink); }
.xf3-contact .xf3-contact__hours-time { font-family: var(--xf3-font-num); font-weight: 600; white-space: nowrap; }

.xf3-contact .xf3-note { text-align: center; }
.xf3-contact .xf3-note i { margin-right: 6px; }
.xf3-contact .xf3-note a { color: var(--xf3-primary); }

/* ---- social ---- */

.xf3-contact--social { background: #fff; }

.xf3-contact .xf3-contact__social {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.xf3-contact .xf3-contact__social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 30px 20px;
    text-decoration: none;
}

.xf3-contact .xf3-contact__social-name {
    margin-top: 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

/* ---- qr ---- */

.xf3-contact .xf3-contact__qr { text-align: center; }

.xf3-contact .xf3-contact__qr-media {
    max-width: 190px;
    margin: 0 auto;
    background: var(--xf3-soft-2);
}

.xf3-contact .xf3-contact__qr-tag {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #b45309;
    background: rgba(254, 243, 199, .95);
    white-space: nowrap;
}

.xf3-contact .xf3-contact__label i {
    margin-right: 8px;
    color: var(--xf3-primary);
}

/* ---- urgent ---- */

.xf3-contact--urgent {
    background: linear-gradient(135deg, var(--xf3-danger-night) 0%, var(--xf3-danger-night) 55%, var(--xf3-danger-night) 100%);
    color: rgba(255, 255, 255, .85);
}

.xf3-contact--urgent .xf-section-head__title { color: #fff; }
.xf3-contact--urgent .xf-eyebrow { color: var(--xf3-danger-tint); }
.xf3-contact--urgent .xf-section-head__subtitle { color: rgba(255, 255, 255, .7); }

.xf3-contact .xf3-contact__urgent-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    margin-bottom: 22px;
    border: 1px solid rgba(252, 165, 165, .28);
    border-radius: var(--xf3-radius-lg);
    background: rgba(255, 255, 255, .06);
}

.xf3-contact .xf3-contact__urgent-icon {
    flex: 0 0 auto;
    color: var(--xf3-danger-tint);
    background: rgba(252, 165, 165, .14);
}

.xf3-contact .xf3-contact__urgent-note {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.xf3-contact .xf3-contact__urgent-grid { gap: 18px; }

.xf3-contact .xf3-contact__urgent-card {
    display: block;
    padding: 24px;
    border-radius: var(--xf3-radius);
    border: 1px solid rgba(252, 165, 165, .22);
    background: rgba(255, 255, 255, .06);
    text-decoration: none;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.xf3-contact .xf3-contact__urgent-card:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(252, 165, 165, .5);
    transform: translateY(-3px);
}

.xf3-contact .xf3-contact__urgent-cardicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--xf3-danger-tint);
    background: rgba(252, 165, 165, .14);
}

.xf3-contact .xf3-contact__urgent-label {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.xf3-contact .xf3-contact__urgent-value {
    display: block;
    margin-top: 4px;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    overflow-wrap: anywhere;
}

.xf3-contact .xf3-contact__urgent-sub {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .62);
}

/* ---- legal ---- */

.xf3-contact--legal { background: #fff; }

.xf3-contact .xf3-contact__legal-card { padding: 28px 30px; }

.xf3-contact .xf3-contact__legal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px !important;
    padding-bottom: 16px;
    font-size: 16.5px !important;
    color: var(--xf3-ink) !important;
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-contact .xf3-contact__legal-title i { color: var(--xf3-primary); }

.xf3-contact .xf3-contact__dl { margin: 0; }

.xf3-contact .xf3-contact__dl-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--xf3-line);
    font-size: 14px;
}

.xf3-contact .xf3-contact__dl-row:last-child { border-bottom: none; }

.xf3-contact .xf3-contact__dl dt {
    flex: 0 0 44%;
    color: var(--xf3-muted);
}

.xf3-contact .xf3-contact__dl dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--xf3-ink-2);
    overflow-wrap: anywhere;
}

/* ---- directory ---- */

.xf3-contact--directory { background: #fff; }

.xf3-contact .xf3-contact__directory { padding: 6px 0; overflow: hidden; }

.xf3-contact .xf3-contact__dir-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    border-bottom: 1px solid var(--xf3-line);
    text-decoration: none;
    transition: background .2s ease;
}

.xf3-contact .xf3-contact__dir-row:last-child { border-bottom: none; }
.xf3-contact .xf3-contact__dir-row:hover { background: var(--xf3-primary-tint-8); }

.xf3-contact .xf3-contact__dir-icon { flex: 0 0 auto; }

.xf3-contact .xf3-contact__dir-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.xf3-contact .xf3-contact__dir-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-contact .xf3-contact__dir-contact {
    font-size: 13.5px;
    color: var(--xf3-muted);
    overflow-wrap: anywhere;
}

.xf3-contact .xf3-contact__dir-sla {
    flex: 0 0 auto;
    display: none;
}

.xf3-contact .xf3-contact__dir-arrow {
    flex: 0 0 auto;
    color: #b6c2d4;
    transition: transform .25s ease, color .25s ease;
}

.xf3-contact .xf3-contact__dir-row:hover .xf3-contact__dir-arrow {
    color: var(--xf3-primary);
    transform: translateX(3px);
}

@media (min-width: 768px) {
    .xf3-contact .xf3-contact__dir-sla { display: inline-flex; }
}

/* ---- locations ---- */

.xf3-contact .xf3-contact__loc {
    position: relative;
    padding: 28px 26px;
    text-decoration: none;
}

.xf3-contact .xf3-contact__loc-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 22px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-contact .xf3-contact__loc-city {
    margin-top: 16px !important;
    font-size: 20px;
}

.xf3-contact .xf3-contact__loc-services {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--xf3-ink-2);
}

.xf3-contact .xf3-contact__loc-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}

.xf3-contact .xf3-contact__loc-more i { transition: transform .25s ease; }
.xf3-contact .xf3-contact__loc:hover .xf3-contact__loc-more i { transform: translateX(3px); }

/* ---- teamgrid ---- */

.xf3-contact .xf3-contact__person { padding: 22px; }

.xf3-contact .xf3-contact__person-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.xf3-contact .xf3-contact__person-avatar {
    width: 60px;
    flex: 0 0 60px;
    border-radius: 50%;
    overflow: hidden;
}

.xf3-contact .xf3-contact__person-role {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-primary);
}

.xf3-contact .xf3-contact__person-spec {
    margin-top: 14px !important;
    padding-top: 14px;
    border-top: 1px dashed var(--xf3-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-contact .xf3-contact__person-spec i {
    margin-right: 7px;
    color: var(--xf3-primary);
}

/* ---- founder ---- */

.xf3-contact--founder { background: var(--xf3-soft); }

.xf3-contact .xf3-contact__founder {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
}

.xf3-contact .xf3-contact__founder-aside {
    padding: 26px;
    text-align: center;
}

.xf3-contact .xf3-contact__founder-portrait {
    border-radius: var(--xf3-radius);
    box-shadow: 0 14px 34px rgba(15, 27, 51, .14);
}

.xf3-contact .xf3-contact__founder-name {
    margin-top: 18px !important;
    font-size: 20px;
}

.xf3-contact .xf3-contact__founder-title {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xf3-primary);
}

.xf3-contact .xf3-contact__founder-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.xf3-contact .xf3-contact__founder-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--xf3-ink-2);
    background: var(--xf3-soft-2);
    transition: background .25s ease, color .25s ease;
}

.xf3-contact .xf3-contact__founder-social a:hover {
    background: var(--xf3-primary);
    color: #fff;
}

.xf3-contact .xf3-contact__founder-body {
    position: relative;
    padding: 36px 38px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-contact .xf3-contact__founder-quote {
    font-size: 40px;
    line-height: 1;
    color: var(--xf3-primary-2);
    opacity: .55;
}

.xf3-contact .xf3-contact__founder-bio {
    margin-top: 14px !important;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--xf3-ink-2);
}

.xf3-contact .xf3-contact__founder-sign {
    display: block;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--xf3-line);
}

.xf3-contact .xf3-contact__founder-signname {
    display: block;
    font-family: var(--secondary-font);
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-contact .xf3-contact__founder-signrole {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--xf3-muted);
}

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

@media (max-width: 991.98px) {
    .xf3-contact .xf3-contact__social { grid-template-columns: repeat(3, 1fr); }
    .xf3-contact .xf3-contact__founder { grid-template-columns: 1fr; gap: 26px; }
    .xf3-contact .xf3-contact__founder-portrait { max-width: 300px; margin: 0 auto; }
}

@media (max-width: 575.98px) {
    .xf3-contact .xf3-contact__social { grid-template-columns: repeat(2, 1fr); }
    .xf3-contact .xf3-contact__card,
    .xf3-contact .xf3-contact__dept,
    .xf3-contact .xf3-contact__office,
    .xf3-contact .xf3-contact__rep,
    .xf3-contact .xf3-contact__qr,
    .xf3-contact .xf3-contact__legal-card,
    .xf3-contact .xf3-contact__person,
    .xf3-contact .xf3-contact__loc { padding: 20px; }
    .xf3-contact .xf3-contact__urgent-head { flex-direction: column; align-items: flex-start; }
    .xf3-contact .xf3-contact__founder-body { padding: 26px 22px; }
    .xf3-contact .xf3-contact__dir-row { flex-wrap: wrap; padding: 16px 18px; gap: 12px; }
    .xf3-contact .xf3-contact__dl-row { flex-direction: column; gap: 4px; }
    .xf3-contact .xf3-contact__dl dd { text-align: left; }
    .xf3-contact .xf3-contact__table { min-width: 420px; }
}
/*
 * xFactory B3 — content family.
 * Variants: list, feature, hub, whitepaper, docs, author.
 * Every rule is scoped under .xf3-content.
 */

.xf3-content h3,
.xf3-content h4 { margin: 0; }
.xf3-content p { margin: 0; }

.xf3-content .xf3-ct-stretch {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.xf3-content [id^="xf3-hub-"] { scroll-margin-top: 90px; }

/* =====================================================================
   list — text-first article rows
   ===================================================================== */

.xf3-content .xf3-ct-list { border-top: 1px solid var(--xf3-line); }

.xf3-content .xf3-ct-list__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 128px;
    gap: 26px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--xf3-line);
    transition: padding-left .25s ease;
}

.xf3-content .xf3-ct-list__row:hover { padding-left: 8px; }

.xf3-content .xf3-ct-list__type {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-list__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-list__title a { color: inherit; transition: color .2s ease; }
.xf3-content .xf3-ct-list__title a:hover { color: var(--xf3-primary); }

.xf3-content .xf3-ct-list__excerpt {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-list__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #8494ab;
}

.xf3-content .xf3-ct-list__meta i { color: var(--xf3-primary); }

.xf3-content .xf3-ct-list__thumb {
    width: 128px;
    justify-self: end;
    border-radius: 12px;
    box-shadow: var(--xf3-shadow-sm);
}

/* =====================================================================
   feature — one large + one small editorial card
   ===================================================================== */

.xf3-content .xf3-ct-feat {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.xf3-content .xf3-ct-feat__big {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: #fff;
}

.xf3-content .xf3-ct-feat__media {
    border-radius: 0;
    min-height: 100%;
}

.xf3-content .xf3-ct-feat__body {
    display: flex;
    flex-direction: column;
    padding: 32px 30px;
}

.xf3-content .xf3-ct-feat__tag { align-self: flex-start; margin-bottom: 14px; }

.xf3-content .xf3-ct-feat__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.32;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-feat__text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-feat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-feat__foot i { margin-right: 5px; color: var(--xf3-primary); }
.xf3-content .xf3-ct-feat__foot .xf3-btn { position: relative; z-index: 3; }

.xf3-content .xf3-ct-feat__small {
    display: flex;
    flex-direction: column;
}

.xf3-content .xf3-ct-feat__small-media { border-radius: 0; }

.xf3-content .xf3-ct-feat__small-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.xf3-content .xf3-ct-feat__small-type {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-feat__small-title {
    margin-top: 10px;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-feat__small-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-feat__small-meta i { color: var(--xf3-primary); }

/* =====================================================================
   hub — anchor filter chips + document rows
   ===================================================================== */

.xf3-content--hub { background: var(--xf3-soft); }

.xf3-content .xf3-ct-hub__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.xf3-content .xf3-ct-hub__chips .xf3-chip {
    min-height: 40px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.xf3-content .xf3-ct-hub__chips .xf3-chip:hover {
    border-color: var(--xf3-primary);
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-hub__rows {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
    scroll-margin-top: 90px;
}

.xf3-content .xf3-ct-hub__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 150px 22px;
    gap: 18px;
    align-items: center;
    padding: 21px 26px;
    border-bottom: 1px solid var(--xf3-line);
    transition: background .2s ease;
}

.xf3-content .xf3-ct-hub__row:last-child { border-bottom: none; }
.xf3-content .xf3-ct-hub__row:hover { background: var(--xf3-primary-tint-8); }

.xf3-content .xf3-ct-hub__type {
    display: inline-block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-hub__title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-hub__excerpt {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-hub__meta {
    justify-self: end;
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    color: #8494ab;
    white-space: nowrap;
}

.xf3-content .xf3-ct-hub__go {
    color: #b6c3d6;
    font-size: 15px;
    transition: color .2s ease, transform .2s ease;
}

.xf3-content .xf3-ct-hub__row:hover .xf3-ct-hub__go {
    color: var(--xf3-primary);
    transform: translateX(3px);
}

/* =====================================================================
   whitepaper — cover + TOC + download
   ===================================================================== */

.xf3-content--whitepaper { background: var(--xf3-soft); }

.xf3-content .xf3-ct-wp {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 44px;
    align-items: center;
    padding: 40px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow);
}

.xf3-content .xf3-ct-wp__cover { position: relative; }

.xf3-content .xf3-ct-wp__img {
    box-shadow: 0 26px 50px rgba(15, 27, 51, .22);
}

.xf3-content .xf3-ct-wp__cover-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--xf3-primary);
}

.xf3-content .xf3-ct-wp__cover-badge i { font-size: 12px; }

.xf3-content .xf3-ct-wp__tag { margin-bottom: 14px; }

.xf3-content .xf3-ct-wp__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-wp__text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-wp__toc-head {
    margin: 24px 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--xf3-ink-2);
}

.xf3-content .xf3-ct-wp__toc {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: chapter;
}

.xf3-content .xf3-ct-wp__toc li {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px dashed var(--xf3-line);
}

.xf3-content .xf3-ct-wp__toc-num {
    font-family: var(--xf3-font-num);
    font-size: 14px;
    font-weight: 800;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-wp__toc-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-content .xf3-ct-wp__toc-page {
    font-size: 12.5px;
    color: #8494ab;
    white-space: nowrap;
}

.xf3-content .xf3-ct-wp__foot {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.xf3-content .xf3-ct-wp__meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-wp__meta i { color: var(--xf3-primary); }

/* =====================================================================
   docs — documentation rows with update date
   ===================================================================== */

.xf3-content .xf3-ct-docs {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-content .xf3-ct-docs__row {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr 190px 22px;
    gap: 18px;
    align-items: center;
    padding: 20px 26px;
    border-bottom: 1px solid var(--xf3-line);
    transition: background .2s ease;
}

.xf3-content .xf3-ct-docs__row:last-child { border-bottom: none; }
.xf3-content .xf3-ct-docs__row:hover { background: var(--xf3-primary-tint-8); }

.xf3-content .xf3-ct-docs__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 64px;
    height: 60px;
    border-radius: 12px;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-docs__icon i { font-size: 20px; }

.xf3-content .xf3-ct-docs__icon b {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
}

.xf3-content .xf3-ct-docs__icon--pdf { color: #c026d3; background: #fae8ff; }
.xf3-content .xf3-ct-docs__icon--zip { color: #b45309; background: #fef3c7; }
.xf3-content .xf3-ct-docs__icon--fw { color: var(--xf3-primary); background: var(--xf3-primary-soft); }
.xf3-content .xf3-ct-docs__icon--doc { color: var(--xf3-ink-2); background: var(--xf3-soft-2); }

.xf3-content .xf3-ct-docs__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-docs__excerpt {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-docs__date {
    justify-self: end;
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #8494ab;
    white-space: nowrap;
}

.xf3-content .xf3-ct-docs__date i {
    margin-right: 5px;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-docs__go {
    color: #b6c3d6;
    font-size: 15px;
    transition: color .2s ease, transform .2s ease;
}

.xf3-content .xf3-ct-docs__row:hover .xf3-ct-docs__go {
    color: var(--xf3-primary);
    transform: translateY(2px);
}

/* =====================================================================
   author — avatar + bio + credentials
   ===================================================================== */

.xf3-content .xf3-ct-author {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    padding: 36px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-content .xf3-ct-author__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    background: var(--xf3-soft);
    border-radius: var(--xf3-radius);
}

.xf3-content .xf3-ct-author__avatar {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: var(--xf3-shadow-sm);
    background: var(--xf3-soft-2);
}

.xf3-content .xf3-ct-author__name {
    margin-top: 18px;
    font-size: 20px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-author__role {
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--xf3-primary);
}

.xf3-content .xf3-ct-author__exp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-author__exp i { color: var(--xf3-primary); }

.xf3-content .xf3-ct-author__cert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--xf3-line);
    text-align: left;
}

.xf3-content .xf3-ct-author__cert img {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
}

.xf3-content .xf3-ct-author__cert span {
    font-size: 12px;
    line-height: 1.5;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-author__bio {
    font-size: 16px;
    line-height: 1.85;
    color: var(--xf3-ink-2);
}

.xf3-content .xf3-ct-author__cred-head {
    margin: 26px 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--xf3-ink-2);
}

.xf3-content .xf3-ct-author__creds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
}

.xf3-content .xf3-ct-author__creds li {
    display: flex;
    align-items: center;
    gap: 13px;
}

.xf3-content .xf3-ct-author__cred-icon {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.xf3-content .xf3-ct-author__creds strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-content .xf3-ct-author__creds span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--xf3-muted);
}

.xf3-content .xf3-ct-author__signoff {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 28px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #ecfdf3;
    border: 1px solid #b6ebc9;
    font-size: 13.5px;
    line-height: 1.65;
    color: #137a3c;
}

.xf3-content .xf3-ct-author__signoff i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 18px;
}

.xf3-content .xf3-ct-author__signoff strong { color: #0c5f2e; }

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .xf3-content .xf3-ct-feat { grid-template-columns: 1fr; }
    .xf3-content .xf3-ct-feat__big { grid-template-columns: 1fr; }
    .xf3-content .xf3-ct-feat__media { min-height: 0; }
    .xf3-content .xf3-ct-wp { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
    .xf3-content .xf3-ct-wp__cover { max-width: 320px; margin: 0 auto; }
    .xf3-content .xf3-ct-author { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
    .xf3-content .xf3-ct-author__side { max-width: 420px; margin: 0 auto; }
    .xf3-content .xf3-ct-docs__row { grid-template-columns: 64px 1fr 22px; }
    .xf3-content .xf3-ct-docs__date {
        grid-column: 2 / 3;
        justify-self: start;
        text-align: left;
        margin-top: 2px;
    }
}

@media (max-width: 767.98px) {
    .xf3-content .xf3-ct-hub__row { grid-template-columns: 1fr 22px; }
    .xf3-content .xf3-ct-hub__meta {
        grid-column: 1 / 2;
        justify-self: start;
        text-align: left;
        margin-top: 2px;
    }
    .xf3-content .xf3-ct-list__row { grid-template-columns: 1fr 92px; gap: 16px; }
    .xf3-content .xf3-ct-list__thumb { width: 92px; }
    .xf3-content .xf3-ct-list__title { font-size: 17.5px; }
    .xf3-content .xf3-ct-author__creds { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .xf3-content .xf3-ct-list__thumb { display: none; }
    .xf3-content .xf3-ct-list__row { grid-template-columns: 1fr; }
    .xf3-content .xf3-ct-feat__body { padding: 24px 20px; }
    .xf3-content .xf3-ct-feat__title { font-size: 20.5px; }
    .xf3-content .xf3-ct-wp { padding: 20px; }
    .xf3-content .xf3-ct-wp__title { font-size: 22px; }
    .xf3-content .xf3-ct-wp__toc li { grid-template-columns: 30px 1fr; }
    .xf3-content .xf3-ct-wp__toc-page { grid-column: 2 / 3; }
    .xf3-content .xf3-ct-hub__row,
    .xf3-content .xf3-ct-docs__row { padding: 18px 18px; }
    .xf3-content .xf3-ct-docs__row { grid-template-columns: 56px 1fr 22px; gap: 14px; }
    .xf3-content .xf3-ct-docs__icon { width: 56px; height: 54px; }
}
/*
 * xFactory B3 — faq family.
 * Variants: accordion, grid, contact, glossary, categories.
 * Every rule is scoped under .xf3-faq.
 */

.xf3-faq h3 { margin: 0; }
.xf3-faq p { margin: 0; }

.xf3-faq details summary {
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xf3-faq details summary::-webkit-details-marker { display: none; }

.xf3-faq .xf3-fq-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 880px;
    margin: 18px auto 0;
}

.xf3-faq .xf3-fq-note i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--xf3-primary);
}

/* =====================================================================
   accordion (also used inside contact)
   ===================================================================== */

.xf3-faq .xf3-fq-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 880px;
    margin: 0 auto;
}

.xf3-faq .xf3-fq-acc--sm {
    max-width: none;
    margin: 0;
}

.xf3-faq .xf3-fq-acc__item {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.xf3-faq .xf3-fq-acc__item[open] {
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-faq .xf3-fq-acc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 44px;
    padding: 18px 22px;
    transition: color .2s ease;
}

.xf3-faq .xf3-fq-acc__q {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--xf3-ink);
}

.xf3-faq .xf3-fq-acc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    transition: transform .3s ease, background .25s ease, color .25s ease;
}

.xf3-faq .xf3-fq-acc__item[open] .xf3-fq-acc__icon {
    transform: rotate(45deg);
    color: #fff;
    background: var(--xf3-primary);
}

.xf3-faq .xf3-fq-acc__answer {
    padding: 0 54px 20px 22px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--xf3-muted);
    border-top: 1px dashed var(--xf3-line);
    padding-top: 14px;
    margin: 0 22px;
}

/* =====================================================================
   grid — two-column compact Q/A
   ===================================================================== */

.xf3-faq .xf3-fq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 1040px;
    margin: 0 auto;
}

.xf3-faq .xf3-fq-grid__item {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    padding: 4px 20px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.xf3-faq .xf3-fq-grid__item[open] {
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-faq .xf3-fq-grid__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    padding: 12px 0;
}

.xf3-faq .xf3-fq-grid__q {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--xf3-ink);
}

.xf3-faq .xf3-fq-grid__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    transition: transform .3s ease, background .25s ease, color .25s ease;
}

.xf3-faq .xf3-fq-grid__item[open] .xf3-fq-grid__icon {
    transform: rotate(45deg);
    color: #fff;
    background: var(--xf3-primary);
}

.xf3-faq .xf3-fq-grid__answer {
    padding: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--xf3-muted);
    border-top: 1px dashed var(--xf3-line);
    padding-top: 12px;
}

/* =====================================================================
   contact — accordion + sticky contact card
   ===================================================================== */

.xf3-faq--contact { background: var(--xf3-soft); }

.xf3-faq .xf3-fq-contact {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

.xf3-faq .xf3-fq-contact__main { min-width: 0; }

.xf3-faq .xf3-fq-contact__card {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, .82);
    box-shadow: var(--xf3-shadow);
}

.xf3-faq .xf3-fq-contact__icon {
    margin-bottom: 16px;
    background: rgba(255, 255, 255, .1);
    color: var(--xf3-primary-tint-2);
}

.xf3-faq .xf3-fq-contact__title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.xf3-faq .xf3-fq-contact__text {
    margin-top: 9px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .7);
}

.xf3-faq .xf3-fq-contact__btn {
    width: 100%;
    margin-top: 12px;
}

.xf3-faq .xf3-fq-contact__meta {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xf3-faq .xf3-fq-contact__meta li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.xf3-faq .xf3-fq-contact__meta i {
    color: var(--xf3-primary-tint);
    font-size: 14px;
}

/* =====================================================================
   glossary — letter-anchored dl
   ===================================================================== */

.xf3-faq--glossary { background: var(--xf3-soft); }

.xf3-faq .xf3-fq-gloss__letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.xf3-faq .xf3-fq-gloss__letters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-family: var(--xf3-font-num);
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    background: #fff;
    border: 1px solid var(--xf3-line);
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.xf3-faq .xf3-fq-gloss__letters a:hover {
    color: var(--xf3-primary);
    border-color: var(--xf3-primary);
    transform: translateY(-2px);
}

.xf3-faq .xf3-fq-gloss {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 980px;
    margin: 0 auto;
}

.xf3-faq .xf3-fq-gloss__group { scroll-margin-top: 90px; }

.xf3-faq .xf3-fq-gloss__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 12px;
    font-family: var(--xf3-font-num);
    font-size: 20px;
    font-weight: 800;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-faq .xf3-fq-gloss__list {
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    overflow: hidden;
}

.xf3-faq .xf3-fq-gloss__row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    padding: 16px 24px;
    border-bottom: 1px dashed var(--xf3-line);
}

.xf3-faq .xf3-fq-gloss__row:last-child { border-bottom: none; }

.xf3-faq .xf3-fq-gloss__row dt {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    overflow-wrap: anywhere;
}

.xf3-faq .xf3-fq-gloss__row dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

/* =====================================================================
   categories — topic cards with question counts
   ===================================================================== */

.xf3-faq .xf3-fq-cat {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.xf3-faq .xf3-fq-cat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.xf3-faq .xf3-fq-cat__count {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    white-space: nowrap;
}

.xf3-faq .xf3-fq-cat__title {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
    transition: color .2s ease;
}

.xf3-faq .xf3-fq-cat:hover .xf3-fq-cat__title { color: var(--xf3-primary); }

.xf3-faq .xf3-fq-cat__blurb {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-faq .xf3-fq-cat__go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-primary);
}

.xf3-faq .xf3-fq-cat__go i { transition: transform .25s ease; }
.xf3-faq .xf3-fq-cat:hover .xf3-fq-cat__go i { transform: translateX(4px); }

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .xf3-faq .xf3-fq-contact { grid-template-columns: 1fr; }
    .xf3-faq .xf3-fq-contact__card {
        position: static;
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .xf3-faq .xf3-fq-grid { grid-template-columns: 1fr; }
    .xf3-faq .xf3-fq-gloss__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 18px;
    }
}

@media (max-width: 575.98px) {
    .xf3-faq .xf3-fq-acc__summary { padding: 16px 18px; }
    .xf3-faq .xf3-fq-acc__answer {
        margin: 0 18px;
        padding: 12px 0 16px;
    }
    .xf3-faq .xf3-fq-gloss__letters a {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-faq .xf3-fq-acc__icon,
    .xf3-faq .xf3-fq-grid__icon,
    .xf3-faq .xf3-fq-gloss__letters a,
    .xf3-faq .xf3-fq-cat__go i {
        transition: none;
    }
}
/*
 * xFactory B3 — forms family (17 variants).
 * Block rules scoped under .xf3-forms; the global .xf3-floating and
 * .xf3-stickybar atoms are owned by this family too.
 * Real forms: contact, quick, sample, catalogreq, callback, booking,
 * distributor, partner, warranty, newsletter, capture, newsletter-band.
 * Static: meeting, survey, floating, stickybar, sidebar.
 */

.xf3-forms { background: var(--xf3-soft); }
.xf3-forms h3 { margin: 0; }

/* Light headings on the dark capture panel and gradient band
   (catalog dark flag is off for these blocks). */
.xf3-forms__capture .xf-section-head__title,
.xf3-forms__band .xf-section-head__title { color: #fff !important; }
.xf3-forms__capture .xf-section-head__subtitle,
.xf3-forms__band .xf-section-head__subtitle { color: rgba(255, 255, 255, .8) !important; }
.xf3-forms__capture .xf-eyebrow { color: var(--xf3-primary-tint-3); }
.xf3-forms__band .xf-eyebrow { color: var(--xf3-primary-tint-4); }

.xf3-forms .xf3-forms__card {
    padding: 32px;
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-5);
}

.xf3-forms *,
.xf3-floating *,
.xf3-stickybar * { box-sizing: border-box; }

/* Fixed-position blocks must not sit inside a transformed/will-change
   reveal wrapper: persistent transform or will-change:transform on the
   ancestor creates a containing block, anchoring fixed bars/buttons to the
   section instead of the viewport. */
.xf-block:has(.xf3-stickybar),
.xf-block:has(.xf3-floating),
.xf-block.xf-fixed-host {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

/* ---- split intro + form ---- */

.xf3-forms .xf3-forms__split {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 48px;
    align-items: start;
}

.xf3-forms .xf3-forms__intro { position: sticky; top: 24px; }

.xf3-forms .xf3-forms__bullets {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xf3-forms .xf3-forms__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--xf3-ink-2);
}

.xf3-forms .xf3-forms__bullets i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--xf3-success);
    font-size: 17px;
}

.xf3-forms .xf3-forms__bullets--sm li { font-size: 13.5px; gap: 9px; }

/* ---- form grid ---- */

.xf3-forms .xf3-forms__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.xf3-forms .xf3-forms__row--stack { grid-template-columns: 1fr; }

.xf3-forms .xf3-field--full { grid-column: 1 / -1; }

.xf3-forms .xf3-forms__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.xf3-forms .xf3-forms__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--xf3-line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.xf3-forms .xf3-forms__check input { accent-color: var(--xf3-primary); margin: 0; }

.xf3-forms .xf3-forms__check:has(input:checked) {
    border-color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary-deep);
}

.xf3-forms .xf3-forms__submit {
    width: 100%;
    margin-top: 18px;
}

.xf3-forms .xf3-forms__submit i { font-size: 15px; }

.xf3-forms .xf3-form-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--xf3-muted);
    text-align: center;
}

.xf3-forms .xf3-forms__split .xf3-form-note { text-align: left; }
.xf3-forms .xf3-forms__note-center { text-align: center; }

/* ---- quick ---- */

.xf3-forms--quick { background: #fff; }

.xf3-forms .xf3-forms__quick { max-width: 600px; margin: 0 auto; }

.xf3-forms .xf3-forms__card--narrow {
    max-width: 520px;
    margin: 8px auto 0;
}

.xf3-forms .xf3-forms__quick .xf3-forms__submit { margin-top: 4px; }

/* ---- newsletter ---- */

.xf3-forms--newsletter { background: var(--xf3-soft); }

.xf3-forms .xf3-forms__news-card { padding: 28px; }

.xf3-forms .xf3-forms__inline {
    display: flex;
    gap: 10px;
}

.xf3-forms .xf3-forms__inline .xf3-input { flex: 1 1 auto; min-width: 0; }
.xf3-forms .xf3-forms__inline .xf3-btn { flex: 0 0 auto; }

.xf3-forms .xf3-forms__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- capture (dark panel) ---- */

.xf3-forms--capture {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

.xf3-forms .xf3-forms__capture {
    text-align: center;
    padding: 58px 36px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-gradient-dark);
    box-shadow: 0 26px 60px rgba(12, 23, 48, .28);
}

.xf3-forms .xf3-forms__capture-icon { margin: 0 auto 18px; }

.xf3-forms .xf3-forms__capture-form { max-width: 560px; margin: 22px auto 0; }

.xf3-forms .xf3-forms__inline--capture .xf3-input {
    border: none;
    height: 52px;
    font-size: 15px;
}

.xf3-forms .xf3-forms__inline--capture .xf3-btn { height: 52px; }

.xf3-forms .xf3-forms__feedback-light.is-success {
    background: rgba(22, 163, 74, .18);
    color: #bbf7d0;
    border-color: rgba(187, 247, 208, .3);
}

.xf3-forms .xf3-forms__feedback-light.is-error {
    background: rgba(var(--xf-danger-rgb), .2);
    color: var(--xf3-danger-tint);
    border-color: rgba(254, 202, 202, .3);
}

/* ---- newsletter band (horizontal) ---- */

.xf3-forms--newsletter-band {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

.xf3-forms .xf3-forms__band {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    padding: 46px 48px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-gradient);
    box-shadow: 0 22px 50px rgba(var(--bs-primary-rgb), .28);
}

.xf3-forms .xf3-forms__band .xf-section-head { margin-bottom: 14px; }

.xf3-forms .xf3-forms__band-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xf3-forms .xf3-forms__band-bullets li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.xf3-forms .xf3-forms__band-bullets i { color: var(--xf3-primary-tint-4); }

.xf3-forms .xf3-forms__band-form .xf3-input { height: 50px; border: none; }
.xf3-forms .xf3-forms__band-form .xf3-btn { height: 50px; }

.xf3-forms .xf3-forms__band-note {
    color: rgba(255, 255, 255, .7) !important;
    text-align: left;
}

/* ---- meeting ---- */

.xf3-forms--meeting { background: #fff; }

.xf3-forms .xf3-forms__tz-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.xf3-forms .xf3-forms__tz { padding: 24px; }

.xf3-forms .xf3-forms__tz-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--xf3-ink);
}

.xf3-forms .xf3-forms__tz-title i { color: var(--xf3-primary); }

.xf3-forms .xf3-forms__slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.xf3-forms .xf3-forms__slot {
    justify-content: flex-start;
    width: 100%;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.xf3-forms .xf3-forms__slot:hover {
    border-color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary-deep);
}

.xf3-forms .xf3-forms__meeting-foot {
    margin-top: 28px;
    text-align: center;
}

.xf3-forms .xf3-forms__meeting-foot .xf3-note { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---- survey ---- */

.xf3-forms--survey { background: var(--xf3-soft); }

.xf3-forms .xf3-forms__survey-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.xf3-forms .xf3-forms__choice {
    position: relative;
    display: block;
    padding: 24px 22px;
    cursor: pointer;
}

.xf3-forms .xf3-forms__choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.xf3-forms .xf3-forms__choice::after {
    content: "\2713";
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--xf3-primary);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
}

.xf3-forms .xf3-forms__choice.is-selected,
.xf3-forms .xf3-forms__choice:has(input:checked) {
    border-color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    box-shadow: 0 14px 34px rgba(var(--bs-primary-rgb), .14);
}

.xf3-forms .xf3-forms__choice.is-selected::after,
.xf3-forms .xf3-forms__choice:has(input:checked)::after {
    opacity: 1;
    transform: scale(1);
}

.xf3-forms .xf3-forms__choice-title {
    display: block;
    margin-top: 14px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-forms .xf3-forms__choice-sub {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-forms .xf3-forms__survey-note { text-align: center; }
.xf3-forms .xf3-forms__survey-note i { margin-right: 6px; }

/* ---- sidebar ---- */

.xf3-forms--sidebar { background: transparent; }

.xf3-forms .xf3-forms__sidebar { padding: 26px 24px; }

.xf3-forms .xf3-forms__sidebar-title {
    font-size: 19px;
    color: var(--xf3-ink);
}

.xf3-forms .xf3-forms__sidebar-sub {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--xf3-muted);
}

.xf3-forms .xf3-forms__sidebar .xf3-forms__bullets { margin: 16px 0 20px; }
.xf3-forms .xf3-forms__sidebar .xf3-forms__submit { margin-top: 16px; }

/* ===================================================================
 * Global atoms: floating stack + mobile sticky bar
 * =================================================================== */

.xf3-forms--bare {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ---- floating ---- */

.xf3-floating {
    position: fixed;
    right: 20px;
    /* sit above the site-wide chat bubble (bottom-right, ~60px) */
    bottom: 92px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xf3-floating__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 27, 51, .22);
    border: 1px solid var(--xf3-line);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.xf3-floating__btn:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15, 27, 51, .3); }

.xf3-floating__btn--wa { color: #1da851; }
.xf3-floating__btn--wa:hover { background: var(--xf3-whatsapp); color: #fff; border-color: var(--xf3-whatsapp); }
.xf3-floating__btn--mail { color: var(--xf3-primary); }
.xf3-floating__btn--mail:hover { background: var(--xf3-primary); color: #fff; border-color: var(--xf3-primary); }
.xf3-floating__btn--call { color: var(--xf3-ink-2); }
.xf3-floating__btn--call:hover { background: var(--xf3-dark); color: #fff; border-color: var(--xf3-dark); }

.xf3-floating__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: rgba(12, 23, 48, .9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.xf3-floating__btn:hover .xf3-floating__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---- sticky bar (mobile only) ---- */

.xf3-stickybar { display: none; }

@media (max-width: 767.98px) {
    .xf3-stickybar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1045;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--xf3-line);
        box-shadow: 0 -10px 30px rgba(15, 27, 51, .12);
        transform: translateY(110%);
        transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    }

    .xf3-stickybar.is-visible { transform: translateY(0); }
    .xf3-stickybar.is-dismissed { display: none; }

    /* reserve space for the site-wide chat bubble (bottom-right) so the
       bar's CTA buttons never sit underneath it */
    .xf3-stickybar__inner { padding-right: 78px; }

    .xf3-stickybar__inner {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 600px;
        margin: 0 auto;
    }

    .xf3-stickybar__text {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--xf3-ink);
    }

    .xf3-stickybar__text span {
        display: block;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--xf3-muted);
    }

    .xf3-stickybar__btns {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .xf3-stickybar__btns .xf3-btn {
        min-height: 42px;
        padding: 9px 14px;
    }

    .xf3-stickybar__quote { white-space: nowrap; }

    .xf3-stickybar__close {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--xf3-soft-2);
        color: var(--xf3-muted);
        font-size: 15px;
        cursor: pointer;
    }

    .xf3-stickybar__close:active { background: var(--xf3-line); }
}

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

@media (max-width: 991.98px) {
    .xf3-forms .xf3-forms__split { grid-template-columns: 1fr; gap: 30px; }
    .xf3-forms .xf3-forms__intro { position: static; }
    .xf3-forms .xf3-forms__tz-grid { grid-template-columns: 1fr; }
    .xf3-forms .xf3-forms__survey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xf3-forms .xf3-forms__band { grid-template-columns: 1fr; gap: 24px; padding: 38px 30px; }
}

@media (max-width: 767.98px) {
    .xf3-forms .xf3-forms__card { padding: 22px 18px; }
    .xf3-forms .xf3-forms__row { grid-template-columns: 1fr; }
    .xf3-forms .xf3-forms__capture { padding: 42px 22px; }
    .xf3-forms .xf3-forms__band { padding: 32px 22px; }

    .xf3-forms .xf3-forms__inline { flex-direction: column; }
    .xf3-forms .xf3-forms__inline .xf3-btn { width: 100%; }

    .xf3-forms .xf3-forms__survey-grid { grid-template-columns: 1fr; }

    /* floating stack keeps clear of the mobile sticky bar */
    .xf3-floating {
        right: 12px;
        bottom: 96px;
        gap: 10px;
    }

    .xf3-floating__btn { width: 46px; height: 46px; font-size: 19px; }
    .xf3-floating__label { display: none; }
}

@media (max-width: 390px) {
    .xf3-forms .xf3-forms__card { padding: 20px 15px; }
    .xf3-forms .xf3-forms__checks { gap: 8px; }
    .xf3-forms .xf3-forms__check { flex: 1 1 100%; justify-content: flex-start; }
    .xf3-stickybar__text { font-size: 12px; }
    .xf3-stickybar__text span { display: none; }
    .xf3-stickybar__btns .xf3-btn { padding: 9px 11px; font-size: 12.5px; }
}
/*
 * xFactory B3 — hero family (14 variants).
 * product · form · bgimg · minimal · event · app · badges · videocard
 * wave · gradient · pattern · portrait · offer · search
 * Every rule is scoped under .xf3-hero.
 */

/* ======================================================================
   Shell + shared hero typography
   ====================================================================== */

.xf-b3.xf3-hero {
    position: relative;
    padding-top: clamp(56px, 7.5vw, 104px);
    padding-bottom: clamp(56px, 7.5vw, 104px);
    overflow: hidden;
}

.xf3-hero .xf3-inner {
    z-index: 2;
}

.xf3-hero__title {
    margin: 0 0 16px;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--xf3-ink);
    overflow-wrap: anywhere;
}

.xf3-hero__subtitle {
    margin: 0 0 24px;
    max-width: 580px;
    font-size: clamp(15px, 1.35vw, 17.5px);
    line-height: 1.7;
    color: var(--xf3-muted);
    overflow-wrap: anywhere;
}

.xf3-hero .xf-eyebrow {
    margin-bottom: 14px;
    color: var(--xf3-primary);
}

.xf3-hero__actions .xf-buttons {
    margin-top: 4px;
}

/* ======================================================================
   Split layout (product / form / event / app / badges / videocard /
   portrait / offer)
   ====================================================================== */

.xf3-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(30px, 4.5vw, 64px);
    align-items: center;
}

.xf3-hero__copy {
    min-width: 0;
}

.xf3-hero__aside {
    min-width: 0;
}

/* ---- spec chip rows ---- */

.xf3-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
}

.xf3-hero__chips--center {
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 0;
}

.xf3-hero .xf3-chip {
    padding: 9px 15px;
    font-weight: 500;
}

.xf3-hero .xf3-chip strong {
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-hero__chip-note {
    color: var(--xf3-muted);
    font-size: 12.5px;
}

.xf3-hero .xf3-chip--dark strong {
    color: #fff;
}

.xf3-hero .xf3-chip--dark .xf3-hero__chip-note {
    color: rgba(255, 255, 255, 0.7);
}

/* ======================================================================
   Media frames + floating cards
   ====================================================================== */

.xf3-hero__media {
    position: relative;
    border-radius: var(--xf3-radius-lg);
    border: 1px solid var(--xf3-line);
    background: #fff;
    overflow: hidden;
}

.xf3-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-hero__media--shadow {
    box-shadow: var(--xf3-shadow);
}

.xf3-hero__float {
    position: absolute;
    z-index: 3;
}

.xf3-hero__float--tl { top: 18px; left: 18px; }
.xf3-hero__float--tr { top: 18px; right: 18px; }
.xf3-hero__float--bl { bottom: 18px; left: 18px; }
.xf3-hero__float--br { bottom: 18px; right: 18px; }

.xf3-hero__spec-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 14px;
    box-shadow: var(--xf3-shadow);
    max-width: 250px;
}

.xf3-hero__spec-card .xf3-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-size: 17px;
}

.xf3-hero__spec-card b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    line-height: 1.3;
}

.xf3-hero__spec-card small {
    display: block;
    font-size: 12px;
    color: var(--xf3-muted);
    line-height: 1.4;
}

/* ======================================================================
   Variant: product launch
   ====================================================================== */

.xf3-hero--product {
    background: linear-gradient(180deg, var(--xf3-soft) 0%, #fff 78%);
}

/* ======================================================================
   Variant: form (inquiry card)
   ====================================================================== */

.xf3-hero--form {
    background: var(--xf3-soft);
}

.xf3-hero__form-media {
    margin-top: 26px;
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-hero__form-card {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow);
    padding: clamp(22px, 3vw, 34px);
}

.xf3-hero__form-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-hero__form-sub {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-hero__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.xf3-hero__form-grid .xf3-field {
    margin-bottom: 0;
}

.xf3-hero__form-full {
    grid-column: 1 / -1;
}

.xf3-hero__form-submit {
    width: 100%;
    min-height: 48px;
}

/* ======================================================================
   Variant: background image with scrim
   ====================================================================== */

.xf3-hero--bgimg {
    color: rgba(255, 255, 255, 0.85);
    background: var(--xf3-dark);
}

.xf3-hero__bg,
.xf3-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.xf3-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-hero__scrim {
    background: linear-gradient(115deg, rgba(10, 18, 38, 0.86) 0%, rgba(10, 18, 38, 0.55) 55%, rgba(10, 18, 38, 0.32) 100%);
}

.xf3-hero__scrim--l { opacity: 0.62; }
.xf3-hero__scrim--m { opacity: 0.82; }
.xf3-hero__scrim--s { opacity: 1; }

.xf3-hero--bgimg .xf3-hero__title { color: #fff; }
.xf3-hero--bgimg .xf3-hero__subtitle { color: rgba(255, 255, 255, 0.78); }
.xf3-hero--bgimg .xf-eyebrow { color: var(--xf3-primary-tint-2); }
.xf3-hero--bgimg .xf-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}
.xf3-hero--bgimg .xf-btn-outline:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

/* glass stat cards (bgimg + wave) */
.xf3-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 38px;
}

.xf3-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 132px;
    padding: 16px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.xf3-hero__stat i {
    font-size: 16px;
    color: var(--xf3-primary-tint-2);
    margin-bottom: 4px;
}

.xf3-hero__stat b {
    font-family: var(--xf3-font-num);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.xf3-hero__stat span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

/* ======================================================================
   Variant: minimal centered
   ====================================================================== */

.xf3-hero--minimal {
    background: #fff;
}

.xf3-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary-deep);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.xf3-hero__kicker i {
    font-size: 14px;
}

.xf3-hero__trust-center {
    justify-content: center;
    margin-top: 26px;
}

/* ======================================================================
   Variant: trade-show event
   ====================================================================== */

.xf3-hero--event {
    background: linear-gradient(180deg, #fff 0%, var(--xf3-soft) 100%);
}

.xf3-hero__event-card {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
    padding: 20px 22px;
    border-radius: var(--xf3-radius);
    background: var(--xf3-gradient-dark);
    color: #fff;
    box-shadow: var(--xf3-shadow);
}

.xf3-hero__event-row {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
}

.xf3-hero__event-row + .xf3-hero__event-row {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ======================================================================
   Variant: app / platform
   ====================================================================== */

.xf3-hero--app {
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%),
        var(--xf3-soft);
}

.xf3-hero__mini {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    background: rgba(255, 255, 255, 0.8);
}

.xf3-hero__mini-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
}

.xf3-hero__mini-item i {
    color: var(--xf3-primary);
    font-size: 17px;
}

.xf3-hero__mini-item b {
    font-family: var(--xf3-font-num);
    font-size: 17px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-hero__mini-item span {
    color: var(--xf3-muted);
}

.xf3-hero__browser {
    position: relative;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--xf3-shadow);
}

.xf3-hero__browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--xf3-soft);
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cdd8ea;
}

.xf3-hero__dot:first-child { background: #fc6c62; }
.xf3-hero__dot:nth-child(2) { background: #f6bf4f; }
.xf3-hero__dot:nth-child(3) { background: #45d483; }

.xf3-hero__browser-url {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    font-size: 12px;
    color: var(--xf3-muted);
    white-space: nowrap;
}

.xf3-hero__browser-url i { font-size: 12px; color: var(--xf3-success); }

.xf3-hero__browser-body {
    background: #fff;
}

.xf3-hero__browser-body img {
    display: block;
    width: 100%;
}

/* ======================================================================
   Variant: trust badges
   ====================================================================== */

.xf3-hero__badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.xf3-hero__badge-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--xf3-line);
    border-radius: 12px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.xf3-hero__badge-tile:hover {
    transform: translateY(-3px);
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-hero__badge-tile .xf3-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    font-size: 16px;
    border-radius: 10px;
}

/* ======================================================================
   Variant: video card
   ====================================================================== */

.xf3-hero--videocard {
    background: var(--xf3-soft);
}

.xf3-hero__bullets {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.xf3-hero__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--xf3-ink-2);
}

.xf3-hero__bullets .xf3-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 14px;
}

.xf3-hero__video {
    position: relative;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    border: 1px solid var(--xf3-line);
    box-shadow: var(--xf3-shadow);
    background: var(--xf3-dark);
    aspect-ratio: 16 / 10;
}

.xf3-hero__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-hero__video-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

/* ======================================================================
   Variant: wave divider (dark)
   ====================================================================== */

.xf3-hero--wave {
    padding-bottom: clamp(130px, 14vw, 200px);
    color: rgba(255, 255, 255, 0.85);
    background: var(--xf3-gradient-dark);
}

.xf3-hero--wave .xf3-hero__title { color: #fff; }
.xf3-hero--wave .xf3-hero__subtitle { color: rgba(255, 255, 255, 0.74); }
.xf3-hero--wave .xf-eyebrow { color: var(--xf3-primary-tint-2); }
.xf3-hero--wave .xf-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}
.xf3-hero--wave .xf-btn-outline:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.xf3-hero__waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(90px, 12vw, 150px);
    z-index: 1;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.xf3-hero__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 108%;
    height: 100%;
}

.xf3-hero__wave--back {
    fill: rgba(255, 255, 255, 0.14);
    animation: xf3-hero-wave-a 11s ease-in-out infinite alternate;
}

.xf3-hero__wave--front {
    width: 100%;
    fill: #fff;
    animation: xf3-hero-wave-b 15s ease-in-out infinite alternate;
}

@keyframes xf3-hero-wave-a {
    from { transform: translateX(-4%); }
    to   { transform: translateX(2%); }
}

@keyframes xf3-hero-wave-b {
    from { transform: translateX(0); }
    to   { transform: translateX(-3%); }
}

/* ======================================================================
   Variant: animated gradient
   ====================================================================== */

.xf3-hero--gradient {
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(120deg, var(--xf3-primary-hover) 0%, var(--xf3-primary) 30%, var(--xf3-primary-2) 55%, var(--xf3-primary-hover) 80%, var(--xf3-primary) 100%);
    background-size: 240% 240%;
    animation: xf3-hero-gradient-pan 20s ease-in-out infinite;
}

@keyframes xf3-hero-gradient-pan {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.xf3-hero--gradient .xf3-hero__title { color: #fff; }
.xf3-hero--gradient .xf3-hero__subtitle { color: rgba(255, 255, 255, 0.82); }
.xf3-hero--gradient .xf-eyebrow { color: rgba(255, 255, 255, 0.85); }

.xf3-hero__orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}

.xf3-hero__orb--a {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -80px;
    background: rgba(255, 255, 255, 0.22);
}

.xf3-hero__orb--b {
    width: 340px;
    height: 340px;
    bottom: -120px;
    left: -70px;
    background: rgba(124, 196, 255, 0.35);
}

.xf3-hero--gradient .xf-btn-primary {
    background: #fff;
    color: var(--xf3-primary);
    box-shadow: 0 12px 28px rgba(7, 32, 84, 0.3);
}

.xf3-hero--gradient .xf-btn-primary:hover {
    background: #fff;
    color: var(--xf3-primary-hover);
}

.xf3-hero--gradient .xf-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.xf3-hero--gradient .xf-btn-outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* ======================================================================
   Variant: blueprint grid pattern (dark)
   ====================================================================== */

.xf3-hero--pattern {
    color: rgba(255, 255, 255, 0.82);
    background-color: var(--xf3-dark);
    background-image:
        linear-gradient(rgba(127, 176, 255, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 176, 255, 0.10) 1px, transparent 1px),
        radial-gradient(1000px 520px at 50% -20%, rgba(29, 84, 173, 0.55), transparent 65%);
    background-size: 44px 44px, 44px 44px, 100% 100%;
}

.xf3-hero--pattern .xf3-hero__title { color: #fff; }
.xf3-hero--pattern .xf3-hero__subtitle { color: rgba(255, 255, 255, 0.72); }
.xf3-hero--pattern .xf-eyebrow { color: var(--xf3-primary-tint); }
.xf3-hero--pattern .xf-btn-primary {
    background: #fff;
    color: var(--xf3-primary);
}
.xf3-hero--pattern .xf-btn-primary:hover {
    background: var(--xf3-primary-tint-7);
    color: var(--xf3-primary-hover);
}
.xf3-hero--pattern .xf-btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}
.xf3-hero--pattern .xf-btn-outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
}

.xf3-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
}

.xf3-hero__fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 18px;
    text-align: center;
    border-radius: var(--xf3-radius);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(127, 176, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: xf3-hero-floaty 7s ease-in-out infinite;
}

.xf3-hero__fact:nth-child(2) { animation-delay: 1.2s; }
.xf3-hero__fact:nth-child(3) { animation-delay: 2.4s; }

.xf3-hero__fact .xf3-icon {
    margin-bottom: 4px;
}

.xf3-hero__fact b {
    font-family: var(--xf3-font-num);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}

.xf3-hero__fact span:last-child {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.68);
}

@keyframes xf3-hero-floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.xf3-hero__anno {
    position: absolute;
    z-index: 1;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(158, 194, 255, 0.5);
    pointer-events: none;
}

.xf3-hero__anno--tl { top: 22px; left: 26px; }
.xf3-hero__anno--br { bottom: 22px; right: 26px; }

/* ======================================================================
   Variant: founder portrait
   ====================================================================== */

.xf3-hero--portrait {
    background: linear-gradient(180deg, #fff 0%, var(--xf3-soft) 100%);
}

.xf3-hero__sign {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--xf3-ink);
}

.xf3-hero__sign i {
    color: var(--xf3-primary);
    font-size: 16px;
}

.xf3-hero__sign span {
    font-family: var(--secondary-font);
    font-style: italic;
    font-size: 19px;
    font-weight: 700;
}

.xf3-hero__stars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-hero__portrait {
    position: relative;
    padding: 26px 26px 0;
}

.xf3-hero__quote-bubble {
    position: absolute;
    top: 6px;
    right: 30px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--xf3-gradient);
    color: #fff;
    font-size: 22px;
    box-shadow: var(--xf3-shadow);
}

.xf3-hero__portrait-media {
    box-shadow: var(--xf3-shadow);
    border: 6px solid #fff;
}

.xf3-hero__portrait-plate {
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 14px;
    box-shadow: var(--xf3-shadow);
    white-space: nowrap;
}

.xf3-hero__portrait-plate .xf3-icon {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

.xf3-hero__portrait-plate b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-hero__portrait-plate small {
    font-size: 12px;
    color: var(--xf3-muted);
}

/* ======================================================================
   Variant: limited offer + countdown
   ====================================================================== */

.xf3-hero--offer {
    background: linear-gradient(180deg, #fff8ee 0%, #fff 60%);
}

.xf3-hero__countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.xf3-hero__cd-cell {
    flex: 1 1 74px;
    min-width: 74px;
    max-width: 104px;
    padding: 12px 8px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 14px;
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-hero__cd-cell b {
    display: block;
    font-family: var(--xf3-font-num);
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--xf3-primary);
    font-variant-numeric: tabular-nums;
}

.xf3-hero__cd-cell span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

.xf3-hero__cd-ended {
    flex-basis: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--xf3-danger-bg);
    border: 1px solid var(--xf3-danger-tint);
    color: var(--xf3-danger-deep);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.xf3-hero__countdown.is-ended .xf3-hero__cd-cell {
    display: none;
}

.xf3-hero__conditions {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.xf3-hero__conditions li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--xf3-ink-2);
}

.xf3-hero__conditions i {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xf3-hero__deal {
    position: relative;
}

.xf3-hero__ribbon {
    position: absolute;
    top: 14px;
    left: -6px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px 9px 14px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.35);
}

/* ======================================================================
   Variant: catalog search
   ====================================================================== */

.xf3-hero--search {
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(var(--bs-primary-rgb), 0.09), transparent 60%),
        var(--xf3-soft);
}

.xf3-hero__search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 16px;
    box-shadow: var(--xf3-shadow);
    margin-bottom: 18px;
}

.xf3-hero__search-icon {
    flex: 0 0 auto;
    padding-left: 10px;
    color: var(--xf3-muted);
    font-size: 17px;
}

.xf3-hero__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: var(--xf3-ink);
    padding: 0 6px;
}

.xf3-hero__search-input:focus {
    outline: none;
}

.xf3-hero__search-input::placeholder {
    color: #93a2b8;
}

.xf3-hero__search-btn {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 11px;
}

.xf3-hero__suggest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.xf3-hero__suggest-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-hero__suggest-label i { font-size: 13px; }

.xf3-hero__suggest-chip {
    appearance: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--xf3-line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.xf3-hero__suggest-chip:hover {
    border-color: var(--xf3-primary);
    color: var(--xf3-primary);
    box-shadow: var(--xf3-shadow-sm);
    transform: translateY(-1px);
}

.xf3-hero__search-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-hero__search-note i {
    color: var(--xf3-primary);
}

/* ======================================================================
   Centered layout shared
   ====================================================================== */

.xf3-hero__center {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.xf3-hero__center .xf3-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}

.xf3-hero__center .xf-buttons {
    justify-content: center;
}

/* ======================================================================
   Responsive
   ====================================================================== */

@media (max-width: 991.98px) {
    .xf3-hero__grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    /* Aside follows copy on every split variant */
    .xf3-hero__copy { order: 1; }
    .xf3-hero__aside { order: 2; }

    .xf3-hero__subtitle { max-width: 680px; }

    /* Floating cards stack below media instead of overlapping it */
    .xf3-hero__media {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .xf3-hero__media img { order: 1; }

    .xf3-hero__float {
        position: static;
        transform: none;
        margin: 10px 14px 0;
        max-width: none;
    }

    .xf3-hero__float:last-child { margin-bottom: 14px; }

    .xf3-hero__facts {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .xf3-hero__anno { display: none; }

    .xf3-hero__portrait {
        max-width: 420px;
        margin: 24px auto 0;
    }

    .xf3-hero__video {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575.98px) {
    .xf-b3.xf3-hero {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .xf3-hero--wave {
        padding-bottom: 120px;
    }

    .xf3-hero__title {
        font-size: clamp(26px, 7.4vw, 32px);
    }

    .xf3-hero__subtitle {
        font-size: 14.5px;
    }

    /* Full-width buttons, comfortable tap targets */
    .xf3-hero .xf-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .xf3-hero .xf-buttons .xf-btn {
        width: 100%;
        min-height: 46px;
    }

    .xf3-hero__form-grid {
        grid-template-columns: 1fr;
    }

    .xf3-hero__mini {
        gap: 12px 18px;
    }

    .xf3-hero__stat {
        min-width: calc(50% - 7px);
        flex: 1 1 calc(50% - 7px);
        padding: 14px 12px;
    }

    .xf3-hero__cd-cell {
        flex-basis: calc(50% - 5px);
        max-width: none;
    }

    .xf3-hero__search-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    .xf3-hero__search-icon {
        display: none;
    }

    .xf3-hero__search-input {
        height: 44px;
        padding: 0 4px;
    }

    .xf3-hero__search-btn {
        width: 100%;
    }

    .xf3-hero__suggest {
        gap: 8px;
    }

    .xf3-hero__badges {
        grid-template-columns: 1fr 1fr;
    }

    .xf3-hero__quote-bubble {
        width: 46px;
        height: 46px;
        font-size: 18px;
        right: 18px;
    }

    .xf3-hero__portrait-plate {
        padding: 10px 16px;
    }

    .xf3-hero__browser-url {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ======================================================================
   Reduced motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .xf3-hero--gradient {
        animation: none;
    }

    .xf3-hero__wave--back,
    .xf3-hero__wave--front {
        animation: none;
    }

    .xf3-hero__fact {
        animation: none;
    }
}
/*
 * xFactory B3 — iconcards family.
 * Variants: badges · seal · bordered · minimal · offset · tooling ·
 *           packaging · aftersales · values · markets.
 * Every rule is scoped under .xf3-iconcards.
 */

.xf3-iconcards h3 { margin: 0; }
.xf3-iconcards p { margin: 0; }
.xf3-iconcards ul { margin: 0; padding: 0; list-style: none; }

/* Shared card text rhythm ------------------------------------------------ */

.xf3-iconcards .xf3-ic-card,
.xf3-iconcards .xf3-ic-off,
.xf3-iconcards .xf3-ic-pack,
.xf3-iconcards .xf3-ic-market { padding: 26px 24px; }

.xf3-iconcards .xf3-ic-card__title,
.xf3-iconcards .xf3-ic-off__title,
.xf3-iconcards .xf3-ic-tool__title,
.xf3-iconcards .xf3-ic-pack__title,
.xf3-iconcards .xf3-ic-market__title {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-card__text,
.xf3-iconcards .xf3-ic-off__text,
.xf3-iconcards .xf3-ic-tool__text,
.xf3-iconcards .xf3-ic-pack__text,
.xf3-iconcards .xf3-ic-market__text {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

/* ================================================================ badges */
/* Large circular medallion badges, centered. */

.xf3-iconcards--badges { background: linear-gradient(180deg, var(--xf3-primary-tint-8) 0%, #ffffff 70%); }

.xf3-iconcards .xf3-ic-badges { gap: 26px; }

.xf3-iconcards .xf3-ic-badge {
    position: relative;
    text-align: center;
    padding: 34px 22px 28px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.xf3-iconcards .xf3-ic-badge:hover {
    transform: translateY(-6px);
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-iconcards .xf3-ic-badge__medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    font-size: 34px;
    color: var(--xf3-primary);
    background:
        radial-gradient(circle at 50% 38%, #ffffff 55%, var(--xf3-primary-soft) 56%);
    border: 2px solid var(--xf3-primary-tint-4);
    box-shadow: 0 0 0 8px var(--xf3-primary-tint-8);
    margin-bottom: 18px;
}

.xf3-iconcards .xf3-ic-badge__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-badge__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-badge__tag {
    display: inline-block;
    margin-top: 16px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
}

/* ================================================================== seal */
/* Big guarantee seal medallion beside a coverage checklist band. */

.xf3-iconcards--seal { background: #fff; }

.xf3-iconcards .xf3-ic-seal {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 38px;
    align-items: center;
    padding: 42px;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--xf3-primary-tint-8) 0%, #ffffff 52%),
        #fff;
}

.xf3-iconcards .xf3-ic-seal__stamp { text-align: center; }

.xf3-iconcards .xf3-ic-seal__ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 50%;
    color: var(--xf3-primary);
    background:
        radial-gradient(circle, #ffffff 58%, var(--xf3-primary-soft) 59%, #ffffff 62%);
    border: 3px solid var(--xf3-primary);
    box-shadow: 0 0 0 10px #fff, 0 0 0 12px var(--xf3-primary-soft), var(--xf3-shadow);
}

.xf3-iconcards .xf3-ic-seal__ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 2px dashed var(--xf3-primary-tint-2);
    animation: xf3-seal-spin 26s linear infinite;
}

.xf3-iconcards .xf3-ic-seal__ring i { font-size: 46px; }
.xf3-iconcards .xf3-ic-seal__ring strong {
    font-size: 22px;
    letter-spacing: .14em;
    color: var(--xf3-ink);
}
.xf3-iconcards .xf3-ic-seal__ring span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-seal__caption {
    margin: 22px auto 0;
    max-width: 270px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-seal__head {
    margin: 0 0 20px;
    font-size: 19px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-seal__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 26px;
}

.xf3-iconcards .xf3-ic-seal__row {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.xf3-iconcards .xf3-ic-seal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 18px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-iconcards .xf3-ic-seal__row h4 {
    margin: 2px 0 3px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-seal__row p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

@keyframes xf3-seal-spin { to { transform: rotate(360deg); } }

/* ============================================================== bordered */
/* Classic bordered icon feature cards (xf3-card base + tag corner). */

.xf3-iconcards .xf3-ic-card__tag {
    position: absolute;
    top: 18px;
    right: 18px;
}

.xf3-iconcards .xf3-ic-card__icon {
    margin-bottom: 16px;
}

/* =============================================================== minimal */
/* Borderless, hairline-divided minimal grid. */

.xf3-iconcards .xf3-ic-minimal { gap: 0; }

.xf3-iconcards .xf3-ic-min {
    position: relative;
    padding: 8px 16px 26px 0;
    border-top: 2px solid var(--xf3-line);
    transition: border-color .3s ease;
}

.xf3-iconcards .xf3-ic-min:hover { border-top-color: var(--xf3-primary); }

.xf3-iconcards .xf3-ic-min__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 22px 0 14px;
    border-radius: 50%;
    font-size: 19px;
    color: var(--xf3-primary);
    background: transparent;
}

.xf3-iconcards .xf3-ic-min__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-min__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.68;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-min__tag {
    display: inline-block;
    margin-top: 13px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--xf3-primary);
    text-transform: uppercase;
}

/* ================================================================ offset */
/* Overlapping offset cards with ghost numerals (editorial). */

.xf3-iconcards .xf3-ic-offset {
    gap: 24px;
    counter-reset: xf3-off;
}

.xf3-iconcards .xf3-ic-off {
    position: relative;
    counter-increment: xf3-off;
    background: #fff;
}

.xf3-iconcards .xf3-ic-offset > .xf3-ic-off:nth-child(even) { transform: translateY(30px); }
.xf3-iconcards .xf3-ic-offset > .xf3-ic-off:nth-child(even):hover { transform: translateY(22px); }

.xf3-iconcards .xf3-ic-off::after {
    content: counter(xf3-off, decimal-leading-zero);
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #eef3fb;
    font-family: var(--xf3-font-num);
}

.xf3-iconcards .xf3-ic-off__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-size: 23px;
    color: #fff;
    background: var(--xf3-gradient);
    box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), .28);
    margin-bottom: 18px;
}

.xf3-iconcards .xf3-ic-off__tag {
    display: inline-block;
    margin-top: 15px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--xf3-ink-2);
    background: var(--xf3-soft);
}

/* =============================================================== tooling */
/* Technical spec-sheet cards: dark square icon + mono spec tag. */

.xf3-iconcards--tooling { background: var(--xf3-soft); }

.xf3-iconcards .xf3-ic-tooling { gap: 22px; }

.xf3-iconcards .xf3-ic-tool {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 12px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

.xf3-iconcards .xf3-ic-tool:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
}

.xf3-iconcards .xf3-ic-tool__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--xf3-line);
}

.xf3-iconcards .xf3-ic-tool__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    font-size: 20px;
    color: #fff;
    background: var(--xf3-dark);
}

.xf3-iconcards .xf3-ic-tool__spec {
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.xf3-iconcards .xf3-ic-tool__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-tool__foot i { color: var(--xf3-primary); font-size: 15px; }

/* ============================================================= packaging */
/* Soft tinted header zone with a white medallion icon. */

.xf3-iconcards .xf3-ic-pack { padding: 0; }

.xf3-iconcards .xf3-ic-pack__head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 122px;
    background: linear-gradient(135deg, var(--xf3-primary-tint-7) 0%, var(--xf3-primary-tint-5) 100%);
}

.xf3-iconcards .xf3-ic-pack:nth-child(even) .xf3-ic-pack__head {
    background: linear-gradient(135deg, #eefaf4 0%, #e4f7ee 100%);
}

.xf3-iconcards .xf3-ic-pack__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 27px;
    color: var(--xf3-primary);
    background: #fff;
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-iconcards .xf3-ic-pack:nth-child(even) .xf3-ic-pack__icon { color: #0f8a52; }

.xf3-iconcards .xf3-ic-pack__body { padding: 22px 22px 24px; }
.xf3-iconcards .xf3-ic-pack__tag { margin-bottom: 11px; }

/* ============================================================ aftersales */
/* Horizontal claim rows with icon left and chevron right. */

.xf3-iconcards--aftersales { background: #fbfdfc; }
.xf3-iconcards .xf3-ic-aftersales { gap: 18px; }

.xf3-iconcards .xf3-ic-as {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    background: #fff;
    border: 1px solid #dcece3;
    border-radius: var(--xf3-radius);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}

.xf3-iconcards .xf3-ic-as:hover {
    transform: translateY(-4px);
    box-shadow: var(--xf3-shadow-sm);
    border-color: #9bd8bb;
}

.xf3-iconcards .xf3-ic-as__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    font-size: 21px;
    color: #0f8a52;
    background: #e9f8f0;
}

.xf3-iconcards .xf3-ic-as__body { flex: 1; min-width: 0; }

.xf3-iconcards .xf3-ic-as__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-iconcards .xf3-ic-as__text {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-iconcards .xf3-ic-as__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #0f8a52;
    background: #e9f8f0;
}

.xf3-iconcards .xf3-ic-as__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    color: #9eb3a8;
    transition: background .25s ease, color .25s ease;
}

.xf3-iconcards .xf3-ic-as:hover .xf3-ic-as__go { background: #e9f8f0; color: #0f8a52; }

/* ================================================================ values */
/* Oversized gradient icon rings on three centered cards. */

.xf3-iconcards--values { background: var(--xf3-dark); }
.xf3-iconcards--values .xf-section-head__title { color: #fff; }
.xf3-iconcards--values .xf-eyebrow { color: var(--xf3-primary-tint); }
.xf3-iconcards--values .xf-section-head__subtitle { color: rgba(255,255,255,.68); }

.xf3-iconcards .xf3-ic-values { gap: 24px; }

.xf3-iconcards .xf3-ic-val {
    position: relative;
    text-align: center;
    padding: 38px 30px 36px;
    border-radius: var(--xf3-radius-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease;
}

.xf3-iconcards .xf3-ic-val:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.09);
}

.xf3-iconcards .xf3-ic-val__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 32px;
    color: #fff;
    background: var(--xf3-gradient);
    box-shadow: 0 0 0 9px rgba(79, 141, 255, .15), 0 16px 34px rgba(var(--bs-primary-rgb), .4);
    margin-bottom: 20px;
}

.xf3-iconcards .xf3-ic-val__kicker {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--xf3-primary-tint);
    text-transform: uppercase;
}

.xf3-iconcards .xf3-ic-val__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.xf3-iconcards .xf3-ic-val__text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
}

/* ================================================================ markets */
/* Stat-led cards with a big deployment number. */

.xf3-iconcards .xf3-ic-market__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.xf3-iconcards .xf3-ic-market__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 21px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-iconcards .xf3-ic-market__num {
    font-family: var(--xf3-font-num);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    text-align: right;
    color: var(--xf3-ink);
    overflow-wrap: anywhere;
}

.xf3-iconcards .xf3-ic-market__num small {
    display: block;
    margin-top: 4px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--xf3-muted);
}

/* ============================================================= responsive */

@media (max-width: 991.98px) {
    .xf3-iconcards .xf3-ic-seal {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 32px 26px;
    }

    .xf3-iconcards .xf3-ic-seal__ring {
        width: 210px;
        height: 210px;
    }

    .xf3-iconcards .xf3-ic-offset > .xf3-ic-off:nth-child(even) { transform: none; }
    .xf3-iconcards .xf3-ic-offset > .xf3-ic-off:nth-child(even):hover { transform: translateY(-6px); }
}

@media (max-width: 575.98px) {
    .xf3-iconcards .xf3-ic-seal { padding: 26px 18px; }
    .xf3-iconcards .xf3-ic-seal__list { grid-template-columns: 1fr; gap: 16px; }
    .xf3-iconcards .xf3-ic-card,
    .xf3-iconcards .xf3-ic-off,
    .xf3-iconcards .xf3-ic-pack,
    .xf3-iconcards .xf3-ic-market { padding: 22px 20px; }
    .xf3-iconcards .xf3-ic-pack__body { padding: 20px; }
    .xf3-iconcards .xf3-ic-val { padding: 32px 22px; }
    .xf3-iconcards .xf3-ic-badge { padding: 30px 20px 24px; }
}

/* ================================================== motion / accessibility */

@media (prefers-reduced-motion: reduce) {
    .xf3-iconcards .xf3-ic-seal__ring::before { animation: none; }
    .xf3-iconcards .xf3-ic-badge,
    .xf3-iconcards .xf3-ic-tool,
    .xf3-iconcards .xf3-ic-as,
    .xf3-iconcards .xf3-ic-val,
    .xf3-iconcards .xf3-ic-off { transition: none; }
}
/*
 * xFactory B3 — logos family.
 * Variants: cloud · press · countries · wall.
 * Every rule is scoped under .xf3-logos.
 */

.xf3-logos img { display: block; max-width: 100%; }
.xf3-logos p { margin: 0; }

.xf3-logos__note { margin-top: 26px; }
.xf3-logos__note--center { text-align: center; }

/* =========================================================== cloud === */
/* Static grayscale logo tiles that gain colour on hover. */

.xf3-logos__cloud {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.xf3-logos__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

a.xf3-logos__tile { cursor: pointer; }

.xf3-logos__tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--xf3-shadow-sm);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-logos__img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
    filter: grayscale(1) opacity(.72);
    transition: filter .3s ease, transform .3s ease;
}

.xf3-logos__tile:hover .xf3-logos__img {
    filter: grayscale(0) opacity(1);
}

.xf3-logos__wordmark {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.35;
    color: #6b7891;
    transition: color .3s ease;
}

.xf3-logos__tile:hover .xf3-logos__wordmark { color: var(--xf3-ink); }

/* =========================================================== press === */
/* Dark editorial "As seen in" wordmark strip. */

.xf3-logos--press {
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, .82);
}

.xf3-logos--press .xf-section-head__title { color: #fff; }
.xf3-logos--press .xf-section-head__subtitle { color: rgba(255, 255, 255, .68); }
.xf3-logos--press .xf-eyebrow { color: var(--xf3-primary-tint); }

.xf3-logos__press {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.xf3-logos__press-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 22px 34px;
    color: rgba(255, 255, 255, .78);
    transition: color .25s ease;
}

.xf3-logos__press-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .16);
}

.xf3-logos__press-name {
    font-family: var(--secondary-font);
    font-size: 23px;
    line-height: 1.1;
    white-space: nowrap;
}

.xf3-logos__press-item--bold .xf3-logos__press-name { font-weight: 800; font-style: normal; }
.xf3-logos__press-item--italic .xf3-logos__press-name { font-weight: 600; font-style: italic; }

.xf3-logos__press-arrow {
    font-size: 15px;
    opacity: 0;
    transform: translateX(-6px);
    color: var(--xf3-primary-tint);
    transition: opacity .25s ease, transform .25s ease;
}

a.xf3-logos__press-item:hover { color: #fff; }
a.xf3-logos__press-item:hover .xf3-logos__press-arrow { opacity: 1; transform: translateX(0); }

.xf3-logos__note--light { color: rgba(255, 255, 255, .55); }

/* ======================================================= countries === */
/* Soft band of country chips with round 2-letter code badges. */

.xf3-logos--countries { background: var(--xf3-soft); }

.xf3-logos__countries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.xf3-logos__chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 10px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 999px;
    min-height: 52px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a.xf3-logos__chip { cursor: pointer; }

.xf3-logos__chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--xf3-shadow-sm);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-logos__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-logos__chip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.xf3-logos__chip-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-logos__chip-meta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--xf3-muted);
}

/* ============================================================ wall === */
/* Large partner tiles with country annotation. */

.xf3-logos__wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.xf3-logos__wall-tile {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.xf3-logos__wall-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 26px 22px;
    border-bottom: 1px solid var(--xf3-line);
    background: linear-gradient(180deg, #fff 0%, var(--xf3-primary-tint-8) 100%);
}

.xf3-logos__wall-logo img {
    max-height: 56px;
    width: auto;
    max-width: 100%;
    filter: grayscale(1) opacity(.78);
    transition: filter .3s ease, transform .3s ease;
}

.xf3-logos__wall-tile:hover .xf3-logos__wall-logo img {
    filter: grayscale(0) opacity(1);
    transform: scale(1.04);
}

.xf3-logos__wall-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-family: var(--xf3-font-num);
    font-size: 22px;
    font-weight: 900;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-logos__wall-foot {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 16px 17px;
}

.xf3-logos__wall-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xf3-logos__wall-country {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-logos__wall-country i { color: var(--xf3-primary); font-size: 12px; }

/* ====================================================== responsive === */

@media (max-width: 991.98px) {
    .xf3-logos__cloud { grid-template-columns: repeat(4, 1fr); }
    .xf3-logos__wall { grid-template-columns: repeat(2, 1fr); }
    .xf3-logos__press-item { padding: 18px 26px; }
    .xf3-logos__press-item:not(:last-child)::after { display: none; }
}

@media (max-width: 575.98px) {
    .xf3-logos__cloud { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .xf3-logos__wall { grid-template-columns: 1fr; }
    .xf3-logos__press-name { font-size: 19px; }
    .xf3-logos__press-item { padding: 14px 18px; }
    .xf3-logos__tile { min-height: 82px; padding: 14px; }
    .xf3-logos__countries { gap: 10px; }
    .xf3-logos__chip { padding: 7px 15px 7px 8px; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-logos *,
    .xf3-logos *::before,
    .xf3-logos *::after { transition: none !important; }
}
/*
 * xFactory B3 — map family.
 * Variants: projects · band.
 * Every rule is scoped under .xf3-map.
 */

.xf3-map h3 { margin: 0; }
.xf3-map p { margin: 0; }
.xf3-map ol,
.xf3-map ul { margin: 0; padding: 0; list-style: none; }
.xf3-map address { font-style: normal; margin: 0; }
.xf3-map img { display: block; max-width: 100%; }

/* ======================================================== projects === */
/* World map card beside a numbered recent-project list. */

.xf3-map__projects {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

.xf3-map__mapcard {
    position: relative;
    background: #0d1626;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    min-height: 420px;
}

.xf3-map__maplink {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
}

.xf3-map__mapcard > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-map__maplink img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.xf3-map__mapcard:hover .xf3-map__maplink img { transform: scale(1.03); }

/* Numbered pins — decorative, never block the lightbox link. */
.xf3-map__pin {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.xf3-map__pin-num {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--xf3-font-num);
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--xf3-primary);
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(8, 18, 42, .45);
}

.xf3-map__pin-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(79, 141, 255, .55);
    animation: xf3-map-pulse 2.4s ease-out infinite;
}

@keyframes xf3-map-pulse {
    0% { transform: scale(.7); opacity: .8; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

.xf3-map__mapstat {
    position: absolute;
    z-index: 3;
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(12, 23, 48, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.xf3-map__mapstat-num {
    font-family: var(--xf3-font-num);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.xf3-map__mapstat-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, .75);
}

/* Right-side project list */
.xf3-map__listwrap {
    display: flex;
    flex-direction: column;
}

.xf3-map__listtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--xf3-ink);
    margin-bottom: 14px;
}

.xf3-map__listtitle i { color: var(--xf3-primary); }

.xf3-map__list {
    flex: 1;
}

.xf3-map__row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 14px;
    border-radius: var(--xf3-radius);
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease;
}

.xf3-map__row + .xf3-map__row { border-top: 1px solid var(--xf3-line); }

.xf3-map__row:hover {
    background: var(--xf3-soft);
    border-color: var(--xf3-line);
}

.xf3-map__rownum {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-family: var(--xf3-font-num);
    font-size: 13px;
    font-weight: 800;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-map__rowtext { min-width: 0; flex: 1; }

.xf3-map__rowhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.xf3-map__country {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-map .xf3-map__year {
    flex: 0 0 auto;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    color: var(--xf3-primary-deep);
}

.xf3-map__detail {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-map__actions { margin-top: 18px; }

/* ============================================================ band === */
/* Edge-to-edge static map with floating address pin card. */

.xf3-map--band { overflow-x: clip; }

.xf3-map__bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 8px;
}

.xf3-map__band {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    background: #0d1626;
}

.xf3-map__band-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-map__band-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 15, 34, .82) 0%, rgba(8, 15, 34, .42) 48%, rgba(8, 15, 34, .15) 100%),
        linear-gradient(0deg, rgba(8, 15, 34, .75) 0%, rgba(8, 15, 34, 0) 55%);
}

.xf3-map__band .container,
.xf3-map__band .container-fluid {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
}

.xf3-map__pincard {
    max-width: 560px;
    padding: 30px 32px 28px;
    border-radius: var(--xf3-radius-lg);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--xf3-shadow);
    border: 1px solid rgba(255, 255, 255, .6);
}

.xf3-map__pin-title {
    margin-top: 14px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--xf3-ink);
}

.xf3-map__address {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-ink-2);
}

.xf3-map__address span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.xf3-map__address i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--xf3-primary);
}

.xf3-map__address a { color: var(--xf3-primary); font-weight: 700; }

.xf3-map__sites {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--xf3-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xf3-map__site {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.xf3-map__site-dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-map__site-text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.5;
}

.xf3-map__site-text strong { color: var(--xf3-ink); font-size: 13.5px; }

.xf3-map__site-text em {
    color: var(--xf3-muted);
    font-style: normal;
}

.xf3-map__pinactions { margin-top: 22px; }
.xf3-map__pinactions .xf-buttons { margin: 0; }

/* ====================================================== responsive === */

@media (max-width: 991.98px) {
    .xf3-map__projects { grid-template-columns: 1fr; }
    .xf3-map__mapcard { min-height: 340px; }
}

@media (max-width: 767.98px) {
    .xf3-map__band { min-height: 0; display: block; }
    .xf3-map__band-img {
        position: relative;
        height: 260px;
        object-position: center 58%;
    }
    .xf3-map__band-scrim {
        inset: auto;
        top: 0;
        left: 0;
        right: 0;
        height: 260px;
        background: linear-gradient(0deg, rgba(8, 15, 34, .8) 0%, rgba(8, 15, 34, .25) 100%);
    }
    .xf3-map__band .container,
    .xf3-map__band .container-fluid { padding-top: 0; padding-bottom: 0; }
    .xf3-map__pincard {
        max-width: none;
        border-radius: var(--xf3-radius-lg) var(--xf3-radius-lg) 0 0;
        padding: 24px 20px;
    }
    .xf3-map__mapstat {
        left: 12px;
        bottom: 12px;
        padding: 10px 14px;
    }
    .xf3-map__mapstat-num { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .xf3-map__rowhead { flex-direction: column; align-items: flex-start; gap: 5px; }
    .xf3-map__mapcard { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-map__pin-pulse { animation: none; opacity: 0; }
    .xf3-map *,
    .xf3-map *::before,
    .xf3-map *::after { transition: none !important; }
}
/*
 * xFactory B3 — media family.
 * Variants: collection · masonry · square · compare · videogrid ·
 * collage · hotspots · office · showroom.
 * Every rule is scoped under .xf3-media.
 */

.xf3-media h3 { margin: 0; }
.xf3-media p { margin: 0; }
.xf3-media ol,
.xf3-media ul { margin: 0; padding: 0; list-style: none; }
.xf3-media img { display: block; max-width: 100%; }
.xf3-media figure { margin: 0; }

/* The section carries the same .xf3-media class as the media atom in
   00-base.css; undo the atom's box treatment at section level so that
   100vw bleed bands (collage/showroom) and full-width dark variants are
   not clipped or rounded. Specificity is (0,1,1); variant rules below
   win ties by source order. */
section.xf3-media {
    overflow: visible;
    border-radius: 0;
    background: transparent;
}

/* ====================================================== collection === */
/* Asymmetric grid mosaic with dense gap filling. */

.xf3-media__collection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 172px;
    grid-auto-flow: dense;
    gap: 18px;
}

.xf3-media__cell {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--xf3-radius);
    background: var(--xf3-soft-2);
}

.xf3-media__cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__cell:hover img { transform: scale(1.06); }

.xf3-media__cell--big { grid-column: span 2; grid-row: span 2; }
.xf3-media__cell--tall { grid-row: span 2; }
.xf3-media__cell--wide { grid-column: span 2; }

.xf3-media__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 30px 16px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    background: linear-gradient(180deg, rgba(12, 23, 48, 0) 0%, rgba(12, 23, 48, .8) 100%);
}

.xf3-media__cap i { color: var(--xf3-primary-tint-2); flex: 0 0 auto; }

/* ========================================================= masonry === */
/* CSS-column Pinterest flow, single column on phones. */

.xf3-media__masonry {
    column-count: 3;
    column-gap: 18px;
}

.xf3-media__shot {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    overflow: hidden;
    background: #fff;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.xf3-media__shot:hover {
    transform: translateY(-4px);
    box-shadow: var(--xf3-shadow);
}

.xf3-media__shotframe {
    position: relative;
    display: block;
    overflow: hidden;
}

.xf3-media__ratio--4x3 { aspect-ratio: 4 / 3; }
.xf3-media__ratio--1x1 { aspect-ratio: 1 / 1; }
.xf3-media__ratio--3x4 { aspect-ratio: 3 / 4; }

.xf3-media__shotframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__shot:hover .xf3-media__shotframe img { transform: scale(1.05); }

.xf3-media__shotzoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--xf3-primary);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 30px rgba(12, 23, 48, .25);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.xf3-media__shot:hover .xf3-media__shotzoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.xf3-media__shotcap {
    display: block;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--xf3-ink-2);
}

/* ========================================================== square === */

.xf3-media__square {
    display: grid;
    gap: 18px;
}

.xf3-media__square--3 { grid-template-columns: repeat(3, 1fr); }
.xf3-media__square--2 { grid-template-columns: repeat(2, 1fr); }

.xf3-media__frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--xf3-radius);
    background: var(--xf3-soft-2);
}

.xf3-media__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__frame:hover img { transform: scale(1.06); }

.xf3-media__framehover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(12, 23, 48, .15) 0%, rgba(12, 23, 48, .78) 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.xf3-media__frame:hover .xf3-media__framehover,
.xf3-media__frame:focus-visible .xf3-media__framehover { opacity: 1; }

.xf3-media__framezoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--xf3-primary);
    background: rgba(255, 255, 255, .94);
}

.xf3-media__framecap {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

/* ========================================================== compare === */
/* Contract structure: [data-xf3-compare] > .xf3-compare__after + range
   + handle. The clipped layer and knob are positioned by this CSS, JS
   drives clip-path / handle offset from the range value. */

.xf3-media__compare-fig { max-width: 980px; margin: 0 auto; }

.xf3-media__compare {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    background: var(--xf3-dark);
    box-shadow: var(--xf3-shadow);
    user-select: none;
    touch-action: pan-y;
}

.xf3-media .xf3-compare__layer {
    position: absolute;
    inset: 0;
}

.xf3-media .xf3-compare__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.xf3-media .xf3-compare__after {
    clip-path: inset(0 0 0 50%);
}

.xf3-media .xf3-compare__range {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: ew-resize;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.xf3-media .xf3-compare__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 100%;
    background: transparent;
    cursor: ew-resize;
}

.xf3-media .xf3-compare__range::-moz-range-thumb {
    width: 44px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: ew-resize;
}

.xf3-media .xf3-compare__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 12px rgba(12, 23, 48, .45);
    pointer-events: none;
}

.xf3-media .xf3-compare__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--xf3-primary);
    font-size: 12px;
    box-shadow: 0 8px 24px rgba(12, 23, 48, .4);
}

.xf3-media .xf3-compare__tag {
    position: absolute;
    top: 16px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    pointer-events: none;
}

.xf3-media .xf3-compare__tag--before {
    left: 16px;
    color: #fff;
    background: rgba(12, 23, 48, .72);
    border: 1px solid rgba(255, 255, 255, .25);
}

.xf3-media .xf3-compare__tag--after {
    right: 16px;
    color: #fff;
    background: var(--xf3-primary);
}

.xf3-media__compare-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.xf3-media__compare-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-media__compare-note strong {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-ink);
}

.xf3-media__compare-note--after strong { color: var(--xf3-primary); }

/* ======================================================== videogrid === */
/* Dark poster-card row. */

section.xf3-media--videogrid {
    background: #0a1428;
    color: rgba(255, 255, 255, .82);
}

.xf3-media--videogrid .xf-section-head__title { color: #fff; }
.xf3-media--videogrid .xf-section-head__subtitle { color: rgba(255, 255, 255, .68); }
.xf3-media--videogrid .xf-eyebrow { color: var(--xf3-primary-tint); }

.xf3-media__videos {
    display: grid;
    gap: 22px;
}

.xf3-media__videos--3 { grid-template-columns: repeat(3, 1fr); }
.xf3-media__videos--2 { grid-template-columns: repeat(2, 1fr); }

.xf3-media__video {
    display: flex;
    flex-direction: column;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, background .3s ease;
}

.xf3-media__video:hover {
    transform: translateY(-5px);
    border-color: rgba(127, 176, 255, .5);
    background: rgba(255, 255, 255, .08);
}

.xf3-media__video-media {
    border-radius: 0;
}

.xf3-media__video-media img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__video:hover .xf3-media__video-media img { transform: scale(1.05); }

.xf3-media__video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 15, 34, .15) 0%, rgba(8, 15, 34, .6) 100%);
}

.xf3-media__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-size: 20px;
    color: var(--xf3-primary);
    background: #fff;
    box-shadow: 0 14px 34px rgba(8, 15, 34, .5);
    transition: transform .3s ease;
}

.xf3-media__play::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    animation: xf3-media-pulse 2.6s ease-out infinite;
}

.xf3-media__play i { margin-left: 3px; }

.xf3-media__video:hover .xf3-media__play { transform: translate(-50%, -50%) scale(1.08); }

@keyframes xf3-media-pulse {
    0% { transform: scale(.85); opacity: .8; }
    70% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

.xf3-media__duration {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(8, 15, 34, .75);
    border: 1px solid rgba(255, 255, 255, .2);
}

.xf3-media__duration i { font-size: 11px; color: var(--xf3-primary-tint-2); }

.xf3-media__video-cap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 17px 18px 18px;
}

.xf3-media__video-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
}

.xf3-media__video-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--xf3-primary-tint);
}

.xf3-media__video-cta i { transition: transform .25s ease; }
.xf3-media__video:hover .xf3-media__video-cta i { transform: translateX(4px); }

/* ========================================================== collage === */
/* Overlapping offset trio of photos plus floating badges. */

section.xf3-media--collage { overflow-x: clip; }

.xf3-media__collage {
    position: relative;
    height: 470px;
    margin: 10px 18px 16px;
}

.xf3-media__collage a {
    display: block;
    overflow: hidden;
    border-radius: var(--xf3-radius-lg);
    border: 6px solid #fff;
    box-shadow: var(--xf3-shadow);
    background: var(--xf3-soft-2);
}

.xf3-media__collage-main {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 63%;
}

.xf3-media__collage-sub {
    position: absolute;
    right: 0;
    width: 35%;
    height: 47%;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), z-index 0s;
    z-index: 2;
}

.xf3-media__collage-sub--a { top: 0; transform: rotate(3deg); }
.xf3-media__collage-sub--b { bottom: 0; transform: rotate(-3deg); }

.xf3-media__collage-main:hover,
.xf3-media__collage-sub:hover {
    z-index: 4;
    transform: rotate(0deg) scale(1.03);
}

.xf3-media__collage-main img,
.xf3-media__collage-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__collage a:hover img { transform: scale(1.06); }

.xf3-media__collage-stat {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(12, 23, 48, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
}

.xf3-media__collage-stattext {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.xf3-media__collage-stattext strong {
    font-family: var(--xf3-font-num);
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.xf3-media__collage-stattext em {
    font-style: normal;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .65);
}

.xf3-media__collage-stamp {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(12, 23, 48, .22);
}

.xf3-media__collage-stamp i { color: var(--xf3-success); }

/* ========================================================= hotspots === */

.xf3-media__hotspot-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    background: var(--xf3-dark);
    border: 1px solid var(--xf3-line);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-media__hotspot-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.xf3-media__hotspot-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-media__dot {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    outline: none;
}

.xf3-media__dot-num {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    background: var(--xf3-primary);
    border: 3px solid #fff;
    box-shadow: 0 6px 18px rgba(12, 23, 48, .4);
    cursor: default;
}

.xf3-media__dot:focus-visible .xf3-media__dot-num {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .35);
}

.xf3-media__dot-ring {
    position: absolute;
    inset: -6px;
    z-index: 1;
    border-radius: 50%;
    background: rgba(79, 141, 255, .45);
    animation: xf3-hotspot-ping 2.4s ease-out infinite;
}

@keyframes xf3-hotspot-ping {
    0% { transform: scale(.7); opacity: .8; }
    70% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

.xf3-media__dot-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 230px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    background: #0c1730;
    border: 1px solid rgba(127, 176, 255, .3);
    box-shadow: 0 14px 34px rgba(12, 23, 48, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.xf3-media__dot-tip b { color: var(--xf3-primary-tint-2); }

.xf3-media__dot-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0c1730;
}

.xf3-media__dot:hover .xf3-media__dot-tip,
.xf3-media__dot:focus .xf3-media__dot-tip,
.xf3-media__dot:focus-visible .xf3-media__dot-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.xf3-media__hotspot-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.xf3-media__legend-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    font-size: 13px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-media__legend-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 800;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
}

/* =========================================================== office === */

.xf3-media__office {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

section.xf3-media--office { background: var(--xf3-soft); }

.xf3-media .xf3-media__facility { display: flex; flex-direction: column; }

.xf3-media__facility-media {
    border-radius: var(--xf3-radius) var(--xf3-radius) 0 0;
}

.xf3-media__facility-media img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.xf3-media__facility:hover .xf3-media__facility-media img { transform: scale(1.05); }

.xf3-media__facility-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--xf3-primary);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 30px rgba(12, 23, 48, .25);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}

.xf3-media__facility-media:hover .xf3-media__facility-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.xf3-media__facility-body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 20px 20px 22px;
}

.xf3-media__facility-body .xf3-icon { width: 42px; height: 42px; font-size: 17px; border-radius: 11px; }

.xf3-media__facility-title {
    font-size: 16px;
    color: var(--xf3-ink);
}

.xf3-media__facility-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

/* ========================================================= showroom === */
/* Edge-to-edge media band with caption overlay. */

section.xf3-media--showroom { overflow-x: clip; }

.xf3-media__bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 6px;
}

.xf3-media__showband {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    background: var(--xf3-dark);
}

.xf3-media__showband-img {
    position: absolute;
    inset: 0;
    display: block;
}

.xf3-media__showband-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xf3-media__showband-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 15, 34, .85) 0%, rgba(8, 15, 34, .35) 55%, rgba(8, 15, 34, .05) 100%),
        linear-gradient(0deg, rgba(8, 15, 34, .8) 0%, rgba(8, 15, 34, 0) 60%);
}

.xf3-media__showband .container,
.xf3-media__showband .container-fluid {
    position: relative;
    z-index: 2;
    width: 100%;
}

.xf3-media__showband-inner {
    max-width: 620px;
    padding: 52px 0 46px;
}

.xf3-media__showband-title {
    margin-top: 16px;
    font-size: 30px;
    line-height: 1.25;
    color: #fff;
}

.xf3-media__showband-text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.xf3-media__showband-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.xf3-media__showband-zoom i { color: var(--xf3-primary-tint-2); }

/* ====================================================== responsive === */

@media (max-width: 991.98px) {
    .xf3-media__collection {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 158px;
    }
    .xf3-media__masonry { column-count: 2; }
    .xf3-media__videos--3,
    .xf3-media__videos--2 { grid-template-columns: repeat(2, 1fr); }
    .xf3-media__office { grid-template-columns: repeat(2, 1fr); }
    .xf3-media__collage { height: 400px; margin: 8px 8px 14px; }
    .xf3-media__showband { min-height: 400px; }
    .xf3-media__showband-title { font-size: 25px; }
}

@media (max-width: 767.98px) {
    .xf3-media__compare-notes { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 575.98px) {
    /* Mosaic collapses to a clean single-column ribbon. */
    .xf3-media__collection {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 14px;
    }
    .xf3-media__cell,
    .xf3-media__cell--big,
    .xf3-media__cell--tall,
    .xf3-media__cell--wide {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }
    .xf3-media__masonry { column-count: 1; }
    .xf3-media__shot { margin-bottom: 14px; }
    .xf3-media__square--3,
    .xf3-media__square--2 { grid-template-columns: 1fr; gap: 14px; }
    .xf3-media__videos--3,
    .xf3-media__videos--2 { grid-template-columns: 1fr; gap: 16px; }
    .xf3-media__office { grid-template-columns: 1fr; gap: 16px; }

    /* Hover-only chrome becomes always visible. */
    .xf3-media__framehover { opacity: 1; background: linear-gradient(180deg, rgba(12,23,48,0) 35%, rgba(12,23,48,.78) 100%); }
    .xf3-media__framezoom { opacity: 0; }
    .xf3-media__shotzoom { opacity: 1; transform: translate(-50%, -50%) scale(.85); }

    /* Compare tag / knob shrink. */
    .xf3-media .xf3-compare__knob { width: 40px; height: 40px; }
    .xf3-media .xf3-compare__tag { top: 10px; padding: 6px 11px; font-size: 12.5px; }
    .xf3-media .xf3-compare__tag--before { left: 10px; }
    .xf3-media .xf3-compare__tag--after { right: 10px; }

    /* Collage becomes a static stacked composition. */
    .xf3-media__collage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        height: auto;
        margin: 0;
    }
    .xf3-media__collage-main,
    .xf3-media__collage-sub {
        position: relative;
        width: auto;
        height: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        border-width: 4px;
    }
    .xf3-media__collage-main {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
    .xf3-media__collage-sub { aspect-ratio: 4 / 3; }
    .xf3-media__collage-main:hover,
    .xf3-media__collage-sub:hover { transform: none; }
    .xf3-media__collage-stat {
        position: relative;
        left: auto;
        bottom: auto;
        grid-column: span 2;
        justify-content: center;
        text-align: center;
    }
    .xf3-media__collage-stamp {
        position: relative;
        top: auto;
        left: auto;
        grid-column: span 2;
        justify-content: center;
    }

    /* Hotspot tooltips are replaced by the legend list on phones. */
    .xf3-media__hotspot-stage { aspect-ratio: 16 / 10; }
    .xf3-media__dot-num { width: 30px; height: 30px; border-width: 2px; font-size: 12px; }
    .xf3-media__dot-tip { display: none; }

    /* Showroom band stacks image then dark caption block. */
    .xf3-media__showband { display: block; min-height: 0; }
    .xf3-media__showband-img {
        position: relative;
        height: 280px;
    }
    .xf3-media__showband-scrim {
        inset: auto;
        top: 0;
        left: 0;
        right: 0;
        height: 280px;
    }
    .xf3-media__showband-inner { padding: 26px 0 32px; }
    .xf3-media__showband-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-media__play::before,
    .xf3-media__dot-ring { animation: none; opacity: 0; }
    .xf3-media *,
    .xf3-media *::before,
    .xf3-media *::after { transition: none !important; }
}
/*
 * xFactory B3 — mediacards family.
 * Variants: services, industries, industryrows, usecases, scenarios,
 *           webinars, articles, guides, videolist.
 * Every rule is scoped under .xf3-mediacards.
 */

.xf3-mediacards h3 { margin: 0; }
.xf3-mediacards p { margin: 0; }

/* Whole-card clickable overlay used by link cards */
.xf3-mediacards .xf3-mc-stretch {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}

.xf3-mediacards .xf3-card { position: relative; }

/* =====================================================================
   services — image-top service cards
   ===================================================================== */

.xf3-mediacards .xf3-mc-svc { display: grid; gap: 24px; }
.xf3-mediacards .xf3-mc-svc--2 { grid-template-columns: repeat(2, 1fr); }
.xf3-mediacards .xf3-mc-svc--3 { grid-template-columns: repeat(3, 1fr); }

.xf3-mediacards .xf3-mc-svc__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-svc__media {
    border-radius: 0;
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-mediacards .xf3-mc-svc__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(12, 23, 48, .82);
    backdrop-filter: blur(4px);
}

.xf3-mediacards .xf3-mc-svc__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 20px;
}

.xf3-mediacards .xf3-mc-svc__icon { margin-bottom: 14px; }

.xf3-mediacards .xf3-mc-svc__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-svc__text {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-svc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.xf3-mediacards .xf3-mc-svc__meta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-primary);
}

.xf3-mediacards .xf3-mc-svc__go {
    color: #b6c3d6;
    font-size: 16px;
    transition: transform .25s ease, color .25s ease;
}

.xf3-mediacards .xf3-mc-svc__card:hover .xf3-mc-svc__go {
    color: var(--xf3-primary);
    transform: translateX(4px);
}

/* =====================================================================
   industries — large image overlay tiles
   ===================================================================== */

.xf3-mediacards--industries { background: var(--xf3-soft); }

.xf3-mediacards .xf3-mc-ind {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.xf3-mediacards .xf3-mc-ind__card {
    position: relative;
    min-height: 340px;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    box-shadow: var(--xf3-shadow-sm);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

.xf3-mediacards .xf3-mc-ind__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--xf3-shadow-hover);
}

.xf3-mediacards .xf3-mc-ind__media { position: absolute; inset: 0; border-radius: 0; }
.xf3-mediacards .xf3-mc-ind__media img { transition: transform .5s ease; }
.xf3-mediacards .xf3-mc-ind__card:hover .xf3-mc-ind__media img { transform: scale(1.05); }

.xf3-mediacards .xf3-mc-ind__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 23, 48, .42) 0%, rgba(12, 23, 48, .68) 45%, rgba(12, 23, 48, .92) 100%);
}

.xf3-mediacards .xf3-mc-ind__stat {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    background: rgba(12, 23, 48, .62);
    border-color: rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
}

.xf3-mediacards .xf3-mc-ind__body {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 24px;
    z-index: 1;
    color: #fff;
}

.xf3-mediacards .xf3-mc-ind__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.xf3-mediacards .xf3-mc-ind__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.xf3-mediacards .xf3-mc-ind__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 16px;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    background: var(--xf3-primary);
    transition: background .25s ease, transform .25s ease;
}

.xf3-mediacards .xf3-mc-ind__card:hover .xf3-mc-ind__go {
    background: #fff;
    color: var(--xf3-primary);
    transform: translateX(3px);
}

/* =====================================================================
   industryrows — horizontal compact rows
   ===================================================================== */

.xf3-mediacards .xf3-mc-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xf3-mediacards .xf3-mc-row {
    position: relative;
    display: grid;
    grid-template-columns: 104px 52px 1fr auto 24px;
    align-items: center;
    gap: 18px;
    padding: 14px 22px 14px 14px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.xf3-mediacards .xf3-mc-row:hover {
    border-color: var(--xf3-primary-tint-4);
    box-shadow: var(--xf3-shadow-sm);
    transform: translateX(4px);
}

.xf3-mediacards .xf3-mc-row__thumb {
    width: 104px;
    border-radius: 10px;
}

.xf3-mediacards .xf3-mc-row__icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
}

.xf3-mediacards .xf3-mc-row__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-row__text {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-row__outcome { justify-self: end; }

.xf3-mediacards .xf3-mc-row__go {
    color: #b6c3d6;
    font-size: 15px;
    transition: color .25s ease, transform .25s ease;
}

.xf3-mediacards .xf3-mc-row:hover .xf3-mc-row__go {
    color: var(--xf3-primary);
    transform: translateX(3px);
}

/* =====================================================================
   usecases — cards with outcome tag
   ===================================================================== */

.xf3-mediacards .xf3-mc-use { display: grid; gap: 24px; }
.xf3-mediacards .xf3-mc-use--3 { grid-template-columns: repeat(3, 1fr); }
.xf3-mediacards .xf3-mc-use--4 { grid-template-columns: repeat(4, 1fr); }

.xf3-mediacards .xf3-mc-use__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-use__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.xf3-mediacards .xf3-mc-use__outcome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 6px 12px;
    margin: -38px 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--xf3-primary);
    box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb), .32);
}

.xf3-mediacards .xf3-mc-use__outcome i { font-size: 13px; }

.xf3-mediacards .xf3-mc-use__title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-use__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-use__meta {
    margin-top: auto;
    padding-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8494ab;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* =====================================================================
   scenarios — photo cards with buyer quote
   ===================================================================== */

.xf3-mediacards--scenarios { background: var(--xf3-soft); }

.xf3-mediacards .xf3-mc-scn__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-scn__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--xf3-ink-2);
    background: rgba(255, 255, 255, .92);
}

.xf3-mediacards .xf3-mc-scn__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.xf3-mediacards .xf3-mc-scn__mark {
    font-size: 22px;
    color: var(--xf3-primary);
    margin-bottom: 10px;
}

.xf3-mediacards .xf3-mc-scn__quote {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--xf3-ink-2);
}

.xf3-mediacards .xf3-mc-scn__person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

.xf3-mediacards .xf3-mc-scn__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--xf3-soft-2);
}

.xf3-mediacards .xf3-mc-scn__person strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-scn__person span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--xf3-muted);
}

/* =====================================================================
   webinars — date badge + register
   ===================================================================== */

.xf3-mediacards .xf3-mc-web__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-web__media { border-radius: 0; }

.xf3-mediacards .xf3-mc-web__date {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 54px;
    padding: 7px 6px 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--xf3-shadow-sm);
    line-height: 1.1;
}

.xf3-mediacards .xf3-mc-web__date b {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--xf3-primary);
}

.xf3-mediacards .xf3-mc-web__date strong {
    font-family: var(--xf3-font-num);
    font-size: 21px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-web__date em {
    font-size: 10px;
    font-style: normal;
    color: #8494ab;
}

.xf3-mediacards .xf3-mc-web__live {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: rgba(var(--xf-danger-rgb), .9);
}

.xf3-mediacards .xf3-mc-web__live i { font-size: 12px; }

.xf3-mediacards .xf3-mc-web__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.xf3-mediacards .xf3-mc-web__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-web__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-web__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-mediacards .xf3-mc-web__time i { color: var(--xf3-primary); }

.xf3-mediacards .xf3-mc-web__cta {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    margin-top: 16px;
}

/* =====================================================================
   articles — category + read time cards
   ===================================================================== */

.xf3-mediacards .xf3-mc-art { display: grid; gap: 24px; }
.xf3-mediacards .xf3-mc-art--2 { grid-template-columns: repeat(2, 1fr); }
.xf3-mediacards .xf3-mc-art--3 { grid-template-columns: repeat(3, 1fr); }

.xf3-mediacards .xf3-mc-art__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-art__media { border-radius: 0; }

.xf3-mediacards .xf3-mc-art__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

.xf3-mediacards .xf3-mc-art__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 12.5px;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-art__meta i { margin-right: 4px; color: var(--xf3-primary); }

.xf3-mediacards .xf3-mc-art__cat {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-mediacards .xf3-mc-art__title {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-art__text {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-art__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-primary);
}

.xf3-mediacards .xf3-mc-art__link i { transition: transform .25s ease; }
.xf3-mediacards .xf3-mc-art__card:hover .xf3-mc-art__link i { transform: translateX(4px); }

/* =====================================================================
   guides — oversized numbered cards
   ===================================================================== */

.xf3-mediacards .xf3-mc-gde__card { display: flex; flex-direction: column; }

.xf3-mediacards .xf3-mc-gde__media { border-radius: 0; }

.xf3-mediacards .xf3-mc-gde__num {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 1;
    font-family: var(--xf3-font-num);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 12px rgba(12, 23, 48, .35);
}

.xf3-mediacards .xf3-mc-gde__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.xf3-mediacards .xf3-mc-gde__title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-gde__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-gde__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-gde__foot i { color: var(--xf3-primary); }
.xf3-mediacards .xf3-mc-gde__foot span i { margin-right: 4px; }

/* =====================================================================
   videolist — horizontal video rows
   ===================================================================== */

.xf3-mediacards--videolist { background: var(--xf3-soft); }

.xf3-mediacards .xf3-mc-vid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.xf3-mediacards .xf3-mc-vid__row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: center;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.xf3-mediacards .xf3-mc-vid__row:hover {
    border-color: var(--xf3-primary-tint-4);
    box-shadow: var(--xf3-shadow);
    transform: translateY(-3px);
}

.xf3-mediacards .xf3-mc-vid__thumb { border-radius: 12px; }

.xf3-mediacards .xf3-mc-vid__thumb a {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.xf3-mediacards .xf3-mc-vid__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    background: rgba(12, 23, 48, .66);
    backdrop-filter: blur(4px);
    transform: translate(-50%, -50%);
    transition: background .25s ease, transform .25s ease;
}

.xf3-mediacards .xf3-mc-vid__thumb:hover .xf3-mc-vid__play {
    background: var(--xf3-primary);
    transform: translate(-50%, -50%) scale(1.08);
}

.xf3-mediacards .xf3-mc-vid__dur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 7px;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(12, 23, 48, .82);
}

.xf3-mediacards .xf3-mc-vid__body { min-width: 0; }

.xf3-mediacards .xf3-mc-vid__tag { margin-bottom: 10px; }

.xf3-mediacards .xf3-mc-vid__title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--xf3-ink);
}

.xf3-mediacards .xf3-mc-vid__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-mediacards .xf3-mc-vid__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-primary);
}

.xf3-mediacards .xf3-mc-vid__link i { transition: transform .25s ease; }
.xf3-mediacards .xf3-mc-vid__row:hover .xf3-mc-vid__link i { transform: translateX(4px); }

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .xf3-mediacards .xf3-mc-svc--3,
    .xf3-mediacards .xf3-mc-use--4,
    .xf3-mediacards .xf3-mc-art--3 { grid-template-columns: repeat(2, 1fr); }
    .xf3-mediacards .xf3-mc-ind { grid-template-columns: 1fr; }
    .xf3-mediacards .xf3-mc-ind__card { min-height: 290px; }
    .xf3-mediacards .xf3-mc-web { grid-template-columns: repeat(2, 1fr); }
    .xf3-mediacards .xf3-mc-gde { grid-template-columns: repeat(2, 1fr); }
    .xf3-mediacards .xf3-mc-vid__row { grid-template-columns: 260px 1fr; gap: 20px; }
}

@media (max-width: 767.98px) {
    .xf3-mediacards .xf3-mc-row {
        grid-template-columns: 84px 1fr auto;
        grid-template-areas:
            "thumb body go"
            "thumb outcome outcome";
        gap: 8px 14px;
        padding-right: 16px;
    }
    .xf3-mediacards .xf3-mc-row__thumb {
        grid-area: thumb;
        width: 84px;
    }
    .xf3-mediacards .xf3-mc-row__icon { display: none; }
    .xf3-mediacards .xf3-mc-row__body { grid-area: body; }
    .xf3-mediacards .xf3-mc-row__outcome {
        grid-area: outcome;
        justify-self: start;
    }
    .xf3-mediacards .xf3-mc-row__go { grid-area: go; align-self: start; }
    .xf3-mediacards .xf3-mc-vid__row { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .xf3-mediacards .xf3-mc-svc--2,
    .xf3-mediacards .xf3-mc-svc--3,
    .xf3-mediacards .xf3-mc-use--3,
    .xf3-mediacards .xf3-mc-use--4,
    .xf3-mediacards .xf3-mc-art--2,
    .xf3-mediacards .xf3-mc-art--3,
    .xf3-mediacards .xf3-mc-web,
    .xf3-mediacards .xf3-mc-gde { grid-template-columns: 1fr; }
    .xf3-mediacards .xf3-mc-ind__card { min-height: 300px; }
    .xf3-mediacards .xf3-mc-ind__title { font-size: 21px; }
}
/*
 * xFactory B3 — pricing family.
 * Variants: cards, featured, breakdown, ladder, summary, note, addons.
 * Every rule is scoped under .xf3-pricing.
 */

.xf3-pricing h3,
.xf3-pricing h4 { margin: 0; }

.xf3-pricing p { margin: 0; }

.xf3-pricing ul,
.xf3-pricing ol { margin: 0; padding: 0; list-style: none; }

.xf3-pricing .xf3-pr__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.xf3-pricing .xf3-pr__note-icon {
    color: var(--xf3-primary);
    font-size: 15px;
    line-height: 1.55;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* ================================================================
   Variant: cards — tiered quantity-price cards
   ================================================================ */

.xf3-pricing .xf3-pr-cards { gap: 22px; align-items: stretch; }

.xf3-pricing .xf3-pr-card {
    position: relative;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.xf3-pricing .xf3-pr-card--hl {
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow);
    transform: translateY(-6px);
}

.xf3-pricing .xf3-pr-card--hl:hover {
    transform: translateY(-10px);
}

.xf3-pricing .xf3-pr-card__ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: 999px;
    background: var(--xf3-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), .32);
}

.xf3-pricing .xf3-pr-card__qty {
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.xf3-pricing .xf3-pr-card__price {
    margin: 10px 0 18px;
    font-family: var(--xf3-font-num);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-card--hl .xf3-pr-card__price { color: var(--xf3-primary); }

.xf3-pricing .xf3-pr-card__meta {
    margin-bottom: 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xf3-pricing .xf3-pr-card__meta li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-card__meta i {
    color: var(--xf3-primary);
    font-size: 15px;
    line-height: 1.35;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-card__cta { width: 100%; margin-top: auto; }

/* ================================================================
   Variant: featured — hero tier + benefits
   ================================================================ */

.xf3-pricing .xf3-pr-feat {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.xf3-pricing .xf3-pr-feat__hero {
    position: relative;
    padding: 38px 36px 34px;
    background: var(--xf3-gradient-dark);
    border: none;
    color: rgba(255, 255, 255, .85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.xf3-pricing .xf3-pr-feat__hero::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 141, 255, .35) 0%, rgba(79, 141, 255, 0) 70%);
    pointer-events: none;
}

.xf3-pricing .xf3-pr-feat__ribbon {
    position: absolute;
    top: 22px;
    right: -38px;
    transform: rotate(45deg);
    transform-origin: center;
    padding: 5px 46px;
    background: #f59e0b;
    color: #3a2501;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.xf3-pricing .xf3-pr-feat__kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--xf3-primary-tint);
}

.xf3-pricing .xf3-pr-feat__qty {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.xf3-pricing .xf3-pr-feat__price {
    margin: 8px 0 10px;
    font-family: var(--xf3-font-num);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.xf3-pricing .xf3-pr-feat__detail {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .72);
}

.xf3-pricing .xf3-pr-feat__meta {
    margin: 22px 0 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xf3-pricing .xf3-pr-feat__meta li {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 14px;
}

.xf3-pricing .xf3-pr-feat__meta i { color: var(--xf3-primary-tint); }

.xf3-pricing .xf3-pr-feat__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.xf3-pricing .xf3-pr-feat__side {
    padding: 32px 30px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
}

.xf3-pricing .xf3-pr-feat__h {
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-feat__benefits {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.xf3-pricing .xf3-pr-feat__benefits li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--xf3-ink-2);
}

.xf3-pricing .xf3-pr-feat__benefits i {
    color: var(--xf3-success);
    font-size: 15px;
    line-height: 1.4;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-feat__sub {
    margin: 22px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-feat__tiers {
    display: flex;
    flex-direction: column;
}

.xf3-pricing .xf3-pr-feat__tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;
    border-top: 1px dashed var(--xf3-line);
    font-size: 14px;
    color: var(--xf3-muted);
    transition: color .2s ease;
}

.xf3-pricing .xf3-pr-feat__tier strong {
    font-family: var(--xf3-font-num);
    color: var(--xf3-ink);
    font-weight: 700;
}

.xf3-pricing .xf3-pr-feat__tier:hover { color: var(--xf3-primary); }
.xf3-pricing .xf3-pr-feat__tier:hover strong { color: var(--xf3-primary); }

/* ================================================================
   Variant: breakdown — stacked EXW cost bar
   ================================================================ */

.xf3-pricing .xf3-pr-break {
    padding: 30px 30px 26px;
}

.xf3-pricing .xf3-pr-break__head h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-break__head p {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-break__bar {
    display: flex;
    margin-top: 22px;
    height: 30px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--xf3-soft-2);
}

.xf3-pricing .xf3-pr-break__seg {
    display: block;
    height: 100%;
    width: 0;
    min-width: 0;
}

.xf3-pricing .xf3-pr-break__seg:first-child { border-radius: 999px 0 0 999px; }
.xf3-pricing .xf3-pr-break__seg:last-child { border-radius: 0 999px 999px 0; }

.xf3-pricing .xf3-pr-break__legend {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
}

.xf3-pricing .xf3-pr-break__legend li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.xf3-pricing .xf3-pr-break__dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-top: 4px;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-break__txt { flex: 1; min-width: 0; }

.xf3-pricing .xf3-pr-break__txt strong {
    display: block;
    font-size: 14.5px;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-break__txt span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-break__pct {
    font-family: var(--xf3-font-num);
    font-size: 16px;
    font-weight: 800;
    color: var(--xf3-ink);
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-break__total {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--xf3-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.xf3-pricing .xf3-pr-break__total span {
    font-size: 14px;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-break__total strong {
    font-family: var(--xf3-font-num);
    font-size: 22px;
    font-weight: 800;
    color: var(--xf3-primary);
}

.xf3-pricing .xf3-pr-break__total small {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--xf3-muted);
}

/* ================================================================
   Variant: ladder — vertical stepped cards
   ================================================================ */

.xf3-pricing .xf3-pr-ladder {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding-left: 8px;
}

.xf3-pricing .xf3-pr-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: calc(var(--step, 0) * 34px);
    padding: 20px 24px 20px 20px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.xf3-pricing .xf3-pr-step + .xf3-pr-step { margin-top: 14px; }

.xf3-pricing .xf3-pr-step::before {
    content: "";
    position: absolute;
    left: 31px;
    top: -15px;
    width: 2px;
    height: 15px;
    background: var(--xf3-line);
}

.xf3-pricing .xf3-pr-step:first-child::before { display: none; }

.xf3-pricing .xf3-pr-step:hover {
    transform: translateX(4px);
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-pricing .xf3-pr-step--hl {
    border-color: var(--xf3-primary-tint-3);
    background: linear-gradient(110deg, var(--xf3-primary-tint-8) 0%, #ffffff 60%);
    box-shadow: var(--xf3-shadow);
}

.xf3-pricing .xf3-pr-step__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--xf3-soft-2);
    color: var(--xf3-muted);
    font-family: var(--xf3-font-num);
    font-size: 17px;
    font-weight: 800;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-step--hl .xf3-pr-step__no {
    background: var(--xf3-gradient);
    color: #fff;
}

.xf3-pricing .xf3-pr-step__main { flex: 1; min-width: 0; }

.xf3-pricing .xf3-pr-step__main h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-step__main p {
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-step__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-step__right strong {
    font-family: var(--xf3-font-num);
    font-size: 21px;
    font-weight: 800;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-pricing .xf3-pr-step--hl .xf3-pr-step__right strong { color: var(--xf3-primary); }

.xf3-pricing .xf3-pr-step__chip { font-size: 12px; }

/* ================================================================
   Variant: summary — formal quotation sheet
   ================================================================ */

.xf3-pricing .xf3-pr-quote {
    padding: 32px 34px 30px;
}

.xf3-pricing .xf3-pr-quote__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--xf3-ink);
}

.xf3-pricing .xf3-pr-quote__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-pricing .xf3-pr-quote__from h3 {
    margin-top: 8px;
    font-size: 21px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-quote__from h3 span {
    font-size: 13px;
    font-weight: 500;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-quote__meta {
    display: flex;
    gap: 26px;
    margin: 0;
}

.xf3-pricing .xf3-pr-quote__meta dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-quote__meta dd {
    margin: 3px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-pricing .xf3-pr-quote__wrap {
    margin-top: 22px;
    border-radius: 10px;
}

.xf3-pricing .xf3-pr-quote__table { min-width: 560px; }

.xf3-pricing .xf3-pr-quote__table tfoot th,
.xf3-pricing .xf3-pr-quote__table tfoot td {
    background: var(--xf3-soft);
    font-size: 14px;
    color: var(--xf3-ink-2);
}

.xf3-pricing .xf3-pr-quote__total {
    font-family: var(--xf3-font-num);
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--xf3-primary) !important;
    text-align: right;
    white-space: nowrap;
}

.xf3-pricing .xf3-pr-quote__terms {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 22px;
}

.xf3-pricing .xf3-pr-quote__term {
    padding: 14px 16px;
    background: var(--xf3-soft);
    border-radius: 10px;
}

.xf3-pricing .xf3-pr-quote__term dt {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-quote__term dt i { color: var(--xf3-primary); }

.xf3-pricing .xf3-pr-quote__term dd {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--xf3-ink-2);
}

/* ================================================================
   Variant: note — caveat band
   ================================================================ */

.xf3-pricing .xf3-pr-noteband {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 940px;
    margin: 0 auto;
    padding: 28px 30px;
    background: var(--xf3-primary-tint-7);
    border: 1px solid var(--xf3-primary-tint-4);
    border-left: 4px solid var(--xf3-primary);
    border-radius: var(--xf3-radius);
}

.xf3-pricing .xf3-pr-noteband__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--xf3-primary);
    color: #fff;
    font-size: 20px;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-noteband__text {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--xf3-ink-2);
}

.xf3-pricing .xf3-pr-noteband__factors {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.xf3-pricing .xf3-pr-noteband__factors li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-primary-navy);
}

.xf3-pricing .xf3-pr-noteband__factors i { color: var(--xf3-primary); font-size: 14px; }

/* ================================================================
   Variant: addons — service checklist with fees
   ================================================================ */

.xf3-pricing .xf3-pr-addons { overflow: hidden; }

.xf3-pricing .xf3-pr-addons__list > li + li {
    border-top: 1px solid var(--xf3-line);
}

.xf3-pricing .xf3-pr-addon {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 26px;
    transition: background .2s ease;
}

.xf3-pricing .xf3-pr-addon:hover { background: var(--xf3-primary-tint-8); }

.xf3-pricing .xf3-pr-addon__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
    font-size: 17px;
    flex: 0 0 auto;
}

.xf3-pricing .xf3-pr-addon__body { flex: 1; min-width: 0; }

.xf3-pricing .xf3-pr-addon__body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-pricing .xf3-pr-addon__body p {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-addon__fee {
    flex: 0 0 auto;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--xf3-ink);
    color: #fff;
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.xf3-pricing .xf3-pr-addon__fee--free {
    background: #e7f8ef;
    color: #0f7a4e;
}

.xf3-pricing .xf3-pr-addons__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 26px;
    background: var(--xf3-soft);
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-pricing .xf3-pr-addons__foot i { color: var(--xf3-primary); margin-right: 6px; }

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 991.98px) {
    .xf3-pricing .xf3-pr-feat { grid-template-columns: 1fr; }
    .xf3-pricing .xf3-pr-feat__ribbon { display: none; }
    .xf3-pricing .xf3-pr-break__legend { grid-template-columns: 1fr; gap: 14px; }
    .xf3-pricing .xf3-pr-quote__terms { grid-template-columns: repeat(2, 1fr); }
    .xf3-pricing .xf3-pr-step { margin-left: 0 !important; }
}

@media (max-width: 575.98px) {
    .xf3-pricing .xf3-pr-card { padding: 24px 18px 20px; }
    .xf3-pricing .xf3-pr-card--hl { transform: none; }
    .xf3-pricing .xf3-pr-feat__hero { padding: 28px 22px; }
    .xf3-pricing .xf3-pr-feat__price { font-size: 36px; }
    .xf3-pricing .xf3-pr-feat__side { padding: 24px 20px; }
    .xf3-pricing .xf3-pr-break { padding: 24px 20px; }
    .xf3-pricing .xf3-pr-step {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 16px;
    }
    .xf3-pricing .xf3-pr-step__right {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px dashed var(--xf3-line);
        padding-top: 10px;
    }
    .xf3-pricing .xf3-pr-quote { padding: 24px 18px; }
    .xf3-pricing .xf3-pr-quote__head { flex-direction: column; gap: 16px; }
    .xf3-pricing .xf3-pr-quote__meta { flex-wrap: wrap; gap: 14px 22px; }
    .xf3-pricing .xf3-pr-quote__terms { grid-template-columns: 1fr; gap: 10px; }
    .xf3-pricing .xf3-pr-noteband { flex-direction: column; gap: 14px; padding: 22px 20px; }
    .xf3-pricing .xf3-pr-addon {
        flex-wrap: wrap;
        padding: 16px 18px;
    }
    .xf3-pricing .xf3-pr-addon__fee {
        margin-left: 54px;
    }
}
/*
 * xFactory B3 — products family.
 * Variants: grid, list, feature, specsheet, gallery, compare, series,
 * bestsellers, kit, accessories, spotlight, minilist, deal.
 * Every rule is scoped under .xf3-products.
 */

.xf3-products h2,
.xf3-products h3,
.xf3-products h4,
.xf3-products h5 { margin: 0; }

.xf3-products p { margin: 0; }

.xf3-products ul { margin: 0; padding: 0; list-style: none; }

.xf3-products a { text-decoration: none; }

.xf3-products .xf3-pd__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 20px;
}

.xf3-products .xf3-pd__note-icon {
    color: var(--xf3-primary);
    font-size: 15px;
    line-height: 1.55;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* ================================================================
   Variant: grid (also reused by bestsellers)
   ================================================================ */

.xf3-products .xf3-pd-grid { gap: 22px; }

.xf3-products .xf3-pd-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.xf3-products .xf3-pd-card__media {
    border-radius: 0;
    background: var(--xf3-soft);
}

.xf3-products .xf3-pd-card__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.xf3-products .xf3-pd-card__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.xf3-products .xf3-pd-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.xf3-products .xf3-pd-card__title a { color: var(--xf3-ink); transition: color .2s ease; }
.xf3-products .xf3-pd-card:hover .xf3-pd-card__title a { color: var(--xf3-primary); }

.xf3-products .xf3-pd-card__specs {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--xf3-muted);
    flex: 1;
}

.xf3-products .xf3-pd-card__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--xf3-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.xf3-products .xf3-pd-card__price {
    font-family: var(--xf3-font-num);
    font-size: 15px;
    font-weight: 800;
    color: var(--xf3-primary);
    white-space: nowrap;
}

.xf3-products .xf3-pd-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    white-space: nowrap;
    transition: color .2s ease, gap .2s ease;
}

.xf3-products .xf3-pd-card__cta i { font-size: 15px; }
.xf3-products .xf3-pd-card__cta:hover { color: var(--xf3-primary); gap: 6px; }

/* ================================================================
   Variant: list — horizontal rows
   ================================================================ */

.xf3-products .xf3-pd-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xf3-products .xf3-pd-row {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px 16px 16px;
}

.xf3-products .xf3-pd-row__media {
    width: 120px;
    flex: 0 0 auto;
    border-radius: 10px;
}

.xf3-products .xf3-pd-row__body { flex: 1; min-width: 0; }

.xf3-products .xf3-pd-row__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.xf3-products .xf3-pd-row__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-row__tag { font-size: 12px; }

.xf3-products .xf3-pd-row__specs {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
}

.xf3-products .xf3-pd-row__buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.xf3-products .xf3-pd-row__price {
    font-family: var(--xf3-font-num);
    font-size: 17px;
    font-weight: 800;
    color: var(--xf3-primary);
    white-space: nowrap;
}

/* ================================================================
   Variant: feature — big split with spec checklist
   ================================================================ */

.xf3-products .xf3-pd-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items: center;
}

.xf3-products .xf3-pd-feature__media .xf3-media {
    box-shadow: var(--xf3-shadow);
    border: 1px solid var(--xf3-line);
}

.xf3-products .xf3-pd-feature__chips {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xf3-products .xf3-pd-feature__chips .xf3-chip { background: #fff; }

.xf3-products .xf3-pd-feature__title {
    margin-top: 14px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-feature__specs {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.xf3-products .xf3-pd-feature__specs li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--xf3-ink-2);
}

.xf3-products .xf3-pd-feature__specs i {
    color: var(--xf3-success);
    font-size: 15px;
    line-height: 1.4;
    flex: 0 0 auto;
}

.xf3-products .xf3-pd-feature__buy { margin-top: 26px; }

.xf3-products .xf3-pd-feature__price {
    display: block;
    margin-bottom: 14px;
    font-family: var(--xf3-font-num);
    font-size: 28px;
    font-weight: 800;
    color: var(--xf3-primary);
}

/* ================================================================
   Variant: specsheet — image + compact key/value table
   ================================================================ */

.xf3-products .xf3-pd-spec {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 28px;
    align-items: start;
}

.xf3-products .xf3-pd-spec__media { position: sticky; top: 20px; }

.xf3-products .xf3-pd-spec__img {
    border: 1px solid var(--xf3-line);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-products .xf3-pd-spec__downloads {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xf3-products .xf3-pd-spec__card { padding: 26px 28px 24px; }

.xf3-products .xf3-pd-spec__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--xf3-ink);
    padding-bottom: 16px;
    border-bottom: 2px solid var(--xf3-ink);
}

.xf3-products .xf3-pd-spec__table {
    width: 100%;
    border-collapse: collapse;
}

.xf3-products .xf3-pd-spec__table th,
.xf3-products .xf3-pd-spec__table td {
    padding: 11px 4px;
    font-size: 14px;
    border-bottom: 1px solid var(--xf3-line);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.xf3-products .xf3-pd-spec__table th {
    width: 150px;
    color: var(--xf3-muted);
    font-weight: 600;
}

.xf3-products .xf3-pd-spec__table td {
    color: var(--xf3-ink-2);
    font-weight: 600;
}

.xf3-products .xf3-pd-spec__foot {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.xf3-products .xf3-pd-spec__price {
    font-family: var(--xf3-font-num);
    font-size: 22px;
    font-weight: 800;
    color: var(--xf3-primary);
}

/* ================================================================
   Variant: gallery — main image + thumbs + info
   ================================================================ */

.xf3-products .xf3-pd-gallery {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: stretch;
}

.xf3-products .xf3-pd-gallery__stage {
    border: 1px solid var(--xf3-line);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-products .xf3-pd-gallery__thumbs {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.xf3-products .xf3-pd-gallery__thumb {
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    padding: 0;
    border: 2px solid var(--xf3-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--xf3-soft);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}

.xf3-products .xf3-pd-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xf3-products .xf3-pd-gallery__thumb:hover { transform: translateY(-2px); }
.xf3-products .xf3-pd-gallery__thumb.is-active { border-color: var(--xf3-primary); }

.xf3-products .xf3-pd-gallery__info {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
}

.xf3-products .xf3-pd-gallery__title {
    margin-top: 12px;
    font-size: 21px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-gallery__specs {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.xf3-products .xf3-pd-gallery__specs li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: var(--xf3-ink-2);
}

.xf3-products .xf3-pd-gallery__specs i { color: var(--xf3-success); font-size: 15px; line-height: 1.4; flex: 0 0 auto; }

.xf3-products .xf3-pd-gallery__buy {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.xf3-products .xf3-pd-gallery__price {
    font-family: var(--xf3-font-num);
    font-size: 24px;
    font-weight: 800;
    color: var(--xf3-primary);
}

/* ================================================================
   Variant: compare — three side-by-side cards
   ================================================================ */

.xf3-products .xf3-pd-compare { gap: 22px; align-items: stretch; }

.xf3-products .xf3-pd-cmp {
    position: relative;
    display: flex;
    flex-direction: column;
}

.xf3-products .xf3-pd-cmp--hl {
    border-color: var(--xf3-primary-tint-3);
    box-shadow: var(--xf3-shadow);
    transform: translateY(-8px);
}

.xf3-products .xf3-pd-cmp--hl:hover { transform: translateY(-12px); }

.xf3-products .xf3-pd-cmp__ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 5px 15px;
    border-radius: 999px;
    background: var(--xf3-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), .32);
}

.xf3-products .xf3-pd-cmp__media { border-radius: 0; background: var(--xf3-soft); }

.xf3-products .xf3-pd-cmp__body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.xf3-products .xf3-pd-cmp__title {
    margin-top: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-cmp__specs {
    margin: 14px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.xf3-products .xf3-pd-cmp__specs li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--xf3-ink-2);
}

.xf3-products .xf3-pd-cmp__specs i { color: var(--xf3-success); font-size: 14px; line-height: 1.4; flex: 0 0 auto; }

.xf3-products .xf3-pd-cmp__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--xf3-line);
}

.xf3-products .xf3-pd-cmp__price {
    font-family: var(--xf3-font-num);
    font-size: 16px;
    font-weight: 800;
    color: var(--xf3-primary);
    white-space: nowrap;
}

/* ================================================================
   Variant: series — family cards
   ================================================================ */

.xf3-products .xf3-pd-series { gap: 22px; }

.xf3-products .xf3-pd-ser {
    position: relative;
    display: flex;
    flex-direction: column;
}

.xf3-products .xf3-pd-ser__media { border-radius: 0; }

.xf3-products .xf3-pd-ser__count {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
}

.xf3-products .xf3-pd-ser__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.xf3-products .xf3-pd-ser__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-ser__specs {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
    flex: 1;
}

.xf3-products .xf3-pd-ser__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-primary);
}

/* ================================================================
   Variant: bestsellers — rank badges
   ================================================================ */

.xf3-products .xf3-pd-best { gap: 22px; }

.xf3-products .xf3-pd-rank {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px;
    border-radius: 999px;
    font-family: var(--xf3-font-num);
    font-size: 13px;
    font-weight: 800;
    color: #6b4a06;
    background: linear-gradient(135deg, #ffd668 0%, #f5b53e 100%);
    box-shadow: 0 6px 16px rgba(245, 181, 62, .4);
}

.xf3-products .xf3-pd-rank i { font-size: 13px; }

.xf3-products .xf3-pd-rank--2 {
    color: #43506a;
    background: linear-gradient(135deg, #e8edf6 0%, #c3cddd 100%);
    box-shadow: 0 6px 16px rgba(148, 163, 184, .35);
}

.xf3-products .xf3-pd-rank--3 {
    color: #7a4a22;
    background: linear-gradient(135deg, #f0c6a5 0%, #d59b6e 100%);
    box-shadow: 0 6px 16px rgba(213, 155, 110, .35);
}

/* ================================================================
   Variant: kit — quantity-annotated contents
   ================================================================ */

.xf3-products .xf3-pd-kit { overflow: hidden; }

.xf3-products .xf3-pd-kit__list > li + li { border-top: 1px solid var(--xf3-line); }

.xf3-products .xf3-pd-kit__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 24px;
}

.xf3-products .xf3-pd-kit__media {
    width: 64px;
    flex: 0 0 auto;
    border-radius: 10px;
}

.xf3-products .xf3-pd-kit__body { flex: 1; min-width: 0; }

.xf3-products .xf3-pd-kit__body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-kit__body p {
    margin-top: 2px;
    font-size: 13px;
    color: var(--xf3-muted);
}

.xf3-products .xf3-pd-kit__qty {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary-deep);
    font-family: var(--xf3-font-num);
    font-size: 14px;
    font-weight: 800;
}

.xf3-products .xf3-pd-kit__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    background: var(--xf3-soft);
    font-size: 13.5px;
    color: var(--xf3-muted);
}

.xf3-products .xf3-pd-kit__foot i { color: var(--xf3-primary); margin-right: 6px; }

/* ================================================================
   Variant: accessories — compact add-on cards
   ================================================================ */

.xf3-products .xf3-pd-accs { gap: 18px; }

.xf3-products .xf3-pd-acc { display: flex; flex-direction: column; }

.xf3-products .xf3-pd-acc__media { border-radius: 0; background: var(--xf3-soft); }

.xf3-products .xf3-pd-acc__body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.xf3-products .xf3-pd-acc__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-acc__specs {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--xf3-muted);
    flex: 1;
}

.xf3-products .xf3-pd-acc__price {
    align-self: flex-start;
    font-family: var(--xf3-font-num);
    font-weight: 700;
}

/* ================================================================
   Variant: spotlight — dark full-width band
   ================================================================ */

.xf3-products--spotlight {
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, .82);
}

.xf3-products--spotlight .xf-section-head__title { color: #fff; }
.xf3-products--spotlight .xf-eyebrow { color: var(--xf3-primary-tint); }
.xf3-products--spotlight .xf3-pd__note { color: rgba(255, 255, 255, .55); }
.xf3-products--spotlight .xf3-pd__note-icon { color: var(--xf3-primary-tint); }

.xf3-products .xf3-pd-spot {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
}

.xf3-products .xf3-pd-spot__tag { margin-bottom: 16px; }

.xf3-products .xf3-pd-spot__title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
}

.xf3-products .xf3-pd-spot__specs {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
}

.xf3-products .xf3-pd-spot__specs li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
}

.xf3-products .xf3-pd-spot__specs i { color: var(--xf3-primary-tint); font-size: 15px; line-height: 1.4; flex: 0 0 auto; }

.xf3-products .xf3-pd-spot__buy { margin-top: 28px; }

.xf3-products .xf3-pd-spot__price {
    display: block;
    margin-bottom: 16px;
    font-family: var(--xf3-font-num);
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.xf3-products .xf3-pd-spot__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.xf3-products .xf3-pd-spot__media {
    position: relative;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 26px;
}

.xf3-products .xf3-pd-spot__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ================================================================
   Variant: minilist — compact rows
   ================================================================ */

.xf3-products .xf3-pd-mini { overflow: hidden; }

.xf3-products .xf3-pd-mini__list > li + li { border-top: 1px solid var(--xf3-line); }

.xf3-products .xf3-pd-mini__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    transition: background .2s ease;
}

.xf3-products .xf3-pd-mini__row:hover { background: var(--xf3-primary-tint-8); }

.xf3-products .xf3-pd-mini__media {
    width: 56px;
    flex: 0 0 auto;
    border-radius: 9px;
}

.xf3-products .xf3-pd-mini__body { flex: 1; min-width: 0; }

.xf3-products .xf3-pd-mini__body h5 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.xf3-products .xf3-pd-mini__body h5 a { color: var(--xf3-ink); }
.xf3-products .xf3-pd-mini__row:hover h5 a { color: var(--xf3-primary); }

.xf3-products .xf3-pd-mini__body p {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--xf3-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xf3-products .xf3-pd-mini__price {
    flex: 0 0 auto;
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--xf3-primary);
    white-space: nowrap;
}

/* ================================================================
   Variant: deal — countdown card
   ================================================================ */

.xf3-products .xf3-pd-deal {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.xf3-products .xf3-pd-deal__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.xf3-products .xf3-pd-deal__media {
    border-radius: 0;
    min-height: 100%;
}

.xf3-products .xf3-pd-deal__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.xf3-products .xf3-pd-deal__body {
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.xf3-products .xf3-pd-deal__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-products .xf3-pd-deal__specs {
    margin-top: 7px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-products .xf3-pd-deal__count {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.xf3-products .xf3-pd-deal__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 9px 6px 7px;
    border-radius: 10px;
    background: var(--xf3-dark);
}

.xf3-products .xf3-pd-deal__unit span {
    font-family: var(--xf3-font-num);
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.xf3-products .xf3-pd-deal__unit small {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.xf3-products .xf3-pd-deal__ended {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-danger);
}

.xf3-products .xf3-pd-deal__buy {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.xf3-products .xf3-pd-deal__price {
    font-family: var(--xf3-font-num);
    font-size: 24px;
    font-weight: 800;
    color: var(--xf3-danger);
}

.xf3-products .xf3-pd-deal__rest {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xf3-products .xf3-pd-deal__mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 12px;
}

.xf3-products .xf3-pd-deal__thumb {
    width: 72px;
    flex: 0 0 auto;
    border-radius: 10px;
}

.xf3-products .xf3-pd-deal__mini-body { flex: 1; min-width: 0; }

.xf3-products .xf3-pd-deal__mini-body h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--xf3-ink);
    line-height: 1.35;
}

.xf3-products .xf3-pd-deal__mini-body p {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--xf3-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xf3-products .xf3-pd-deal__mini-price {
    flex: 0 0 auto;
    font-family: var(--xf3-font-num);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--xf3-danger);
    text-align: right;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 991.98px) {
    .xf3-products .xf3-pd-feature,
    .xf3-products .xf3-pd-spec,
    .xf3-products .xf3-pd-gallery,
    .xf3-products .xf3-pd-spot { grid-template-columns: 1fr; gap: 26px; }

    .xf3-products .xf3-pd-gallery > * { min-width: 0; }
    .xf3-products .xf3-pd-gallery__stage img { width: 100%; }

    .xf3-products .xf3-pd-spec__media { position: static; max-width: 420px; }

    .xf3-products .xf3-pd-feature__title,
    .xf3-products .xf3-pd-spot__title { font-size: 26px; }

    .xf3-products .xf3-pd-cmp--hl { transform: none; }
    .xf3-products .xf3-pd-cmp--hl:hover { transform: translateY(-6px); }

    .xf3-products .xf3-pd-deal { grid-template-columns: 1fr; }
    .xf3-products .xf3-pd-deal > * { min-width: 0; }
    .xf3-products .xf3-pd-deal__main { grid-template-columns: 1fr; }
    .xf3-products .xf3-pd-deal__media { min-height: 0; }
}

@media (max-width: 575.98px) {
    .xf3-products .xf3-pd-feature__specs,
    .xf3-products .xf3-pd-spot__specs { grid-template-columns: 1fr; }

    .xf3-products .xf3-pd-row {
        flex-wrap: wrap;
        gap: 14px;
        padding: 14px;
    }

    .xf3-products .xf3-pd-row__media { width: 96px; }

    .xf3-products .xf3-pd-row__buy {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .xf3-products .xf3-pd-spec__card { padding: 20px 18px; }
    .xf3-products .xf3-pd-spec__table th { width: 118px; }

    .xf3-products .xf3-pd-gallery__info { padding: 22px 18px; }
    .xf3-products .xf3-pd-gallery__thumb { width: 70px; height: 70px; }

    .xf3-products .xf3-pd-kit__row { padding: 13px 16px; gap: 14px; }
    .xf3-products .xf3-pd-kit__foot { padding: 14px 16px; }

    .xf3-products .xf3-pd-spot__media { padding: 16px; }

    .xf3-products .xf3-pd-deal__body { padding: 22px 18px; }
    .xf3-products .xf3-pd-deal__unit { min-width: 46px; }
    .xf3-products .xf3-pd-deal__unit span { font-size: 16px; }
}
/*
 * xFactory B3 — quote family (feature, wall, rating, cards, slider,
 * video, reviews, logoquotes).
 * Every rule is scoped under .xf3-quote.
 */

/* ============ shared atoms ============ */

.xf3-quote blockquote { margin: 0; }

.xf3-quote .xf3-stars {
    display: inline-flex;
    gap: 2px;
    color: #f59e0b;
    font-size: 14px;
}

.xf3-quote .xf3-stars .off { color: #d7deea; }

.xf3-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.xf3-quote-author img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--xf3-soft-2);
}

.xf3-quote-author > span { display: flex; flex-direction: column; min-width: 0; }

.xf3-quote-author__name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-quote-author__role {
    font-size: 12.5px;
    color: var(--xf3-muted);
    line-height: 1.45;
}

/* ============ feature: one large editorial quote ============ */

.xf3-feature {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 54px 56px 44px;
    text-align: center;
    overflow: hidden;
}

.xf3-feature__mark {
    position: absolute;
    top: 18px;
    left: 30px;
    font-size: 84px;
    line-height: 1;
    color: var(--xf3-primary-soft);
}

.xf3-feature__mark i { font-size: inherit; }

.xf3-feature__stars { font-size: 18px; gap: 4px; }

.xf3-feature__text {
    margin: 20px auto 0;
    max-width: 760px;
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.5;
    font-weight: 600;
    color: var(--xf3-ink);
    letter-spacing: -0.01em;
}

.xf3-feature__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.xf3-feature__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--xf3-soft-2);
}

.xf3-feature__who { display: flex; flex-direction: column; text-align: left; }
.xf3-feature__name { font-size: 15.5px; font-weight: 800; color: var(--xf3-ink); }
.xf3-feature__role { font-size: 13px; color: var(--xf3-muted); }
.xf3-feature__company { margin-left: 6px; }

/* ============ wall: masonry ============ */

.xf3-wall {
    column-gap: 20px;
}

.xf3-wall--c1 { column-count: 1; }
.xf3-wall--c2 { column-count: 2; }
.xf3-wall--c3 { column-count: 3; }

.xf3-wall__item {
    display: inline-block;
    width: 100%;
    margin: 0 0 20px;
    padding: 24px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.xf3-wall__text {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--xf3-ink-2);
}

/* ============ cards ============ */

.xf3-quote__grid {
    display: grid;
    gap: 22px;
}

.xf3-quote__grid--c1 { grid-template-columns: 1fr; }
.xf3-quote__grid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xf3-quote__grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.xf3-quote-card {
    position: relative;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.xf3-quote-card__mark {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 30px;
    color: var(--xf3-primary-soft);
}

.xf3-quote-card__text {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--xf3-ink-2);
}

.xf3-quote-card .xf3-quote-author { margin-top: auto; padding-top: 18px; }

/* ============ slider ============ */

.xf3-quote__slider {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 64px;
}

.xf3-quote__slider .xf3-slide {
    display: none;
    text-align: center;
    margin: 0;
    padding: 40px 24px 8px;
}

.xf3-quote__slider .xf3-slide.is-active {
    display: block;
    animation: xf3-quote-fade .5s ease both;
}

@keyframes xf3-quote-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.xf3-quote__slider-mark {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    align-items: center;
    justify-content: center;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
    font-size: 24px;
}

.xf3-quote__slider-stars {
    margin-top: 16px;
    font-size: 17px;
    gap: 3px;
}

.xf3-quote__slider-text {
    margin: 18px auto 0;
    max-width: 720px;
    font-size: clamp(18px, 2.3vw, 24px);
    line-height: 1.55;
    font-weight: 600;
    color: var(--xf3-ink);
}

.xf3-quote__slider-author {
    justify-content: center;
    margin-top: 24px;
}

.xf3-quote__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--xf3-line);
    background: #fff;
    color: var(--xf3-ink-2);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 40px;
    min-height: 40px;
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.xf3-quote__arrow:hover {
    border-color: var(--xf3-primary);
    color: var(--xf3-primary);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-quote__arrow--prev { left: 0; }
.xf3-quote__arrow--next { right: 0; }

.xf3-quote__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.xf3-quote__dots .xf3-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #c6d0e0;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.xf3-quote__dots .xf3-slider__dot.is-active {
    width: 24px;
    background: var(--xf3-primary);
}

/* ============ rating summary ============ */

.xf3-rating {
    max-width: 940px;
    margin: 0 auto;
    padding: 38px 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 44px;
    align-items: center;
}

.xf3-rating__summary { text-align: center; }

.xf3-rating__score {
    font-family: var(--xf3-font-num);
    font-size: clamp(64px, 9vw, 96px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--xf3-ink);
    font-variant-numeric: tabular-nums;
}

.xf3-rating__out {
    font-size: 22px;
    font-weight: 700;
    color: var(--xf3-muted);
}

.xf3-rating__stars {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 12px;
    font-size: 20px;
}

.xf3-rating__count {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: var(--xf3-muted);
}

.xf3-rating__badges {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.xf3-rating__badges li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-rating__badges i { color: var(--xf3-success); }

.xf3-rating__bars { display: flex; flex-direction: column; gap: 13px; }

.xf3-rating__row {
    display: grid;
    grid-template-columns: 44px 1fr 46px;
    align-items: center;
    gap: 14px;
}

.xf3-rating__star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    font-variant-numeric: tabular-nums;
}

.xf3-rating__star i { font-size: 12px; color: #f59e0b; }

.xf3-rating__track {
    height: 9px;
    border-radius: 999px;
    background: var(--xf3-soft-2);
    overflow: hidden;
}

.xf3-rating__fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.xf3-rating__pct {
    font-family: var(--xf3-font-num);
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.xf3-rating__recent { margin-top: 24px; }
.xf3-rating__recent-card { padding: 22px; }

/* ============ video cards ============ */

.xf3-video-card { padding: 0; }

.xf3-video-card__media {
    border-radius: var(--xf3-radius) var(--xf3-radius) 0 0;
}

.xf3-video-card__media img {
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.xf3-video-card:hover .xf3-video-card__media img { transform: scale(1.05); }

.xf3-video-card__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .92);
    color: var(--xf3-primary);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(12, 23, 48, .25);
    transition: transform .25s ease, background .25s ease;
    padding-left: 4px;
}

.xf3-video-card__play:hover {
    transform: scale(1.08);
    background: #fff;
}

.xf3-video-card__duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(12, 23, 48, .82);
    color: #fff;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.xf3-video-card__body { padding: 22px; }

.xf3-video-card__body blockquote { margin-top: 0; }

/* ============ reviews rows ============ */

.xf3-reviews {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xf3-reviews__item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px 26px;
    margin: 0;
}

.xf3-reviews__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--xf3-soft-2);
}

.xf3-reviews__body { min-width: 0; flex: 1; }

.xf3-reviews__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.xf3-reviews__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--xf3-muted);
    white-space: nowrap;
}

.xf3-reviews__date i { font-size: 13px; }

.xf3-reviews__text {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--xf3-ink-2);
}

.xf3-reviews__who { margin-top: 12px; font-size: 13px; }

/* ============ logo quotes ============ */

.xf3-logoquote {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 28px 26px;
    margin: 0;
}

.xf3-logoquote__logo {
    flex: 0 0 112px;
    width: 112px;
    height: 64px;
    border-radius: 12px;
    border: 1px solid var(--xf3-line);
    background: var(--xf3-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.xf3-logoquote__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.xf3-logoquote__body { min-width: 0; }

.xf3-logoquote__text {
    font-size: 15.5px;
    line-height: 1.65;
    font-weight: 600;
    color: var(--xf3-ink);
}

.xf3-logoquote__who { margin-top: 12px; }

/* ============ responsive ============ */

@media (max-width: 991.98px) {
    .xf3-quote__grid--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xf3-wall--c3 { column-count: 2; }

    .xf3-rating {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 32px 28px;
    }

    .xf3-rating__summary {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "score stars"
            "score count"
            "badges badges";
        align-items: center;
        gap: 4px 18px;
        text-align: left;
    }

    .xf3-rating__score { grid-area: score; align-self: center; }
    .xf3-rating__out { display: none; }
    .xf3-rating__stars { grid-area: stars; justify-content: flex-start; margin-top: 0; }
    .xf3-rating__count { grid-area: count; margin-top: 0; }
    .xf3-rating__badges {
        grid-area: badges;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) {
    .xf3-feature { padding: 40px 22px 30px; }
    .xf3-feature__mark { font-size: 56px; top: 14px; left: 16px; }
    .xf3-feature__company { margin-left: 0; flex-basis: 100%; justify-content: center; }

    .xf3-quote__grid--c2,
    .xf3-quote__grid--c3 { grid-template-columns: 1fr; }
    .xf3-wall--c2,
    .xf3-wall--c3 { column-count: 1; }

    .xf3-quote__slider { padding: 0; }
    .xf3-quote__arrow {
        top: auto;
        bottom: 0;
        width: 40px;
        height: 40px;
    }
    .xf3-quote__arrow--prev { left: 50%; transform: translate(calc(-100% - 8px), 0); }
    .xf3-quote__arrow--next { right: 50%; transform: translate(calc(100% + 8px), 0); }
    .xf3-quote__dots { margin-bottom: 56px; }
    .xf3-quote__slider .xf3-slide { padding-bottom: 8px; }

    .xf3-rating { padding: 26px 20px; }
    .xf3-rating__row { grid-template-columns: 38px 1fr 40px; gap: 10px; }
    .xf3-rating__summary { display: block; text-align: center; }
    .xf3-rating__stars { justify-content: center; margin-top: 10px; }
    .xf3-rating__count { margin-top: 8px; }
    .xf3-rating__badges { justify-content: center; }

    .xf3-reviews__item { flex-direction: column; padding: 20px; }

    .xf3-logoquote { flex-direction: column; gap: 16px; }
    .xf3-logoquote__logo { flex-basis: auto; width: 100%; }

    .xf3-quote-author img { width: 40px; height: 40px; }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
    .xf3-quote__slider .xf3-slide.is-active { animation: none; }
    .xf3-video-card__media img { transition: none; }
    .xf3-video-card__play { transition: none; }
}
/*
 * xFactory B3 — service family.
 * Variant: rows — alternating image / text service rows.
 * Every rule is scoped under .xf3-service.
 */

.xf3-service h3 { margin: 0; }
.xf3-service p { margin: 0; }

.xf3-service--rows { background: var(--xf3-soft); }

.xf3-service .xf3-svc__rows {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.xf3-service .xf3-svc__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 46px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}

.xf3-service .xf3-svc__row:hover {
    box-shadow: var(--xf3-shadow);
    transform: translateY(-3px);
}

/* Alternate media side: even rows (0-based) media left, odd rows media right. */
.xf3-service .xf3-svc__row--rev .xf3-svc__media { order: 2; }
.xf3-service .xf3-svc__row--rev .xf3-svc__body { order: 1; }

.xf3-service .xf3-svc__media {
    position: relative;
    border-radius: var(--xf3-radius);
    box-shadow: 0 14px 34px rgba(15, 27, 51, .14);
}

.xf3-service .xf3-svc__index {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: var(--xf3-font-num);
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    background: rgba(12, 23, 48, .82);
    backdrop-filter: blur(4px);
}

.xf3-service .xf3-svc__body { padding: 10px 8px; }

.xf3-service .xf3-svc__icon {
    margin-bottom: 18px;
}

.xf3-service .xf3-svc__title {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xf3-ink);
}

.xf3-service .xf3-svc__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.78;
    color: var(--xf3-muted);
}

/* Buttons under the rows. */
.xf3-service .xf-buttons {
    justify-content: center;
    margin-top: 36px;
}

/* ============================================================= responsive */

@media (max-width: 991.98px) {
    .xf3-service .xf3-svc__row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 22px;
    }

    /* Media always stacks above the text on touch devices. */
    .xf3-service .xf3-svc__row--rev .xf3-svc__media { order: 0; }
    .xf3-service .xf3-svc__row--rev .xf3-svc__body { order: 0; }
}

@media (max-width: 575.98px) {
    .xf3-service .xf3-svc__rows { gap: 18px; }
    .xf3-service .xf3-svc__row { padding: 16px; border-radius: var(--xf3-radius); }
    .xf3-service .xf3-svc__title { font-size: 20px; }
    .xf3-service .xf3-svc__text { font-size: 14px; }
    .xf3-service .xf3-svc__body { padding: 4px 2px; }
    .xf3-service .xf3-svc__index {
        min-width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ================================================== motion / accessibility */

@media (prefers-reduced-motion: reduce) {
    .xf3-service .xf3-svc__row { transition: none; }
}
/*
 * xFactory B3 — split family.
 * Variants: facts · featurelist · rnd · engineering · logistics ·
 *           whyus · industry · solution.
 * Every rule is scoped under .xf3-split.
 */

.xf3-split h3 { margin: 0; }
.xf3-split p { margin: 0; }
.xf3-split ul { margin: 0; padding: 0; list-style: none; }

/* ============================================================ layout === */

.xf3-split .xf3-split__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 58px;
    align-items: center;
}

.xf3-split .xf3-split__grid--left .xf3-split__media-col { order: 2; }
.xf3-split .xf3-split__grid--left .xf3-split__body-col { order: 1; }

.xf3-split .xf3-split__media {
    position: relative;
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow);
}

.xf3-split .xf3-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xf3-split .xf3-split__badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 36px);
    padding: 11px 17px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(15, 27, 51, .18);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-split .xf3-split__badge i {
    color: var(--xf3-primary);
    font-size: 17px;
}

.xf3-split .xf-section-head { margin-bottom: 26px; }

/* ======================================================= check lists === */

.xf3-split .xf3-split__checks {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 28px;
}

.xf3-split .xf3-split__checks--cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 22px;
}

.xf3-split .xf3-split__checks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--xf3-ink-2);
    min-width: 0;
}

.xf3-split .xf3-split__checks > li > i:first-child {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: var(--xf3-success);
}

/* Engineering: rows with trailing meta chips. */
.xf3-split .xf3-split__checks--meta li {
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: 11px;
}

.xf3-split .xf3-split__checks--meta .xf3-split__check-text { flex: 1 1 220px; }

.xf3-split .xf3-split__chip {
    flex: 0 0 auto;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ==================================================== numbered feature */

.xf3-split .xf3-split__numbers {
    margin-bottom: 28px;
    border-top: 1px solid var(--xf3-line);
}

.xf3-split .xf3-split__numbers li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--xf3-line);
    transition: background .25s ease, padding-left .25s ease;
}

.xf3-split .xf3-split__numbers li:hover {
    background: var(--xf3-soft);
    padding-left: 12px;
}

.xf3-split .xf3-split__number {
    flex: 0 0 46px;
    font-family: var(--xf3-font-num);
    font-size: 21px;
    font-weight: 800;
    color: var(--xf3-primary);
    letter-spacing: .02em;
}

.xf3-split .xf3-split__number-text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--xf3-ink-2);
}

/* =============================================== challenge / approach  */

.xf3-split .xf3-split__panel {
    border-radius: var(--xf3-radius);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.xf3-split .xf3-split__panel--risk {
    background: var(--xf3-danger-bg);
    border: 1px solid var(--xf3-danger-tint);
}

.xf3-split .xf3-split__panel--plan {
    background: var(--xf3-primary-soft);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-split .xf3-split__panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.xf3-split .xf3-split__panel--risk .xf3-split__panel-title { color: var(--xf3-danger-deep); }
.xf3-split .xf3-split__panel--plan .xf3-split__panel-title { color: var(--xf3-primary-deep); }

.xf3-split .xf3-split__panel-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.xf3-split .xf3-split__panel-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.62;
    color: var(--xf3-ink-2);
}

.xf3-split .xf3-split__panel-list i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 13px;
}

.xf3-split .xf3-split__panel--risk i { color: var(--xf3-danger); }
.xf3-split .xf3-split__panel--plan i { color: var(--xf3-primary); }

.xf3-split .xf3-split__statlabel {
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--xf3-muted);
}

/* ============================================================ stats === */

.xf3-split .xf3-split__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.xf3-split .xf3-split__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 15px 17px;
    border-radius: 12px;
    background: var(--xf3-soft);
    border: 1px solid var(--xf3-line);
    min-width: 0;
}

.xf3-split .xf3-split__stat-value {
    font-family: var(--xf3-font-num);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--xf3-primary);
    overflow-wrap: anywhere;
}

.xf3-split .xf3-split__stat-label {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--xf3-muted);
}

/* Why-us: bordered tiles with top accent. */
.xf3-split .xf3-split__stats--tiles .xf3-split__stat {
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-top: 3px solid var(--xf3-primary);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-split .xf3-split__stats--tiles .xf3-split__stat-value { color: var(--xf3-ink); }

/* Logistics: incoterm-style dark terms. */
.xf3-split .xf3-split__stats--terms .xf3-split__stat {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.xf3-split .xf3-split__stats--terms .xf3-split__stat-value {
    font-size: 22px;
    letter-spacing: .03em;
    color: var(--xf3-primary-tint-2);
}

.xf3-split .xf3-split__stats--terms .xf3-split__stat-label { color: rgba(255, 255, 255, 0.62); }

/* ================================================ variant ambience ==== */

.xf3-split--facts { background: #fff; }

.xf3-split--featurelist { background: var(--xf3-soft); }
.xf3-split--featurelist .xf3-split__numbers li:hover { background: #fff; }

.xf3-split--rnd { background: #fff; overflow-x: clip; }
.xf3-split--rnd .xf3-split__media-col { position: relative; }
.xf3-split--rnd .xf3-split__media-col::before {
    content: "";
    position: absolute;
    top: -22px;
    right: -22px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--bs-primary-rgb), .16), transparent 70%);
    pointer-events: none;
}

.xf3-split--engineering { background: linear-gradient(180deg, var(--xf3-primary-tint-8) 0%, #ffffff 75%); }

.xf3-split--whyus { background: #fff; }
.xf3-split--whyus .xf3-split__media { border: 1px solid var(--xf3-line); }

.xf3-split--industry { background: var(--xf3-soft); }

/* Logistics is the one deliberately dark split. */
.xf3-split--logistics {
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, 0.82);
}
.xf3-split--logistics .xf-section-head__title { color: #fff; }
.xf3-split--logistics .xf-eyebrow { color: var(--xf3-primary-tint); }
.xf3-split--logistics .xf-section-head__subtitle { color: rgba(255, 255, 255, 0.68); }
.xf3-split--logistics .xf3-split__checks li { color: rgba(255, 255, 255, 0.85); }
.xf3-split--logistics .xf3-split__checks > li > i:first-child {
    color: var(--xf3-dark);
    background: var(--xf3-primary-tint);
}

.xf3-split--solution { background: #fff; }
.xf3-split--solution .xf3-split__grid { align-items: start; }
.xf3-split--solution .xf3-split__media { position: sticky; top: 24px; }

/* Buttons spacing. */
.xf3-split .xf-buttons { margin-top: 4px; }

/* ============================================================= responsive */

@media (max-width: 991.98px) {
    .xf3-split .xf3-split__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* Media always stacks above the body on touch devices. */
    .xf3-split .xf3-split__grid--left .xf3-split__media-col,
    .xf3-split .xf3-split__grid--left .xf3-split__body-col { order: initial; }
    .xf3-split .xf3-split__media-col { order: 0 !important; }
    .xf3-split .xf3-split__body-col { order: 1 !important; }

    .xf3-split--solution .xf3-split__media { position: static; }

    /* Keep the decorative glow inside the viewport on touch widths (fallback for overflow:clip). */
    .xf3-split--rnd .xf3-split__media-col::before { right: 0; }
}

@media (max-width: 575.98px) {
    .xf3-split .xf3-split__grid { gap: 26px; }

    .xf3-split .xf3-split__checks--cols { grid-template-columns: 1fr; }

    .xf3-split .xf3-split__stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .xf3-split .xf3-split__checks li,
    .xf3-split .xf3-split__number-text,
    .xf3-split .xf3-split__panel-list li { font-size: 14px; }

    .xf3-split .xf3-split__badge {
        font-size: 12.5px;
        padding: 9px 13px;
    }

    .xf3-split .xf3-split__numbers li { gap: 13px; }
    .xf3-split .xf3-split__number { flex-basis: 38px; font-size: 18px; }
}

/* ================================================== motion / accessibility */

@media (prefers-reduced-motion: reduce) {
    .xf3-split .xf3-split__numbers li { transition: none; }
}
/*
 * xFactory B3 — stats family (17 variants).
 * Every rule is scoped under .xf3-stats.
 */

/* ============ shared metric atoms ============ */

.xf3-stats .xf3-stat__num {
    font-family: var(--xf3-font-num);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--xf3-ink);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    overflow-wrap: anywhere;
}

.xf3-stats .xf3-stat__num--lg { font-size: clamp(26px, 2.8vw, 34px); }

.xf3-stats .xf3-stat__affix {
    font-size: 0.55em;
    font-weight: 700;
    color: var(--xf3-primary);
    margin-right: 1px;
}

.xf3-stats .xf3-stat__label {
    margin-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    line-height: 1.35;
}

.xf3-stats .xf3-stat__label--lg { font-size: 16px; }

.xf3-stats .xf3-stat__note {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--xf3-muted);
}

.xf3-stats .xf3-stat__icon { margin-bottom: 16px; }

.xf3-stats .xf3-stat--plain {
    padding: 6px 4px;
}

.xf3-stats__sidenote {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
}

.xf3-stats .xf3-stagger-children { display: grid; gap: 22px; }
.xf3-stats .xf3-stats__grid { align-items: stretch; }

/* ============ row ============ */

.xf3-stats--row .xf3-stat {
    position: relative;
    padding: 26px 22px;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    background: #fff;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

.xf3-stats--row .xf3-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--xf3-gradient);
    opacity: 0;
    transition: opacity .35s ease;
}

.xf3-stats--row .xf3-stat:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
}

.xf3-stats--row .xf3-stat:hover::before { opacity: 1; }

/* ============ big ============ */

.xf3-stats__big {
    align-items: center;
    gap: 48px;
}

.xf3-stats__big-main {
    padding: 40px 36px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-primary-soft);
    border: 1px solid var(--xf3-primary-tint-4);
}

.xf3-stats .xf3-stat__num--giant {
    font-size: clamp(52px, 8vw, 104px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--xf3-primary);
}

.xf3-stats__big-main .xf3-stat__label--lg { margin-top: 14px; font-size: 18px; }
.xf3-stats__big-main .xf3-stat__note { font-size: 14px; margin-top: 8px; }

.xf3-stats__big-copy {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--xf3-muted);
    margin: 0 0 26px;
}

.xf3-stats__big-minis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--xf3-line);
}

.xf3-stats__big-mini dt {
    font-family: var(--xf3-font-num);
    font-size: 24px;
    font-weight: 800;
    color: var(--xf3-ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.xf3-stats__big-mini dd {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--xf3-muted);
}

/* ============ cards / kpi ============ */

.xf3-kpi { padding: 24px; }

.xf3-kpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.xf3-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: #ecfdf3;
    color: #137a3c;
    white-space: nowrap;
}

.xf3-kpi__delta i { font-size: 13px; }
.xf3-kpi__delta--down { background: #ecfdf3; color: #137a3c; }

.xf3-kpi .xf3-stat__num { margin-top: 2px; }

/* ============ bars ============ */

.xf3-bars {
    max-width: 880px;
    margin: 0 auto;
    padding: 30px 32px;
}

.xf3-bars__row + .xf3-bars__row { margin-top: 24px; }

.xf3-bars__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.xf3-bars__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
    min-width: 0;
}

.xf3-bars__label i { color: var(--xf3-primary); font-size: 16px; flex: 0 0 auto; }

.xf3-bars__value {
    font-family: var(--xf3-font-num);
    font-size: 15px;
    font-weight: 800;
    color: var(--xf3-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xf3-bars__track {
    height: 10px;
    border-radius: 999px;
    background: var(--xf3-soft-2);
    overflow: hidden;
}

.xf3-bars__fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--xf3-gradient);
}

.xf3-bars__fill--util { background: linear-gradient(90deg, var(--xf3-primary), var(--xf3-primary-2)); }

.xf3-bars__note {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--xf3-muted);
}

/* ============ rings ============ */

.xf3-ring {
    position: relative;
    text-align: center;
    padding: 26px 18px;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    background: #fff;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

.xf3-ring:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
}

.xf3-ring__svg {
    width: 132px;
    height: 132px;
    margin: 0 auto;
    transform: rotate(-90deg);
}

.xf3-ring__track {
    fill: none;
    stroke: var(--xf3-soft-2);
    stroke-width: 10;
}

.xf3-ring__arc {
    fill: none;
    stroke: var(--xf3-primary);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
}

.xf3-ring__center {
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.xf3-ring__num {
    font-family: var(--xf3-font-num);
    font-size: 26px;
    font-weight: 800;
    color: var(--xf3-ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.xf3-ring__label {
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
}

.xf3-ring__note {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--xf3-muted);
    line-height: 1.5;
}

/* ============ dashboard ============ */

.xf3-stats__counters { margin-bottom: 24px; }
.xf3-stats__counters .xf3-stat { text-align: center; }
.xf3-stats__counters .xf3-stat__num { justify-content: center; }

.xf3-util { padding: 28px 30px; }

.xf3-util__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.xf3-util__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-util__grid { gap: 22px 34px; }
.xf3-bars__row--util { margin-top: 0; }

/* ============ year (dense grid) ============ */

.xf3-year {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    background: #fff;
}

.xf3-year__cell {
    padding: 26px 24px;
    border-right: 1px solid var(--xf3-line);
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-year__cell:nth-child(4n) { border-right: none; }
.xf3-year__cell:nth-last-child(-n+4) { border-bottom: none; }

.xf3-year__num {
    font-family: var(--xf3-font-num);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--xf3-ink);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

.xf3-year__label {
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
}

.xf3-year__note {
    margin-top: 3px;
    font-size: 12px;
    color: var(--xf3-muted);
}

/* ============ benchmark ============ */

.xf3-bench {
    max-width: 940px;
    margin: 0 auto;
    padding: 30px 32px;
}

.xf3-bench__legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.xf3-bench__row + .xf3-bench__row {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--xf3-line);
}

.xf3-bench__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.xf3-bench__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--xf3-ink-2);
}

.xf3-bench__label i { color: var(--xf3-primary); }

.xf3-bench__vals {
    font-family: var(--xf3-font-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xf3-bench__vals strong { font-size: 17px; color: var(--xf3-primary); }
.xf3-bench__vals span { font-size: 13px; color: var(--xf3-muted); margin-left: 6px; }

.xf3-bench__track { height: 8px; }
.xf3-bench__track + .xf3-bench__track { margin-top: 6px; }

.xf3-bench__fill { width: 0; height: 100%; border-radius: 999px; }
.xf3-bench__fill--us { background: var(--xf3-gradient); }
.xf3-bench__fill--avg { background: #c6d0e0; }

/* ============ inline ============ */

.xf3-stats--inline { background: transparent; }

.xf3-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 8px 0;
}

.xf3-inline__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-right: 1px solid var(--xf3-line);
}

.xf3-inline__item:last-child { border-right: none; }

.xf3-inline__item > i {
    font-size: 20px;
    color: var(--xf3-primary);
}

.xf3-inline__num {
    font-family: var(--xf3-font-num);
    font-size: 22px;
    font-weight: 800;
    color: var(--xf3-ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
}

.xf3-inline__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xf3-muted);
}

/* ============ dual (two-tone stats card) ============
   NOTE: standalone .xf3-dual class — do NOT reuse the features-family
   .xf3-split namespace (that class also marks page <section> shells). */

.xf3-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--xf3-radius-lg);
    overflow: hidden;
    border: 1px solid var(--xf3-line);
}

.xf3-dual__pane { padding: 34px 32px; }

.xf3-dual__pane--export {
    background: var(--xf3-gradient-dark);
    color: rgba(255, 255, 255, .85);
}

.xf3-dual__pane--domestic { background: var(--xf3-soft); }

.xf3-dual__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 22px;
    margin-top: 22px;
}

.xf3-dual__pane--export .xf3-stat__num { color: #fff; }
.xf3-dual__pane--export .xf3-stat__affix { color: var(--xf3-primary-tint-2); }
.xf3-dual__pane--export .xf3-stat__label { color: rgba(255, 255, 255, .92); }
.xf3-dual__pane--export .xf3-stat__note { color: rgba(255, 255, 255, .6); }

/* ============ industry (world map backdrop) ============ */

.xf3-stats--industry { position: relative; overflow-x: clip; }

.xf3-stats--industry::before {
    content: "";
    position: absolute;
    right: -40px;
    top: -30px;
    width: 46%;
    height: 130%;
    background: url("/themes/theme-v2/images/placeholders/world-map.svg") center / contain no-repeat;
    opacity: .07;
    pointer-events: none;
}

.xf3-stats--industry .xf3-grid { position: relative; }
.xf3-stats--industry .xf3-stat__num { font-size: clamp(30px, 3.6vw, 46px); }

/* ============ index cards ============ */

.xf3-index-card { padding: 24px; }

.xf3-index-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.xf3-index-card__bar { margin: 14px 0 10px; height: 8px; }

/* ============ dark variants: band / ticker / caseresults / results / roi ============ */

.xf3-stats--band,
.xf3-stats--ticker,
.xf3-stats--caseresults,
.xf3-stats--results,
.xf3-stats--roi {
    background: var(--xf3-dark);
    color: rgba(255, 255, 255, .82);
}

.xf3-stats--band { background: var(--xf3-gradient-dark); }
.xf3-stats--ticker { background: #080f22; }
.xf3-stats--caseresults { background: linear-gradient(135deg, #0c1730 0%, var(--xf3-primary-navy) 100%); }
.xf3-stats--results { background: #0a1428; }
.xf3-stats--roi { background: linear-gradient(120deg, var(--xf3-primary-navy) 0%, #0c1730 55%, var(--xf3-primary-navy) 100%); }

.xf3-stats--band .xf-section-head__title,
.xf3-stats--ticker .xf-section-head__title,
.xf3-stats--caseresults .xf-section-head__title,
.xf3-stats--results .xf-section-head__title,
.xf3-stats--roi .xf-section-head__title { color: #fff; }

.xf3-stats--band .xf-section-head__subtitle,
.xf3-stats--ticker .xf-section-head__subtitle,
.xf3-stats--caseresults .xf-section-head__subtitle,
.xf3-stats--results .xf-section-head__subtitle,
.xf3-stats--roi .xf-section-head__subtitle { color: rgba(255, 255, 255, .68); }

.xf3-stats--band .xf-eyebrow,
.xf3-stats--ticker .xf-eyebrow,
.xf3-stats--caseresults .xf-eyebrow,
.xf3-stats--results .xf-eyebrow,
.xf3-stats--roi .xf-eyebrow { color: var(--xf3-primary-tint); }

.xf3-stats .xf3-stat--dark .xf3-stat__num { color: #fff; }
.xf3-stats .xf3-stat--dark .xf3-stat__affix { color: var(--xf3-primary-tint); }
.xf3-stats .xf3-stat--dark .xf3-stat__label { color: rgba(255, 255, 255, .9); }
.xf3-stats .xf3-stat--dark .xf3-stat__note { color: rgba(255, 255, 255, .55); }

/* band: glassy tiles */
.xf3-stats__counters--band .xf3-stat {
    text-align: center;
    padding: 28px 18px;
    border-radius: var(--xf3-radius-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}

.xf3-stats__counters--band .xf3-stat__icon { margin: 0 auto 14px; }
.xf3-stats__counters--band .xf3-stat__num { justify-content: center; }

/* ticker: giant tabular numerals */
.xf3-stats--ticker .xf3-stats--darkgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.xf3-stats__counters--ticker .xf3-stat {
    text-align: left;
    padding: 34px 28px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.xf3-stats__counters--ticker .xf3-stat:last-child { border-right: none; }

.xf3-stats .xf3-stat__num--tick {
    font-size: clamp(44px, 6.4vw, 84px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #fff;
}

.xf3-stats__counters--ticker .xf3-stat__label {
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

/* caseresults: hairline top counters */
.xf3-stats__counters--caseresults .xf3-stat {
    text-align: center;
    padding: 10px 16px;
    border-top: 3px solid rgba(127, 176, 255, .65);
}

.xf3-stats__counters--caseresults .xf3-stat__icon { margin: 0 auto 14px; }
.xf3-stats__counters--caseresults .xf3-stat__num { justify-content: center; font-size: clamp(32px, 4vw, 52px); }

/* results: 3 centered counters with dividers */
.xf3-stats__counters--results {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto 0;
}

.xf3-stats__counters--results .xf3-stat {
    text-align: center;
    padding: 24px 30px;
    border-right: 1px solid rgba(255, 255, 255, .14);
}

.xf3-stats__counters--results .xf3-stat:last-child { border-right: none; }
.xf3-stats__counters--results .xf3-stat__icon { margin: 0 auto 14px; }
.xf3-stats__counters--results .xf3-stat__num { justify-content: center; font-size: clamp(30px, 4vw, 48px); }

/* roi: large savings counters */
.xf3-stats__counters--roi .xf3-stat {
    padding: 26px 22px;
    border-radius: var(--xf3-radius);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.xf3-stats__counters--roi .xf3-stat__icon { margin-bottom: 14px; }
.xf3-stats__counters--roi .xf3-stat__num { font-size: clamp(30px, 3.6vw, 44px); }

.xf3-stats__sidenote--dark { color: rgba(255, 255, 255, .55); }

/* ============ responsive ============ */

@media (max-width: 991.98px) {
    .xf3-stats__big { grid-template-columns: 1fr; gap: 28px; }
    .xf3-year { grid-template-columns: repeat(2, 1fr); }
    .xf3-year__cell:nth-child(4n) { border-right: 1px solid var(--xf3-line); }
    .xf3-year__cell:nth-child(2n) { border-right: none; }
    .xf3-year__cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--xf3-line); }
    .xf3-year__cell:nth-last-child(-n+2) { border-bottom: none; }

    .xf3-stats--ticker .xf3-stats--darkgrid { grid-template-columns: repeat(2, 1fr); }
    .xf3-stats__counters--ticker .xf3-stat:nth-child(2n) { border-right: none; }
    .xf3-stats__counters--ticker .xf3-stat { border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .xf3-stats__counters--ticker .xf3-stat:nth-last-child(-n+2) { border-bottom: none; }

    .xf3-stats__counters--results { grid-template-columns: 1fr; }
    .xf3-stats__counters--results .xf3-stat { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .xf3-stats__counters--results .xf3-stat:last-child { border-bottom: none; }
}

@media (max-width: 575.98px) {
    .xf3-stats .xf3-stagger-children { gap: 14px; }

    .xf3-bars,
    .xf3-bench { padding: 22px 18px; }

    .xf3-util { padding: 22px 18px; }

    .xf3-stats__big-main { padding: 28px 22px; }
    .xf3-stats__big-minis { grid-template-columns: 1fr; gap: 14px; }

    .xf3-year { grid-template-columns: 1fr; }
    .xf3-year__cell { border-right: none !important; }
    .xf3-year__cell:not(:last-child) { border-bottom: 1px solid var(--xf3-line); }

    .xf3-dual { grid-template-columns: 1fr; }
    .xf3-dual__pane { padding: 26px 22px; }

    .xf3-inline__item {
        flex: 1 1 45%;
        border-right: none;
        justify-content: center;
        padding: 12px 16px;
    }

    .xf3-stats--ticker .xf3-stats--darkgrid { grid-template-columns: 1fr; }
    .xf3-stats__counters--ticker .xf3-stat {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding: 26px 20px;
    }
    .xf3-stats__counters--ticker .xf3-stat:last-child { border-bottom: none; }

    .xf3-ring__svg { width: 116px; height: 116px; }
    .xf3-ring__center { top: 84px; }

    .xf3-stats--industry::before {
        width: 90%;
        right: -20px;
        opacity: .05;
    }
}

/* ============ reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
    .xf3-stats--row .xf3-stat,
    .xf3-ring,
    .xf3-card { transition: none; }
}
/*
 * xFactory B3 — steps family.
 * Variants: verify · oem · quality · flow · finder · config · checklist.
 * Every rule is scoped under .xf3-steps.
 */

.xf3-steps h3 { margin: 0; }
.xf3-steps p { margin: 0; }
.xf3-steps ol, .xf3-steps ul { margin: 0; padding: 0; list-style: none; }

/* ================================================== shared arrow flow === */
/* Horizontal connected nodes; collapses to a vertical chain on mobile.    */

.xf3-steps .xf3-flow {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.xf3-steps .xf3-flow__node {
    flex: 1 1 0;
    min-width: 0;
}

.xf3-steps .xf3-flow__gap {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xf3-primary-tint-3);
    font-size: 20px;
}

.xf3-steps .xf3-flow__gap i { display: block; }

.xf3-steps .xf3-steps__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 26px;
}

.xf3-steps .xf3-steps__note i { margin-top: 3px; color: var(--xf3-primary); }

/* ================================================================ verify */
/* Flat numbered nodes, outlined circles, connecting chevrons. */

.xf3-steps--verify { background: #fff; }

.xf3-steps .xf3-flow--verify { align-items: flex-start; }

.xf3-steps .xf3-st-verify__node {
    position: relative;
    padding: 0 6px;
}

.xf3-steps .xf3-st-verify__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 800;
    font-family: var(--xf3-font-num);
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    border: 2px solid var(--xf3-primary-tint-3);
    margin-bottom: 16px;
}

.xf3-steps .xf3-flow--verify .xf3-flow__gap {
    flex-basis: 40px;
    height: 52px;
}

.xf3-steps .xf3-flow--verify .xf3-flow__gap i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--xf3-line);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xf3-steps .xf3-st-verify__meta {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--xf3-primary);
    margin-bottom: 6px;
}

.xf3-steps .xf3-st-verify__title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-verify__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.68;
    color: var(--xf3-muted);
}

/* =================================================================== oem */
/* Connected process cards. */

.xf3-steps--oem { background: var(--xf3-soft); }

.xf3-steps .xf3-flow--oem { align-items: stretch; }

.xf3-steps .xf3-st-oem__node {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}

.xf3-steps .xf3-st-oem__node:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-steps .xf3-st-oem__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.xf3-steps .xf3-st-oem__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 19px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-steps .xf3-st-oem__meta {
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--xf3-ink-2);
    background: var(--xf3-soft);
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
}

.xf3-steps .xf3-st-oem__step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #93a6c8;
    margin-bottom: 7px;
}

.xf3-steps .xf3-st-oem__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-oem__text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.66;
    color: var(--xf3-muted);
}

.xf3-steps .xf3-flow--oem .xf3-flow__gap {
    flex-basis: 30px;
    color: var(--xf3-primary);
}

/* =============================================================== quality */
/* IQC → IPQC → OQA → FAI stage cards with pulsing status dots. */

.xf3-steps--quality {
    background:
        radial-gradient(100% 120% at 100% 0%, var(--xf3-primary-tint-7) 0%, #ffffff 55%),
        #fff;
}

.xf3-steps .xf3-flow--quality { align-items: stretch; }

.xf3-steps .xf3-st-qual__node {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 18px 18px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-top: 3px solid var(--xf3-primary);
    border-radius: 12px;
    box-shadow: var(--xf3-shadow-sm);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

.xf3-steps .xf3-st-qual__node:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow);
}

.xf3-steps .xf3-st-qual__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.xf3-steps .xf3-st-qual__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--xf3-success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
    position: relative;
}

.xf3-steps .xf3-st-qual__dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(22, 163, 74, .35);
    animation: xf3-qual-pulse 2.2s ease-out infinite;
}

.xf3-steps .xf3-st-qual__code {
    font-family: var(--xf3-font-num);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-qual__icon {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 16px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-steps .xf3-st-qual__text {
    font-size: 13px;
    line-height: 1.66;
    color: var(--xf3-muted);
}

.xf3-steps .xf3-st-qual__meta {
    display: inline-block;
    margin-top: auto;
    padding-top: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #0f7a3c;
}

.xf3-steps .xf3-flow__gap--qual {
    flex-basis: 34px;
    font-size: 22px;
    color: var(--xf3-primary);
}

@keyframes xf3-qual-pulse {
    0% { transform: scale(.6); opacity: .9; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ================================================================== flow */
/* Compact production routing nodes (SMT → packing). */

.xf3-steps--flow { background: var(--xf3-dark); }
.xf3-steps--flow .xf-section-head__title { color: #fff; }
.xf3-steps--flow .xf-eyebrow { color: var(--xf3-primary-tint); }
.xf3-steps--flow .xf-section-head__subtitle { color: rgba(255,255,255,.68); }

.xf3-steps .xf3-flow--prod { align-items: stretch; }

.xf3-steps .xf3-st-prod__node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 18px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background .3s ease, transform .3s ease, border-color .3s ease;
}

.xf3-steps .xf3-st-prod__node:hover {
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-3px);
    border-color: rgba(127, 176, 255, .55);
}

.xf3-steps .xf3-st-prod__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 17px;
    color: var(--xf3-primary-tint-2);
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

.xf3-steps .xf3-st-prod__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.xf3-steps .xf3-st-prod__text {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}

.xf3-steps .xf3-flow--prod .xf3-flow__gap {
    flex-basis: 26px;
    color: var(--xf3-primary-tint-2);
    font-size: 18px;
}

/* ================================================================ finder */
/* Three large cards with ghost numerals and timing chips. */

.xf3-steps--finder { background: linear-gradient(180deg, var(--xf3-primary-tint-8) 0%, #fff 70%); }

.xf3-steps .xf3-flow--finder { align-items: stretch; }

.xf3-steps .xf3-st-finder__node {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 28px 24px 26px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}

.xf3-steps .xf3-st-finder__node:hover {
    transform: translateY(-6px);
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-steps .xf3-st-finder__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.xf3-steps .xf3-st-finder__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 22px;
    color: #fff;
    background: var(--xf3-gradient);
    box-shadow: 0 12px 26px rgba(var(--bs-primary-rgb), .28);
}

.xf3-steps .xf3-st-finder__meta {
    font-family: var(--xf3-font-num);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.xf3-steps .xf3-st-finder__ghost {
    position: absolute;
    right: 18px;
    bottom: 6px;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    font-family: var(--xf3-font-num);
    color: var(--xf3-primary-tint-7);
    pointer-events: none;
}

.xf3-steps .xf3-st-finder__title {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-finder__text {
    position: relative;
    margin-top: 9px;
    padding-right: 34px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

.xf3-steps .xf3-flow__gap--finder {
    flex-basis: 40px;
    font-size: 24px;
    color: var(--xf3-primary);
}

/* ================================================================ config */
/* Vertical numbered stepper with a rail. */

.xf3-steps--config { background: #fff; }

.xf3-steps .xf3-st-config {
    max-width: 880px;
    margin: 0 auto;
}

.xf3-steps .xf3-st-config__item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
}

.xf3-steps .xf3-st-config__rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xf3-steps .xf3-st-config__item:not(:last-child) .xf3-st-config__rail::after {
    content: "";
    flex: 1;
    width: 2px;
    margin: 8px 0;
    background: repeating-linear-gradient(
        to bottom,
        var(--xf3-primary-tint-4) 0,
        var(--xf3-primary-tint-4) 6px,
        transparent 6px,
        transparent 12px
    );
}

.xf3-steps .xf3-st-config__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 20px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    border: 2px solid var(--xf3-primary-tint-3);
}

.xf3-steps .xf3-st-config__index {
    margin-top: 7px;
    font-family: var(--xf3-font-num);
    font-size: 12px;
    font-weight: 800;
    color: #93a6c8;
}

.xf3-steps .xf3-st-config__card {
    padding: 20px 24px 22px;
    margin-bottom: 22px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.xf3-steps .xf3-st-config__card:hover {
    border-color: var(--xf3-primary-tint-4);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-steps .xf3-st-config__meta {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    padding: 4px 11px;
    border-radius: 999px;
}

.xf3-steps .xf3-st-config__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-config__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

/* ============================================================= checklist */
/* Requirement group cards with two-column check lists. */

.xf3-steps--checklist { background: var(--xf3-soft); }

.xf3-steps .xf3-st-check { gap: 22px; }

.xf3-steps .xf3-st-check__group {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

.xf3-steps .xf3-st-check__group:hover {
    transform: translateY(-4px);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-steps .xf3-st-check__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-steps .xf3-st-check__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
}

.xf3-steps .xf3-st-check__title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--xf3-ink);
}

.xf3-steps .xf3-st-check__meta {
    flex: 0 0 auto;
    font-family: var(--xf3-font-num);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--xf3-muted);
    background: var(--xf3-soft);
    padding: 4px 9px;
    border-radius: 6px;
}

.xf3-steps .xf3-st-check__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px 18px;
}

.xf3-steps .xf3-st-check__list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--xf3-ink-2);
    min-width: 0;
}

.xf3-steps .xf3-st-check__list i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 13px;
    color: var(--xf3-success);
}

/* ============================================================= responsive */

@media (max-width: 991.98px) {
    /* All arrow flows become vertical chains; chevrons point down. */
    .xf3-steps .xf3-flow { flex-direction: column; }

    .xf3-steps .xf3-flow__gap {
        flex-basis: auto;
        height: 30px;
        width: 100%;
    }

    .xf3-steps .xf3-flow__gap i { transform: rotate(90deg); }

    .xf3-steps .xf3-st-oem__node,
    .xf3-steps .xf3-st-qual__node,
    .xf3-steps .xf3-st-prod__node,
    .xf3-steps .xf3-st-finder__node { height: auto; }

    .xf3-steps .xf3-st-check__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .xf3-steps .xf3-st-verify__num {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .xf3-steps .xf3-flow--verify .xf3-flow__gap { height: 24px; }

    .xf3-steps .xf3-st-config__item {
        grid-template-columns: 48px 1fr;
        gap: 13px;
    }

    .xf3-steps .xf3-st-config__node { width: 46px; height: 46px; font-size: 18px; }
    .xf3-steps .xf3-st-config__card { padding: 18px; }

    .xf3-steps .xf3-st-check__list { grid-template-columns: 1fr; }

    .xf3-steps .xf3-st-check__head { flex-wrap: wrap; }

    .xf3-steps .xf3-st-finder__ghost { font-size: 48px; }
}

/* ================================================== motion / accessibility */

@media (prefers-reduced-motion: reduce) {
    .xf3-steps .xf3-st-qual__dot::after { animation: none; }
    .xf3-steps .xf3-st-oem__node,
    .xf3-steps .xf3-st-qual__node,
    .xf3-steps .xf3-st-prod__node,
    .xf3-steps .xf3-st-finder__node,
    .xf3-steps .xf3-st-check__group { transition: none; }
}
/*
 * xFactory B3 — tables family.
 * Variants: capmatrix, skumatrix, solmatrix, moq, featurecmp, freight,
 * leadtime, options, incoterms.
 * Every rule is scoped under .xf3-tables.
 */

.xf3-tables h3,
.xf3-tables h4 { margin: 0; }

.xf3-tables p { margin: 0; }

/* ================================================================
   Generic scroll table (.xf3-table base lives in 00-base.css)
   ================================================================ */

.xf3-tables .xf3-tb-wrap {
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-tables .xf3-tb {
    min-width: 600px;
    font-size: 14.5px;
}

.xf3-tables .xf3-tb thead th {
    position: relative;
    padding-top: 20px;
    white-space: nowrap;
}

.xf3-tables .xf3-tb tbody th,
.xf3-tables .xf3-tb tbody td {
    font-size: 14.5px;
}

.xf3-tables .xf3-tb__rowhead {
    font-weight: 700;
    color: var(--xf3-ink);
    text-align: left;
    background: var(--xf3-primary-tint-8);
    border-right: 1px solid var(--xf3-line);
    white-space: nowrap;
}

.xf3-tables .xf3-tb__bool {
    text-align: center;
    width: 96px;
}

.xf3-tables .xf3-tb__bool .xf3-yes i {
    font-size: 17px;
    vertical-align: middle;
}

.xf3-tables .xf3-tb__bool .xf3-no i {
    font-size: 15px;
    vertical-align: middle;
}

.xf3-tables .xf3-tb tbody td.is-hl,
.xf3-tables .xf3-tb tbody th.is-hl {
    font-weight: 600;
    color: var(--xf3-ink);
}

.xf3-tables .xf3-tb thead th.is-hl {
    color: var(--xf3-primary-hover);
}

.xf3-tables .xf3-tb__ribbon {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--xf3-gradient);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.xf3-tables .xf3-tb__note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.xf3-tables .xf3-tb__note-icon {
    color: var(--xf3-primary);
    font-size: 15px;
    line-height: 1.55;
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Variant: leadtime — emphasize the duration column feel */
.xf3-tables .xf3-tb--leadtime td:nth-child(2) {
    font-family: var(--xf3-font-num);
    font-weight: 700;
    color: var(--xf3-primary);
    white-space: nowrap;
}

/* Variant: freight — method first column a touch wider, costs in num font */
.xf3-tables .xf3-tb--freight td:nth-child(3) {
    font-family: var(--xf3-font-num);
    font-weight: 700;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-tables .xf3-tb--freight .xf3-tb__rowhead {
    white-space: normal;
    min-width: 210px;
}

/* Variant: options — fee column */
.xf3-tables .xf3-tb--options td:nth-child(3) {
    font-weight: 700;
    color: var(--xf3-ink);
    white-space: nowrap;
}

.xf3-tables .xf3-tb--options td:last-child {
    color: var(--xf3-muted);
    white-space: nowrap;
}

/* Variant: moq — MOQ column emphasized */
.xf3-tables .xf3-tb--moq td:nth-child(2) {
    font-family: var(--xf3-font-num);
    font-weight: 700;
    color: var(--xf3-primary);
    white-space: nowrap;
}

/* Variant: skumatrix — SKU mono-ish */
.xf3-tables .xf3-tb--skumatrix .xf3-tb__rowhead {
    font-family: var(--xf3-font-num);
    letter-spacing: .02em;
}

.xf3-tables .xf3-tb--skumatrix td:last-child {
    font-weight: 700;
    white-space: nowrap;
}

/* ================================================================
   Card matrices: capmatrix / solmatrix
   ================================================================ */

.xf3-tables .xf3-tb-cards { gap: 20px; }

.xf3-tables .xf3-tb-card {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 3px solid transparent;
}

.xf3-tables .xf3-tb-card:hover {
    border-top-color: var(--xf3-primary);
}

.xf3-tables .xf3-tb-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.xf3-tables .xf3-tb-card__icon {
    width: 46px;
    height: 46px;
    font-size: 19px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.xf3-tables .xf3-tb-card__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.xf3-tables .xf3-tb-card__chips .xf3-chip {
    padding: 5px 11px;
    font-size: 12px;
}

.xf3-tables .xf3-tb-card__chip-off {
    background: var(--xf3-soft);
    border-color: transparent;
    color: #94a3b8;
}

.xf3-tables .xf3-tb-card__chip-off i { color: #b7c2d3; }

.xf3-tables .xf3-tb-card__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--xf3-ink);
    line-height: 1.35;
}

.xf3-tables .xf3-tb-card__meta {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

/* solmatrix gets a tinted section and industry-style cards */
.xf3-tables--solmatrix {
    background: linear-gradient(180deg, var(--xf3-primary-tint-8) 0%, #ffffff 72%);
}

.xf3-tables .xf3-tb-cards--solmatrix .xf3-tb-card {
    border-top-color: var(--xf3-line);
}

.xf3-tables .xf3-tb-cards--solmatrix .xf3-tb-card__icon {
    background: var(--xf3-primary-tint-7);
    color: var(--xf3-primary-hover);
}

.xf3-tables .xf3-tb-cards--solmatrix .xf3-tb-card:hover .xf3-tb-card__icon {
    background: var(--xf3-primary);
    color: #fff;
}

.xf3-tables .xf3-tb-cards--solmatrix .xf3-tb-card__meta {
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px dashed var(--xf3-line);
    position: relative;
}

.xf3-tables .xf3-tb-cards--solmatrix .xf3-tb-card__meta::before {
    content: "Typical program";
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a99b2;
    margin-bottom: 3px;
}

/* ================================================================
   Incoterms cards
   ================================================================ */

.xf3-tables .xf3-tb-terms { gap: 20px; }

.xf3-tables .xf3-tb-term {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}

.xf3-tables .xf3-tb-term:hover {
    transform: translateY(-5px);
    box-shadow: var(--xf3-shadow-hover);
}

.xf3-tables .xf3-tb-term__head {
    padding: 20px 22px 16px;
    background: var(--xf3-gradient-dark);
    color: #fff;
}

.xf3-tables .xf3-tb-term__code {
    display: block;
    font-family: var(--xf3-font-num);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.1;
}

.xf3-tables .xf3-tb-term__name {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
}

.xf3-tables .xf3-tb-term__place {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xf3-ink-2);
    background: var(--xf3-primary-soft);
    border-bottom: 1px solid var(--xf3-line);
}

.xf3-tables .xf3-tb-term__place i { color: var(--xf3-primary); font-size: 15px; }

.xf3-tables .xf3-tb-term__scope {
    padding: 15px 22px;
    font-size: 13px;
    line-height: 1.6;
}

.xf3-tables .xf3-tb-term__scope h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.xf3-tables .xf3-tb-term__scope p { color: var(--xf3-muted); }

.xf3-tables .xf3-tb-term__scope--sell { border-bottom: 1px solid var(--xf3-line); }

.xf3-tables .xf3-tb-term__scope--sell h4 { color: #0f7a4e; }
.xf3-tables .xf3-tb-term__scope--sell i { color: #16a34a; }

.xf3-tables .xf3-tb-term__scope--buy h4 { color: #b45309; }
.xf3-tables .xf3-tb-term__scope--buy i { color: #d97706; }

.xf3-tables .xf3-tb-term:last-child .xf3-tb-term__scope--buy {
    background: #fffdf5;
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 991.98px) {
    .xf3-tables .xf3-tb-cards--solmatrix { gap: 16px; }
}

@media (max-width: 575.98px) {
    .xf3-tables .xf3-tb {
        min-width: 520px;
        font-size: 13px;
    }

    .xf3-tables .xf3-tb tbody th,
    .xf3-tables .xf3-tb tbody td,
    .xf3-tables .xf3-tb thead th {
        font-size: 12.5px;
        padding: 11px 13px;
    }

    .xf3-tables .xf3-tb__bool { width: 64px; }

    .xf3-tables .xf3-tb-card__top {
        flex-direction: column;
    }

    .xf3-tables .xf3-tb-card__chips {
        justify-content: flex-start;
    }

    .xf3-tables .xf3-tb-term__head { padding: 17px 18px 13px; }
    .xf3-tables .xf3-tb-term__place,
    .xf3-tables .xf3-tb-term__scope { padding-left: 18px; padding-right: 18px; }
}
/*
 * xFactory B3 — tabs family.
 * Variant: vertical — left vertical tab rail + right image/copy panel.
 * The data-xf-tabs / data-xf-tab / data-xf-panel contract is the same one
 * landing.js binds globally; every rule here is scoped under .xf3-tabs.
 */

.xf3-tabs h3 { margin: 0; }
.xf3-tabs p { margin: 0; }
.xf3-tabs ul { margin: 0; }

.xf3-tabs--vertical { background: var(--xf3-soft); }

/* =====================================================================
   layout — vertical rail + panels
   ===================================================================== */

/* component root is .xf3-vtabs inside the section (the <section> shell keeps
   the .xf3-tabs class only for section-level background) */
.xf3-vtabs {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 28px;
    align-items: start;
}

.xf3-tabs__nav {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =====================================================================
   rail buttons
   ===================================================================== */

.xf3-tabs__btn {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px solid var(--xf3-line);
    border-radius: 12px;
    background: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    color: var(--xf3-ink-2);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.xf3-tabs__btn:hover {
    border-color: var(--xf3-primary-tint-3);
    color: var(--xf3-primary);
    transform: translateX(3px);
}

.xf3-tabs__btn:focus-visible {
    outline: 2px solid var(--xf3-primary);
    outline-offset: 2px;
}

.xf3-tabs__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 18px;
    color: var(--xf3-primary);
    background: var(--xf3-primary-soft);
    transition: background .25s ease, color .25s ease;
}

.xf3-tabs__btn-go {
    font-size: 15px;
    color: #c1ccdc;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
}

.xf3-tabs__btn:hover .xf3-tabs__btn-go,
.xf3-tabs__btn.is-active .xf3-tabs__btn-go {
    opacity: 1;
    transform: translateX(0);
}

.xf3-tabs__btn.is-active {
    color: var(--xf3-primary);
    background: #fff;
    border-color: var(--xf3-primary);
    box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), .14);
}

.xf3-tabs__btn.is-active .xf3-tabs__btn-icon {
    color: #fff;
    background: var(--xf3-primary);
}

.xf3-tabs__btn.is-active .xf3-tabs__btn-go { color: var(--xf3-primary); }

/* =====================================================================
   panels
   ===================================================================== */

.xf3-tabs__panel { display: none; }

.xf3-tabs__panel.is-active {
    display: block;
    animation: xf-rise .45s cubic-bezier(.22,.61,.36,1) both;
}

.xf3-tabs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
    align-items: center;
    min-height: 380px;
    padding: 34px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    border-radius: var(--xf3-radius-lg);
    box-shadow: var(--xf3-shadow-sm);
}

.xf3-tabs__media .xf3-media {
    box-shadow: 0 18px 40px rgba(15, 27, 51, .16);
}

.xf3-tabs__title {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--xf3-ink);
}

.xf3-tabs__text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--xf3-muted);
}

.xf3-tabs__list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.xf3-tabs__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--xf3-ink-2);
}

.xf3-tabs__list i {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    color: #fff;
    background: var(--xf3-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xf3-tabs__link {
    margin-top: 24px;
}

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 991.98px) {
    .xf3-vtabs {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .xf3-tabs__nav {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .xf3-tabs__nav::-webkit-scrollbar { display: none; }

    .xf3-tabs__btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 210px;
    }

    .xf3-tabs__btn:hover { transform: none; }

    .xf3-tabs__grid {
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: 0;
        padding: 26px;
    }
}

@media (max-width: 575.98px) {
    .xf3-tabs__btn {
        min-width: 178px;
        min-height: 52px;
        padding: 10px 14px;
        gap: 10px;
        font-size: 13.5px;
    }
    .xf3-tabs__btn-icon { width: 38px; height: 38px; }
    .xf3-tabs__btn-go { display: none; }
    .xf3-tabs__grid { padding: 20px; }
    .xf3-tabs__title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-tabs__panel.is-active { animation: none; }
    .xf3-tabs__btn,
    .xf3-tabs__btn:hover { transform: none; }
}
/*
 * xFactory B3 — timeline family (case, payment).
 * Every rule is scoped under .xf3-timeline.
 */

.xf3-timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============ case: vertical rail with nodes ============ */

.xf3-rail {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding-left: 46px;
}

.xf3-rail::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(var(--xf3-primary) 0%, var(--xf3-primary-tint-4) 100%);
    border-radius: 2px;
}

.xf3-rail__item {
    position: relative;
    padding-bottom: 30px;
}

.xf3-rail__item:last-child { padding-bottom: 0; }

.xf3-rail__node {
    position: absolute;
    left: -46px;
    top: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--xf3-primary);
    color: var(--xf3-primary);
    font-size: 16px;
    box-shadow: 0 0 0 5px #fff, var(--xf3-shadow-sm);
    z-index: 1;
}

.xf3-rail__when,
.xf3-pay__when {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--xf3-primary);
}

.xf3-rail__when i,
.xf3-pay__when i { font-size: 13px; }

.xf3-rail__card {
    margin-top: 9px;
    padding: 22px 24px;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.xf3-rail__card:hover {
    transform: translateX(5px);
    box-shadow: var(--xf3-shadow);
    border-color: var(--xf3-primary-tint-4);
}

.xf3-rail__title {
    margin: 8px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-rail__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--xf3-muted);
}

/* ============ payment: horizontal milestone track ============ */

.xf3-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}

/* connector line behind the nodes */
.xf3-pay::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(16.67% - 8px);
    right: calc(16.67% - 8px);
    height: 2px;
    background: linear-gradient(90deg, var(--xf3-primary) 0%, var(--xf3-primary-tint-2) 50%, var(--xf3-primary) 100%);
    border-radius: 2px;
}

.xf3-pay__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xf3-pay__node {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: var(--xf3-shadow-sm);
    margin-bottom: 18px;
}

.xf3-pay__pct {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xf3-gradient);
    color: #fff;
    font-family: var(--xf3-font-num);
    font-size: 17px;
    font-weight: 800;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--xf3-primary), var(--xf3-shadow-sm);
    font-variant-numeric: tabular-nums;
}

.xf3-pay__badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
    font-size: 20px;
    border: 2px solid var(--xf3-primary-tint-4);
}

.xf3-pay__card {
    width: 100%;
    padding: 24px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xf3-pay__title {
    margin: 10px 0 7px;
    font-size: 16.5px;
    font-weight: 800;
    color: var(--xf3-ink);
}

.xf3-pay__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--xf3-muted);
}

.xf3-pay__chip { margin-top: 16px; }

.xf3-pay__note {
    max-width: 760px;
    margin: 30px auto 0;
    text-align: center;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.xf3-pay__note i {
    color: var(--xf3-primary);
    font-size: 16px;
    margin-top: 3px;
    flex: 0 0 auto;
}

/* ============ responsive ============ */

@media (max-width: 991.98px) {
    .xf3-pay {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 560px;
        padding-left: 56px;
    }

    /* switch to a vertical connector */
    .xf3-pay::before {
        top: 12px;
        bottom: 12px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(var(--xf3-primary) 0%, var(--xf3-primary-tint-2) 100%);
    }

    .xf3-pay__step {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding-bottom: 26px;
    }

    .xf3-pay__step:last-child { padding-bottom: 0; }

    .xf3-pay__node {
        position: absolute;
        left: -56px;
        top: 0;
        margin-bottom: 0;
    }

    .xf3-pay__card {
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .xf3-rail { padding-left: 40px; }
    .xf3-rail::before { left: 15px; }
    .xf3-rail__node {
        left: -40px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .xf3-rail__card { padding: 18px 18px; }
    .xf3-rail__card:hover { transform: none; }

    .xf3-pay { padding-left: 48px; }
    .xf3-pay::before { left: 23px; }
    .xf3-pay__node { left: -48px; }
    .xf3-pay__pct,
    .xf3-pay__badge { width: 48px; height: 48px; font-size: 15px; }
    .xf3-pay__badge i { font-size: 17px; }
    .xf3-pay__card { padding: 18px; }
    .xf3-pay__note { display: block; }
    .xf3-pay__note i { float: left; margin: 3px 8px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .xf3-rail__card { transition: none; }
    .xf3-rail__card:hover { transform: none; }
}
/*
 * xFactory B3 — util family styles.
 * 16 variants: divider, headband, headsplit, prose, buttons, chips,
 * checklist, toc, jumpcards, embed, imageband, pagetitle, labelpill,
 * highlights, tags, azgrid.
 */

/* =========================================================
   1. DIVIDER
   ========================================================= */
.xf3-util--divider .xf3-util__divider {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px 0;
}
.xf3-util--divider .xf3-util__divider.is-left   { justify-content: flex-start; }
.xf3-util--divider .xf3-util__divider.is-center { justify-content: center; }

.xf3-util--divider .xf3-util__divider-line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 40px;
    background: var(--xf3-line);
}
.xf3-util--divider .xf3-util__divider.line-dashed .xf3-util__divider-line {
    background: repeating-linear-gradient(90deg, var(--xf3-line) 0 8px, transparent 8px 14px);
    height: 2px;
}
.xf3-util--divider .xf3-util__divider.line-gradient .xf3-util__divider-line {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--xf3-primary) 50%, transparent 100%);
}
.xf3-util--divider .xf3-util__divider.is-left .xf3-util__divider-line:last-child { flex: 4 1 auto; }

.xf3-util--divider .xf3-util__divider-label {
    flex: 0 0 auto;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-primary-deep);
    background: var(--xf3-primary-soft);
    white-space: nowrap;
}

/* =========================================================
   2. HEADING BAND (tinted)
   ========================================================= */
.xf3-util--headband {
    background: var(--xf3-soft);
}
.xf3-util--headband .xf3-util__band {
    padding: 36px 40px;
    border-radius: var(--xf3-radius-lg);
    background: linear-gradient(135deg, #fff 0%, var(--xf3-primary-tint-7) 100%);
    border: 1px solid var(--xf3-line);
}
.xf3-util--headband .xf-section-head { margin-bottom: 0; }

/* =========================================================
   3. HEADING SPLIT (editorial)
   ========================================================= */
.xf3-util--headsplit .xf3-util__split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: end;
}
.xf3-util--headsplit .xf-eyebrow { margin-bottom: 10px; }
.xf3-util--headsplit .xf-section-head__title { margin: 0; }
.xf3-util--headsplit .xf3-util__split-right p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--xf3-muted);
}

/* =========================================================
   4. PROSE (long-form)
   ========================================================= */
.xf3-util--prose .xf3-util__prose {
    font-size: 16px;
    line-height: 1.85;
    color: var(--xf3-ink-2);
    max-width: 100%;
}
.xf3-util--prose .xf3-util__prose.is-narrow { max-width: 760px; margin: 0 auto; }

.xf3-util--prose .xf3-util__prose h1,
.xf3-util--prose .xf3-util__prose h2,
.xf3-util--prose .xf3-util__prose h3,
.xf3-util--prose .xf3-util__prose h4 {
    color: var(--xf3-ink);
    margin: 1.6em 0 .6em;
    line-height: 1.3;
}
.xf3-util--prose .xf3-util__prose h2 { font-size: 26px; }
.xf3-util--prose .xf3-util__prose h3 { font-size: 21px; }
.xf3-util--prose .xf3-util__prose h4 { font-size: 18px; }

.xf3-util--prose .xf3-util__prose p { margin: 0 0 1.1em; }

.xf3-util--prose .xf3-util__prose ul,
.xf3-util--prose .xf3-util__prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}
.xf3-util--prose .xf3-util__prose li { margin-bottom: .45em; }
.xf3-util--prose .xf3-util__prose ul li::marker { color: var(--xf3-primary); }

.xf3-util--prose .xf3-util__prose a { color: var(--xf3-primary); text-decoration: underline; }
.xf3-util--prose .xf3-util__prose blockquote {
    margin: 1.4em 0;
    padding: 14px 22px;
    border-left: 3px solid var(--xf3-primary);
    background: var(--xf3-soft);
    color: var(--xf3-ink-2);
    border-radius: 0 10px 10px 0;
}
.xf3-util--prose .xf3-util__prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 14.5px;
}
.xf3-util--prose .xf3-util__prose th,
.xf3-util--prose .xf3-util__prose td {
    padding: 12px 14px;
    border: 1px solid var(--xf3-line);
    text-align: left;
}
.xf3-util--prose .xf3-util__prose th { background: var(--xf3-soft); }
.xf3-util--prose .xf3-util__prose img { max-width: 100%; height: auto; border-radius: var(--xf3-radius); }

/* =========================================================
   5. BUTTON ROW
   ========================================================= */
.xf3-util--buttons .xf3-util__buttons { display: flex; }
.xf3-util--buttons .xf3-util__buttons.align-center { justify-content: center; }
.xf3-util--buttons .xf3-util__buttons.align-left   { justify-content: flex-start; }
.xf3-util--buttons .xf3-util__buttons .xf-buttons { margin: 0; }
.xf3-util--buttons .xf3-util__buttons.size-sm .xf-btn { min-height: 44px; padding: 0 22px; font-size: 14px; }
.xf3-util--buttons .xf3-util__buttons.size-lg .xf-btn { min-height: 60px; padding: 0 38px; font-size: 16.5px; }

/* =========================================================
   6. CHIP ROW
   ========================================================= */
.xf3-util--chips .xf3-util__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.xf3-util--chips .xf3-chip {
    transition: transform .25s ease, box-shadow .25s ease;
}
.xf3-util--chips .xf3-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--xf3-shadow-sm);
}
.xf3-util--chips .xf3-chip.tone-soft    { background: var(--xf3-primary-soft); border-color: transparent; color: var(--xf3-primary-deep); }
.xf3-util--chips .xf3-chip.tone-outline { background: #fff; border-color: var(--xf3-line); color: var(--xf3-ink-2); }
.xf3-util--chips .xf3-chip.tone-dark    { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.9); }
.xf3-util--chips .xf3-chip.tone-dark i  { color: var(--xf3-primary-tint); }

/* =========================================================
   7. CHECKLIST GRID
   ========================================================= */
.xf3-util--checklist .xf3-util__checklist {
    display: grid;
    gap: 18px 28px;
}
.xf3-util--checklist .xf3-util__check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--xf3-ink-2);
}
.xf3-util--checklist .xf3-util__check-item .xf3-icon {
    width: 38px; height: 38px; font-size: 16px;
    flex: 0 0 auto;
}

/* =========================================================
   8. TOC
   ========================================================= */
.xf3-util--toc .xf3-util__toc {
    padding: 26px 28px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-soft);
    border: 1px solid var(--xf3-line);
}
.xf3-util--toc .xf3-util__toc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--xf3-ink);
    margin-bottom: 14px;
}
.xf3-util--toc .xf3-util__toc-title i { color: var(--xf3-primary); }
.xf3-util--toc .xf3-util__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 28px;
}
.xf3-util--toc .xf3-util__toc-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--xf3-ink-2);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.xf3-util--toc .xf3-util__toc-list a:hover {
    background: #fff;
    color: var(--xf3-primary);
}
.xf3-util--toc .xf3-util__toc-num {
    font-family: var(--xf3-font-num);
    font-size: 13px;
    font-weight: 800;
    color: var(--xf3-primary);
    flex: 0 0 auto;
}
.xf3-util--toc .xf3-util__toc-label { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; }
.xf3-util--toc .xf3-util__toc-arrow { color: var(--xf3-muted); font-size: 16px; }

/* =========================================================
   9. JUMP CARDS
   ========================================================= */
.xf3-util--jumpcards .xf3-util__jumpcards {
    display: grid;
    gap: 22px;
}
.xf3-util--jumpcards .xf3-util__jumpcard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px;
    text-decoration: none;
    color: inherit;
}
.xf3-util--jumpcards .xf3-util__jumpcard h3 {
    margin: 4px 0 0;
    font-size: 18px;
    color: var(--xf3-ink);
}
.xf3-util--jumpcards .xf3-util__jumpcard p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--xf3-muted);
    flex: 1 1 auto;
}
.xf3-util--jumpcards .xf3-util__jump-more {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--xf3-primary);
}
.xf3-util--jumpcards .xf3-util__jumpcard:hover .xf3-util__jump-more i { transform: translateX(3px); }
.xf3-util--jumpcards .xf3-util__jumpcard .xf3-icon { transition: transform .3s ease; }
.xf3-util--jumpcards .xf3-util__jumpcard:hover .xf3-icon { transform: scale(1.08); }

/* =========================================================
   10. EMBED
   ========================================================= */
.xf3-util--embed .xf3-util__embed {
    position: relative;
    width: 100%;
    min-height: var(--xf3-embed-h, 480px);
    padding: 0;
    border-radius: var(--xf3-radius);
    overflow: hidden;
    background: var(--xf3-soft-2);
    border: 1px solid var(--xf3-line);
}
.xf3-util--embed .xf3-util__embed > iframe,
.xf3-util--embed .xf3-util__embed > video {
    width: 100% !important;
    height: var(--xf3-embed-h, 480px) !important;
    border: 0;
    display: block;
}
.xf3-util--embed .xf3-util__embed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    min-height: var(--xf3-embed-h, 480px);
    text-align: center;
    color: var(--xf3-muted);
}
.xf3-util--embed .xf3-util__embed-empty i { font-size: 40px; color: var(--xf3-primary); }

/* =========================================================
   11. IMAGE BAND (full-bleed)
   ========================================================= */
.xf3-util--imageband.xf3-util--edge {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.xf3-util--imageband .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
.xf3-util--imageband .xf3-util__imageband {
    margin: 0;
    position: relative;
    width: 100%;
}
.xf3-util--imageband .xf3-util__imageband img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.xf3-util--imageband .xf3-util__imageband figcaption {
    margin-top: 14px;
    padding: 0 24px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--xf3-muted);
    text-align: center;
}
@media (min-width: 992px) {
    .xf3-util--imageband.has-parallax .xf3-util__imageband img {
        transform: scale(1.05);
        transition: transform .8s ease;
    }
}

/* =========================================================
   12. PAGE TITLE
   ========================================================= */
.xf3-util--pagetitle { padding-top: 44px; padding-bottom: 44px; }
.xf3-util--pagetitle.xf3-primary-bg { background: var(--xf3-gradient); }
.xf3-util--pagetitle.xf3-dark { background: var(--xf3-gradient-dark); }
.xf3-util--pagetitle .xf3-util__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 13.5px;
}
.xf3-util--pagetitle .xf3-util__crumbs a { color: var(--xf3-primary); text-decoration: none; }
.xf3-util--pagetitle .xf3-util__crumbs a:hover { text-decoration: underline; }
.xf3-util--pagetitle.xf3-dark .xf3-util__crumbs a,
.xf3-util--pagetitle.xf3-primary-bg .xf3-util__crumbs a { color: var(--xf3-primary-tint-3); }
.xf3-util--pagetitle .xf3-util__crumbs span { color: var(--xf3-muted); }
.xf3-util--pagetitle.xf3-dark .xf3-util__crumbs span,
.xf3-util--pagetitle.xf3-primary-bg .xf3-util__crumbs span { color: rgba(255,255,255,.75); }
.xf3-util--pagetitle .xf3-util__crumb-sep { font-size: 12px; color: var(--xf3-muted); }
.xf3-util--pagetitle.xf3-dark .xf3-util__crumb-sep,
.xf3-util--pagetitle.xf3-primary-bg .xf3-util__crumb-sep { color: rgba(255,255,255,.5); }
.xf3-util--pagetitle .xf-eyebrow { margin-bottom: 10px; }
.xf3-util--pagetitle .xf3-util__pagetitle {
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    color: var(--xf3-ink);
    font-weight: 800;
}
.xf3-util--pagetitle.xf3-dark .xf3-util__pagetitle,
.xf3-util--pagetitle.xf3-primary-bg .xf3-util__pagetitle { color: #fff; }
.xf3-util--pagetitle .xf3-util__pagetitle-sub {
    margin: 16px 0 0;
    max-width: 680px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--xf3-muted);
}
.xf3-util--pagetitle.xf3-dark .xf3-util__pagetitle-sub,
.xf3-util--pagetitle.xf3-primary-bg .xf3-util__pagetitle-sub { color: rgba(255,255,255,.8); }

/* =========================================================
   13. LABEL PILL (kicker)
   ========================================================= */
.xf3-util--labelpill .xf3-util__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.xf3-util--labelpill .xf3-util__pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
    font-size: 14px;
}
.xf3-util--labelpill .xf3-util__pill-text {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--xf3-ink);
    white-space: nowrap;
}
.xf3-util--labelpill .xf3-util__pill-line {
    display: inline-block;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--xf3-primary) 0%, transparent 100%);
    border-radius: 2px;
}

/* =========================================================
   14. HIGHLIGHTS (numbers row)
   ========================================================= */
.xf3-util--highlights .xf3-util__highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px;
    border-radius: var(--xf3-radius-lg);
    background: var(--xf3-soft);
    border: 1px solid var(--xf3-line);
}
.xf3-util--highlights.tone-dark .xf3-util__highlights {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
}
.xf3-util--highlights .xf3-util__hl { text-align: center; }
.xf3-util--highlights .xf3-util__hl-num {
    font-family: var(--xf3-font-num);
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--xf3-primary);
}
.xf3-util--highlights.tone-dark .xf3-util__hl-num { color: var(--xf3-primary-tint); }
.xf3-util--highlights .xf3-util__hl-label {
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--xf3-muted);
}
.xf3-util--highlights.tone-dark .xf3-util__hl-label { color: rgba(255,255,255,.7); }

/* =========================================================
   15. TAG CLOUD
   ========================================================= */
.xf3-util--tags .xf3-util__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.xf3-util--tags .xf3-util__tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--xf3-line);
    color: var(--xf3-ink-2);
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.xf3-util--tags .xf3-util__tag.size-sm { font-size: 13px; padding: 5px 13px; }
.xf3-util--tags .xf3-util__tag.size-md { font-size: 14.5px; }
.xf3-util--tags .xf3-util__tag.size-lg { font-size: 16.5px; padding: 9px 19px; background: var(--xf3-primary-soft); color: var(--xf3-primary-deep); border-color: transparent; }
.xf3-util--tags .xf3-util__tag.size-xl { font-size: 19px; padding: 11px 22px; background: var(--xf3-primary); color: #fff; border-color: transparent; }
.xf3-util--tags .xf3-util__tag:hover {
    transform: translateY(-2px);
    background: var(--xf3-primary);
    color: #fff;
    border-color: transparent;
}

/* =========================================================
   16. INDUSTRY A-Z GRID
   ========================================================= */
.xf3-util--azgrid .xf3-util__az {
    display: grid;
    gap: 14px;
}
.xf3-util--azgrid .xf3-util__az-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--xf3-radius);
    background: #fff;
    border: 1px solid var(--xf3-line);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.xf3-util--azgrid .xf3-util__az-item:hover {
    transform: translateY(-3px);
    border-color: var(--xf3-primary-tint-4);
    box-shadow: var(--xf3-shadow-sm);
}
.xf3-util--azgrid .xf3-util__az-letter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--xf3-primary-soft);
    color: var(--xf3-primary);
    font-family: var(--xf3-font-num);
    font-weight: 800;
    font-size: 17px;
}
.xf3-util--azgrid .xf3-util__az-title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: var(--xf3-ink);
}
.xf3-util--azgrid .xf3-util__az-arrow {
    color: var(--xf3-muted);
    font-size: 16px;
    transition: transform .2s ease, color .2s ease;
}
.xf3-util--azgrid .xf3-util__az-item:hover .xf3-util__az-arrow {
    transform: translateX(3px);
    color: var(--xf3-primary);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px) {
    .xf3-util--headsplit .xf3-util__split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
    .xf3-util--highlights .xf3-util__highlights { grid-template-columns: repeat(2, 1fr); padding: 24px; }
    .xf3-util--toc .xf3-util__toc-list { grid-template-columns: 1fr; }
    .xf3-util--headband .xf3-util__band { padding: 28px 22px; }
}
@media (max-width: 575.98px) {
    .xf3-util--pagetitle { padding-top: 32px; padding-bottom: 32px; }
    .xf3-util--pagetitle .xf3-util__crumbs { font-size: 12.5px; }
    .xf3-util--highlights .xf3-util__highlights { grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 16px; }
    .xf3-util--toc .xf3-util__toc { padding: 18px; }
    .xf3-util--toc .xf3-util__toc-list { grid-template-columns: 1fr; gap: 4px; }
    .xf3-util--imageband .xf3-util__imageband figcaption { padding: 0 12px; font-size: 12.5px; }
    .xf3-util--tags .xf3-util__tag.size-xl { font-size: 17px; padding: 9px 18px; }
    .xf3-util--tags .xf3-util__tag.size-lg { font-size: 15px; padding: 7px 16px; }
    .xf3-util--chips .xf3-util__chips { justify-content: flex-start; }
    .xf3-util--labelpill .xf3-util__pill-line { display: none; }
}

/* Prevent long words from overflowing on 390px screens */
.xf3-util--tags .xf3-util__tag,
.xf3-util--chips .xf3-chip,
.xf3-util--azgrid .xf3-util__az-title,
.xf3-util--pagetitle .xf3-util__pagetitle {
    overflow-wrap: anywhere;
    word-break: break-word;
}