/* Circular arrow button for cards — fill grows from the centre on
   hover. Port of the design system's .exc-arrow (site/ui.jsx). */

.arrow-e2263c7 {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    border: 1.5px solid var(--color-border-strong);
    background: transparent;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    transition: border-color 360ms ease;

    &.sm-e2263c7 {
        width: 46px;
        height: 46px;
    }

    & svg {
        position: relative;
        z-index: 2;
        color: var(--color-text);
        transition:
            color 420ms ease,
            transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    & .fill-e2263c7 {
        position: absolute;
        /* slightly oversized so the fill covers the border ring when scaled in */
        inset: -2px;
        z-index: 1;
        border-radius: 50%;
        background: var(--color-text);
        transform: scale(0);
        transition: transform 520ms cubic-bezier(0.76, 0, 0.24, 1);
    }

    &:hover {
        border-color: var(--color-text);
    }
    &:hover svg {
        color: #fff;
        transform: translate(2px, -2px);
    }
    &:hover .fill-e2263c7 {
        transform: scale(1);
    }
    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px var(--color-focus-ring);
    }

    /* pre-filled variant (featured cards) */
    &.filled-e2263c7 {
        border-color: var(--color-text);

        & svg {
            color: #fff;
        }

        & .fill-e2263c7 {
            transform: scale(1);
        }

        &:hover svg {
            transform: translate(2px, -2px);
        }
    }
}


.card-58e7956 {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 22px;
}

.heading-58e7956 {
    font-family: var(--font-title);
    font-size: 19px;
    margin: 0 0 14px;
    color: var(--color-brand);
}

.searchWrap-58e7956 {
    position: relative;
    margin-top: 12px;
}

.search-58e7956 {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 12px;
    border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    background: #fff;
    color: var(--color-text);
    font-size: 13.5px;
    box-sizing: border-box;
}

.clear-58e7956 {
    position: absolute;
    right: 8px;
    top: 9px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
}

.matchCount-58e7956 {
    font-size: 11px;
    color: var(--color-text-subtle);
    margin-top: 10px;
}

.list-58e7956 {
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.item-58e7956 {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    background: none;
    border: none;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
}

.item-58e7956:hover {
    background: var(--color-surface-2);
}

.badge-58e7956 {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.badgeProp-58e7956 {
    background: rgba(44, 104, 176, 0.12);
    color: #2c68b0;
}

.badgeMedia-58e7956 {
    background: rgba(237, 127, 60, 0.14);
    color: #ed7f3c;
}

.info-58e7956 {
    flex: 1;
    min-width: 0;
}

.name-58e7956 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-58e7956 {
    font-size: 11px;
    color: var(--color-text-muted);
}

.plus-58e7956 {
    font-size: 18px;
    color: var(--site-orange-600);
    flex-shrink: 0;
}

.empty-58e7956 {
    font-size: 12.5px;
    color: var(--color-text-subtle);
    padding: 12px 0;
}


.row-1af7009 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--color-border);
}

.badge-1af7009 {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.badgeProp-1af7009 {
    background: rgba(44, 104, 176, 0.12);
    color: #2c68b0;
}

.badgeMedia-1af7009 {
    background: rgba(237, 127, 60, 0.14);
    color: #ed7f3c;
}

.info-1af7009 {
    flex: 1;
    min-width: 0;
}

.name-1af7009 {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-1af7009 {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weight-1af7009 {
    display: flex;
    align-items: center;
    gap: 4px;
}

.weightInput-1af7009 {
    width: 64px;
    height: 34px;
    text-align: right;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    background: #fff;
    color: var(--color-text);
    font-size: 14px;
    appearance: textfield;
}

.weightInput-1af7009::-webkit-outer-spin-button,
.weightInput-1af7009::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.pctSign-1af7009 {
    font-size: 12px;
    color: var(--color-text-muted);
}

.remove-1af7009 {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    color: var(--color-text-muted);
    flex-shrink: 0;
    line-height: 1;
}


.card-5d5286c {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 22px 24px 24px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.04);
}

.title-5d5286c {
    font-family: var(--font-title);
    font-size: 21px;
    margin: 0 0 3px;
    color: var(--color-brand);
    letter-spacing: 0.01em;
}

.sub-5d5286c {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 640px;
}

.body-5d5286c {
    margin-top: 2px;
}


.card-cc43a5e {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 22px 24px 24px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.04);
}

.head-cc43a5e {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.headText-cc43a5e {
    min-width: 240px;
}

.title-cc43a5e {
    font-family: var(--font-title);
    font-size: 21px;
    margin: 0 0 3px;
    color: var(--color-brand);
    letter-spacing: 0.01em;
}

.sub-cc43a5e {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 560px;
}

.headValue-cc43a5e {
    text-align: right;
    flex-shrink: 0;
}

.valueLabel-cc43a5e {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.valueBig-cc43a5e {
    font-size: 19px;
    font-weight: 700;
    color: var(--site-orange-600);
}

.toggle-cc43a5e {
    max-width: 320px;
    margin: 12px 0 14px;
}

.legend-cc43a5e {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
}

.legendRow-cc43a5e {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-text);
}

.legendName-cc43a5e {
    color: var(--color-text);
}

.legendPct-cc43a5e {
    font-size: 11px;
    color: var(--color-text-muted);
}


.wrap-20f220a {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.matrixCol-20f220a {
    overflow-x: auto;
}

.returnsCol-20f220a {
    flex: 1 1 320px;
    min-width: 280px;
}

.eyebrow-20f220a {
    font-size: 11px;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.table-20f220a {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.headRow-20f220a th {
    color: var(--color-text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 8px;
}

.th-20f220a {
    text-align: right;
}

.thLeft-20f220a {
    text-align: left;
}

.tr-20f220a {
    border-top: 1px solid var(--color-border);
}

.assetCell-20f220a {
    padding: 8px 0;
}

.token-20f220a {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--color-brand);
}

.sub-20f220a {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
}

.num-20f220a {
    text-align: right;
    color: var(--color-text);
}

.numUp-20f220a {
    text-align: right;
    color: #11a86b;
}

.numMuted-20f220a {
    text-align: right;
    color: var(--color-text-muted);
}


.page-8e450e2 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--site-cream);
    color: var(--color-text);

    --font-mono: "Poppins", ui-monospace, monospace;
}

.hero-8e450e2 {
    background: var(--site-cream);
    border-bottom: 1px solid rgba(1, 31, 69, 0.06);
}

.heroInner-8e450e2 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 54px 28px 40px;
}

.eyebrow-8e450e2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-orange-600);
}

.title-8e450e2 {
    font-family: var(--font-title);
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.01em;
    color: var(--color-brand);
    margin: 14px 0 0;
    max-width: 760px;
}

.lede-8e450e2 {
    max-width: 620px;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.grid-8e450e2 {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    padding: 32px 28px 80px;
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    box-sizing: border-box;
}

.builder-8e450e2 {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.results-8e450e2 {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pairGrid-8e450e2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 22px;
}

.tripleGrid-8e450e2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.disclosures-8e450e2 {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 4px 24px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.04);
}

.disclosuresSummary-8e450e2 {
    list-style: none;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--font-title);
    font-size: 19px;
    color: var(--color-brand);
}

.disclosuresBody-8e450e2 {
    padding-bottom: 22px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 880px;
}

.disclosure-8e450e2 {
    margin: 0;
}

@media (max-width: 920px) {
    .grid-8e450e2 {
        grid-template-columns: 1fr;
    }

    .builder-8e450e2 {
        position: static;
    }
}


.picker-4a43aff {
    animation: xl-fadeIn 0.5s ease both;

    & .checkWrap-4a43aff {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;

        & .check-4a43aff {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 1px solid rgba(94, 211, 141, 0.3);
            background: rgba(94, 211, 141, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--good);
            font-size: 24px;
        }
    }

    & .title-4a43aff {
        font-family: var(--serif);
        font-size: 28px;
        font-weight: 500;
        margin: 0 0 10px;
        text-align: center;
        letter-spacing: -0.01em;
        color: var(--text);
    }

    & .lead-4a43aff {
        color: var(--text-dim);
        text-align: center;
        margin: 0 0 28px;
        font-size: 14px;
        font-weight: 300;
    }

    & .list-4a43aff {
        display: flex;
        flex-direction: column;
        gap: 10px;

        & .row-4a43aff {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 18px;
            border: 1px solid var(--border-2);
            background: var(--bg);
            border-radius: 2px;
            transition: all 0.2s;
            color: var(--text);

            &:hover.rowNavy-4a43aff {
                border-color: var(--blue-deep);
            }

            &:hover.rowGold-4a43aff {
                border-color: var(--gold);
            }

            &:hover.rowBlue-4a43aff {
                border-color: var(--blue);
            }

            &.rowActive-4a43aff.rowGold-4a43aff {
                border-color: var(--gold);
                box-shadow: 0 0 0 1px var(--gold);
            }

            &.rowActive-4a43aff.rowBlue-4a43aff {
                border-color: var(--blue);
                box-shadow: 0 0 0 1px var(--blue);
            }

            &.rowDisabled-4a43aff {
                cursor: not-allowed;
                opacity: 0.55;
            }

            & .rowMain-4a43aff {
                display: flex;
                align-items: center;
                gap: 14px;

                & .dot-4a43aff {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;

                    &.dotNavy-4a43aff {
                        background: var(--blue-deep);
                    }

                    &.dotGold-4a43aff {
                        background: var(--gold);
                    }

                    &.dotBlue-4a43aff {
                        background: var(--blue);
                    }

                    &.dotCopper-4a43aff {
                        background: var(--copper);
                    }
                }

                & .rowName-4a43aff {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--text);
                }

                & .rowSub-4a43aff {
                    font-size: 11px;
                    color: var(--text-mute);
                    letter-spacing: 0.05em;
                }
            }

            & .rowArrow-4a43aff {
                color: var(--text-dim);
                font-size: 16px;
            }

            & .rowBadge-4a43aff {
                color: var(--text-dim);
                font-size: 11px;
                letter-spacing: 0.05em;
            }
        }
    }
}


.bar-1449fb8 {
    background: var(--site-cream-2);
    border-top: 1px solid rgba(1, 31, 69, 0.08);

    & .inner-1449fb8 {
        max-width: 1320px;
        margin: 0 auto;
        padding: 28px;
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        & .text-1449fb8 {
            margin: 0;
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--color-text-muted);
            max-width: 780px;

            & .textStrong-1449fb8 {
                color: var(--color-brand);
                font-weight: 600;
            }
        }
    }

    & .backdrop-1449fb8 {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: rgba(0, 19, 44, 0.55);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;

        & .modal-1449fb8 {
            background: var(--color-surface);
            border-radius: var(--radius-xl);
            max-width: 680px;
            width: 100%;
            max-height: 82vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xl);

            & .modalHead-1449fb8 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 26px;
                border-bottom: 1px solid var(--color-border);

                & .modalTitle-1449fb8 {
                    font-size: 20px;
                    margin: 0;
                    color: var(--color-brand);
                }

                & .closeBtn-1449fb8 {
                    width: 34px;
                    height: 34px;
                    border-radius: var(--radius-sm);
                    border: 1px solid var(--color-border);
                    background: var(--color-surface);
                    cursor: pointer;
                    font-size: 18px;
                    color: var(--color-text-muted);
                }
            }

            & .modalBody-1449fb8 {
                padding: 22px 26px;
                overflow: auto;

                & .paragraph-1449fb8 {
                    margin: 0 0 14px;
                    font-size: 14px;
                    line-height: 1.65;
                    color: var(--color-text-muted);
                }
            }

            & .modalFoot-1449fb8 {
                padding: 16px 26px;
                border-top: 1px solid var(--color-border);
                display: flex;
                justify-content: flex-end;
            }
        }
    }
}

.readBtn-1449fb8 {
    white-space: nowrap;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-brand);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-brand);
    transition: background var(--duration-fast);

    &:hover {
        background: rgba(1, 31, 69, 0.06);
    }
}

@media (max-width: 560px) {
    .inner-1449fb8 {
        padding: 22px 22px;
    }
}


.donut-bc29075 {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.legend-bc29075 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 110px;
    flex: 1;
}

.row-bc29075 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.label-bc29075 {
    flex: 1;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pct-bc29075 {
    font-size: 11px;
    color: var(--color-text-muted);
}


.backdrop-67aff92 {
    --surface: #ffffff;
    --bg: #f7f8fb;
    --surface-3: #eaeef4;
    --text: #011f45;
    --text-dim: #4a5a76;
    --text-mute: #8a96aa;
    --border: #e4e8ef;
    --border-2: #cbd2dd;
    --border-3: #a8b2c2;
    --serif: "Playfair Display", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(1, 31, 69, 0.18);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: xl-fadeIn 0.5s ease both;

    & .card-67aff92 {
        width: 100%;
        max-width: 480px;
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: 18px;
        padding: 48px 44px;
        position: relative;
        animation: xl-fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;

        & .closeBtn-67aff92 {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 28px;
            height: 28px;
            background: transparent;
            border: none;
            color: var(--text-mute);
            font-size: 20px;
            cursor: pointer;
        }

        & .wordmarkWrap-67aff92 {
            display: flex;
            justify-content: center;
            margin-bottom: 28px;
        }

        & .title-67aff92 {
            font-family: var(--serif);
            font-size: 30px;
            font-weight: 500;
            margin: 0 0 10px;
            text-align: center;
            letter-spacing: -0.01em;
            color: var(--text);
        }

        & .lead-67aff92 {
            color: var(--text-dim);
            text-align: center;
            margin: 0 0 32px;
            font-size: 14px;
            font-weight: 300;
        }

        & .form-67aff92 {
            display: flex;
            flex-direction: column;
            gap: 16px;

            & .field-67aff92 {
                display: block;
            }

            & .fieldLabel-67aff92 {
                font-size: 10px;
                letter-spacing: 0.22em;
                text-transform: uppercase;
                color: var(--text-mute);
                margin-bottom: 8px;
            }

            & .input-67aff92 {
                width: 100%;
                background: var(--bg);
                border: 1px solid var(--border-2);
                border-radius: 10px;
                padding: 14px 16px;
                font-size: 14px;
                color: var(--text);
                font-family: var(--sans);
                outline: none;
                transition: border-color 0.2s;

                &:focus {
                    border-color: var(--text-dim);
                }

                &.inputMono-67aff92 {
                    font-family: var(--mono);
                    letter-spacing: 0.05em;
                }
            }

            & .error-67aff92 {
                font-size: 12px;
                color: #ef6a5a;
                padding: 10px 12px;
                background: rgba(239, 106, 90, 0.06);
                border: 1px solid rgba(239, 106, 90, 0.3);
                border-radius: 2px;
                animation: xl-fadeIn 0.5s ease both;
            }
        }

        & .submitBtn-67aff92 {
            margin-top: 12px;
            background: linear-gradient(180deg, #f4a45c 0%, #ed8c43 100%);
            color: #ffffff;
            border: none;
            padding: 15px 24px;
            font-size: 15px;
            font-weight: 600;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            font-family: inherit;
            transition: filter 0.2s;

            &:hover {
                filter: brightness(1.04);
            }

            &.submitBtnLoading-67aff92 {
                background: var(--surface-3);
                color: var(--text-dim);
                cursor: wait;
            }

            & .spinner-67aff92 {
                width: 14px;
                height: 14px;
                border: 2px solid var(--border-2);
                border-top-color: var(--text-dim);
                border-radius: 50%;
                animation: xl-spin 0.8s linear infinite;
            }
        }

        & .requestRow-67aff92 {
            margin-top: 20px;
            padding-top: 20px;
            /* border-top: 1px solid var(--border); */
            text-align: center;

            & .requestLink-67aff92 {
                font-size: 12px;
                color: var(--text);
                border-bottom: 1px solid var(--border-3);
                padding-bottom: 2px;
                cursor: pointer;
            }
        }

        & .brandRow-67aff92 {
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;

            & .brandImg-67aff92 {
                height: 56px;
                opacity: 0.9;
            }
        }
    }
}


.card-8ebf3f4 {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: 0 1px 2px rgba(1, 31, 69, 0.04);

    &:hover {
        transform: translateY(-4px);
        border-color: var(--border-2);
    }

    & .accent-8ebf3f4 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        opacity: 0.35;
        transition: opacity 0.5s;
        z-index: 5;
    }

    &:hover .accent-8ebf3f4 {
        opacity: 1;
    }

    & .visual-8ebf3f4 {
        position: relative;
        height: 380px;
        overflow: hidden;

        & .vignette-8ebf3f4 {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(7, 9, 15, 0.45) 0%,
                transparent 30%,
                transparent 60%,
                rgba(7, 9, 15, 0.85) 100%
            );
            pointer-events: none;
            z-index: 3;
        }

        & .topMeta-8ebf3f4 {
            position: absolute;
            top: 22px;
            left: 24px;
            right: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 4;

            & .position-8ebf3f4 {
                font-family: var(--mono);
                font-size: 10px;
                color: rgba(255, 255, 255, 0.5);
                letter-spacing: 0.3em;
            }

            & .statusLive-8ebf3f4,
            & .statusDeferred-8ebf3f4 {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 9px;
                letter-spacing: 0.28em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.7);
                padding: 5px 11px;
                border-radius: 999px;
                background: rgba(7, 9, 15, 0.5);
                border: 1px solid rgba(255, 255, 255, 0.12);
                backdrop-filter: blur(6px);
            }

            & .statusDot-8ebf3f4 {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                animation: xl-shimmer 2.4s infinite;

                &.dotGold-8ebf3f4 {
                    background: var(--good);
                    box-shadow: 0 0 8px var(--good);
                }

                &.dotBlue-8ebf3f4 {
                    background: var(--good);
                    box-shadow: 0 0 8px var(--good);
                }

                &.dotCopper-8ebf3f4 {
                    background: var(--copper);
                    box-shadow: 0 0 8px var(--copper);
                }
            }
        }

        & .watermark-8ebf3f4 {
            position: absolute;
            top: 36px;
            right: 28px;
            font-family: var(--serif);
            font-style: italic;
            font-size: 180px;
            font-weight: 400;
            line-height: 0.8;
            letter-spacing: -0.04em;
            pointer-events: none;
            transition:
                transform 0.8s,
                color 0.5s;
            color: rgba(255, 255, 255, 0.025);
            z-index: 2;
        }

        & .tagWrap-8ebf3f4 {
            position: absolute;
            left: 28px;
            bottom: 24px;
            z-index: 4;

            & .tag-8ebf3f4 {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-size: 10px;
                letter-spacing: 0.32em;
                text-transform: uppercase;
                font-weight: 500;

                &.tagGold-8ebf3f4 {
                    color: var(--gold);
                }

                &.tagBlue-8ebf3f4 {
                    color: var(--blue);
                }

                &.tagCopper-8ebf3f4 {
                    color: var(--copper);
                }
            }
        }
    }

    &:hover .watermark-8ebf3f4 {
        transform: translateY(-8px);
    }

    & .content-8ebf3f4 {
        padding: 32px 28px 32px;
        position: relative;

        & .titles-8ebf3f4 {
            display: flex;
            flex-direction: column;
            margin: 0 0 22px;

            & .titleA-8ebf3f4 {
                font-family: var(--serif);
                font-size: 26px;
                font-weight: 400;
                margin: 0;
                letter-spacing: -0.018em;
                line-height: 1.15;
                color: var(--text);
            }

            & .titleB-8ebf3f4 {
                font-family: var(--serif);
                font-style: italic;
                font-size: 26px;
                font-weight: 400;
                margin: 2px 0 0;
                letter-spacing: -0.018em;
                line-height: 1.15;
            }
        }

        & .desc-8ebf3f4 {
            color: var(--text-dim);
            margin: 0 0 32px;
            font-size: 14.5px;
            font-weight: 300;
            line-height: 1.65;
            min-height: 72px;
        }

        & .specs-8ebf3f4 {
            margin-bottom: 32px;
            display: flex;
            flex-direction: column;

            & .specRow-8ebf3f4 {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                padding: 14px 0;
                border-top: 1px solid var(--border);

                &.specRowLast-8ebf3f4 {
                    border-bottom: 1px solid var(--border);
                }

                & .specLabel-8ebf3f4 {
                    font-size: 10.5px;
                    letter-spacing: 0.22em;
                    text-transform: uppercase;
                    color: var(--text-mute);
                    font-weight: 500;
                }

                & .specValueMono-8ebf3f4 {
                    font-family: var(--mono);
                    font-size: 13px;
                    font-weight: 500;
                    color: var(--text);
                    letter-spacing: 0.05em;
                }

                & .specValueSerif-8ebf3f4 {
                    font-family: var(--serif);
                    font-size: 18px;
                    font-weight: 500;
                    color: var(--text);
                    letter-spacing: -0.01em;
                }
            }
        }

        & .cta-8ebf3f4 {
            position: relative;
            width: 100%;
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border-2);
            padding: 16px 18px;
            font-size: 11px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            font-weight: 500;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.35s;
            overflow: hidden;
            font-family: inherit;
            cursor: pointer;

            &:hover.accentGold-8ebf3f4 {
                border-color: var(--gold);
                color: var(--gold);
            }

            &:hover.accentBlue-8ebf3f4 {
                border-color: var(--blue);
                color: var(--blue);
            }

            &:hover.accentCopper-8ebf3f4 {
                border-color: var(--copper);
                color: var(--copper);
            }

            &.ctaDisabled-8ebf3f4,
            &.ctaDisabled-8ebf3f4:hover {
                opacity: 0.55;
                cursor: not-allowed;
                color: var(--text);
                border-color: var(--border-2);
            }

            & .ctaArrow-8ebf3f4 {
                font-size: 14px;
                transition: transform 0.35s;
                display: inline-flex;
                align-items: center;
                gap: 8px;

                & .ctaArrowLine-8ebf3f4 {
                    width: 24px;
                    height: 1px;
                    background: currentColor;
                    opacity: 0.7;
                    transition: width 0.35s;
                }
            }
        }
    }

    &:hover .ctaArrow-8ebf3f4 {
        transform: translateX(6px);
    }
}

.accentGold-8ebf3f4 {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.accentBlue-8ebf3f4 {
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.accentCopper-8ebf3f4 {
    background: linear-gradient(90deg, transparent, var(--copper), transparent);
}

.card-8ebf3f4:hover.accentGold-8ebf3f4,
.card-8ebf3f4:hover {
    /* shadow handled separately per tone via :hover override */
}

.card-8ebf3f4:hover .accentGold-8ebf3f4 {
    box-shadow: 0 40px 80px -30px rgba(217, 165, 79, 0.4);
}

.tagRule-8ebf3f4 {
    width: 18px;
    height: 1px;
    display: inline-block;

    &.ruleGold-8ebf3f4 {
        background: var(--gold);
    }

    &.ruleBlue-8ebf3f4 {
        background: var(--blue);
    }

    &.ruleCopper-8ebf3f4 {
        background: var(--copper);
    }
}

.titleGold-8ebf3f4 {
    color: var(--gold);
}

.titleBlue-8ebf3f4 {
    color: var(--blue);
}

.titleCopper-8ebf3f4 {
    color: var(--copper);
}


.footer-bd9eeb1 {
    background: var(
        --site-charcoal-grad,
        linear-gradient(135deg, #0a0a0c 0%, #2b2e33 60%, #4a4f57 100%)
    );
    color: rgba(255, 255, 255, 0.6);

    & a {
        text-decoration: none;
    }

    & .inner-bd9eeb1 {
        max-width: 1440px;
        margin: 0 auto;
        padding: 56px 56px 40px;

        & .top-bd9eeb1 {
            gap: 40px;

            & .brand-bd9eeb1 {
                max-width: 320px;

                & .wordmark-bd9eeb1 {
                    height: 22px;
                    display: block;
                }

                & .blurb-bd9eeb1 {
                    font-size: 14px;
                    line-height: 1.6;
                    margin: 16px 0 0;
                }

                & .socials-bd9eeb1 {
                    gap: 10px;
                    margin-top: 20px;

                    & .socialLink-bd9eeb1 {
                        width: 38px;
                        height: 38px;
                        border-radius: var(--radius-sm, 6px);
                        border: 1px solid rgba(255, 255, 255, 0.14);
                        display: grid;
                        place-items: center;
                        color: rgba(255, 255, 255, 0.75);
                        transition:
                            color 140ms ease,
                            border-color 140ms ease;

                        &:hover {
                            color: var(--site-orange, #fea86b);
                            border-color: var(--site-orange, #fea86b);
                        }
                    }
                }
            }

            & .cols-bd9eeb1 {
                gap: 64px;

                & .colTitle-bd9eeb1 {
                    color: #fff;
                    font-family: var(
                        --font-display,
                        "Poppins",
                        system-ui,
                        sans-serif
                    );
                    font-size: 12px;
                    font-weight: 600;
                    letter-spacing: 0.08em;
                    text-transform: uppercase;
                    margin-bottom: 14px;
                }

                & .colItem-bd9eeb1 {
                    font-size: 14px;
                    padding: 6px 0;
                }
            }
        }

        & .bottom-bd9eeb1 {
            gap: 20px;
            margin-top: 44px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);

            & .bottomBrand-bd9eeb1 {
                gap: 12px;

                & .mark-bd9eeb1 {
                    height: 28px;
                }

                & .copyright-bd9eeb1 {
                    font-size: 13px;
                }
            }

            & .bottomLinks-bd9eeb1 {
                gap: 22px;
                font-size: 13px;
            }
        }
    }
}

.colLink-bd9eeb1 {
    color: rgba(255, 255, 255, 0.6);

    &:hover {
        color: var(--site-orange, #fea86b);
    }
}

@media (max-width: 560px) {
    .inner-bd9eeb1 {
        padding: 44px 22px 32px;
    }

    .cols-bd9eeb1 {
        gap: 36px;
    }
}


/* Shared floating frosted-pill top nav, reused on every exchange page. The
   header stays transparent; the pill densifies slightly once the page scrolls
   (.scrolled). Colours are hardcoded (not theme variables) so the pill reads
   the same over the light marketplace pages and the dark property-detail page. */

.header-d486867 {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 16px 24px;
    transition: padding 240ms ease;

    &.scrolled-d486867 {
        padding-top: 10px;
    }

    & .inner-d486867 {
        max-width: 1320px;
        margin: 0 auto;
        height: 66px;
        display: flex;
        align-items: center;
        padding: 0 14px 0 26px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.75);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.55) inset,
            0 8px 26px -16px rgba(1, 31, 69, 0.22);
        transition:
            height 240ms ease,
            background 240ms ease,
            box-shadow 240ms ease;

        & .logoLink-d486867 {
            display: flex;
            align-items: center;
            /* lift the logo above the menu-text centreline */
            transform: translateY(-5px);

            & .logo-d486867 {
                height: 30px;
                display: block;
            }
        }

        & .links-d486867 {
            display: flex;
            align-items: center;
            gap: 22px;
            margin-left: 22px;
            flex: 1;

            & .link-d486867 {
                font-family:
                    "Poppins",
                    system-ui,
                    -apple-system,
                    sans-serif;
                font-size: 14.5px;
                font-weight: 500;
                color: #2b3648;
                text-decoration: none;
                white-space: nowrap;
                transition: color 140ms ease;

                &:hover {
                    color: #0e1726;
                }

                &.active-d486867 {
                    color: #0e1726;
                    font-weight: 700;
                }
            }
        }

        & .actions-d486867 {
            display: flex;
            align-items: center;
            gap: 14px;

            & .iconLink-d486867 {
                display: inline-flex;
                align-items: center;
                color: #2b3648;
                transition: color 160ms ease;

                &:hover {
                    color: #0e1726;
                }

                &.iconActive-d486867 {
                    color: #ed7f3c;
                }
            }
        }
    }

    &.scrolled-d486867 .inner-d486867 {
        height: 62px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.55) inset,
            0 20px 44px -16px rgba(1, 31, 69, 0.3);
    }
}

@media (max-width: 880px) {
    .links-d486867 {
        display: none;
    }

    .header-d486867 {
        padding: 12px 12px 0;
    }

    .inner-d486867 {
        padding: 0 10px 0 18px;
    }
}


/* ===== Shared placeholder texture ===== */
.cinemaBg-a7a5453,
.propertyBg-a7a5453,
.rwaBg-a7a5453 {
    position: absolute;
    inset: 0;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cinemaBg-a7a5453 {
    background: linear-gradient(135deg, #1a130a 0%, #0f0c08 60%, #15110a 100%);
}

.propertyBg-a7a5453 {
    background: linear-gradient(160deg, #08111d 0%, #0a1626 50%, #0d1a2e 100%);
}

.rwaBg-a7a5453 {
    background: radial-gradient(
        ellipse at 30% 40%,
        #2a1810 0%,
        #150e08 60%,
        #0a0604 100%
    );
}

.cinemaStripe-a7a5453,
.propertyStripe-a7a5453,
.rwaStripe-a7a5453 {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 12px,
        rgba(255, 255, 255, 0.018) 12px,
        rgba(255, 255, 255, 0.018) 13px
    );
    mix-blend-mode: screen;
}

.cinemaGrain-a7a5453,
.propertyGrain-a7a5453,
.rwaGrain-a7a5453 {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 0
    );
    background-size: 3px 3px;
    mix-blend-mode: screen;
}

.cinemaLabel-a7a5453,
.propertyLabel-a7a5453,
.rwaLabel-a7a5453 {
    position: absolute;
    bottom: 24px;
    right: 28px;
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 3;
}

/* ===== Cinema ===== */
.cinema-a7a5453 {
    position: absolute;
    inset: 0;
}

.cinemaFilmStrip-a7a5453 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    background: #070504;
    border-right: 1px solid rgba(217, 165, 79, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 14px 0;
    z-index: 2;
}

.cinemaCell-a7a5453 {
    width: 14px;
    height: 18px;
    margin: 0 auto;
    background: rgba(217, 165, 79, 0.08);
    border: 1px solid rgba(217, 165, 79, 0.18);
}

.cinemaTitleBlock-a7a5453 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 36px;
    padding-right: 16px;
    z-index: 2;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.cinemaEyebrow-a7a5453 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(217, 165, 79, 0.55);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    line-height: 1;
}

.cinemaTitle-a7a5453 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.05;
    color: #ecedf2;
    letter-spacing: -0.02em;
    text-align: center;
}

.cinemaSubrule-a7a5453 {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.22em;
}

.cinemaRule-a7a5453 {
    width: 18px;
    height: 1px;
    background: rgba(217, 165, 79, 0.5);
}

.cinemaAperture-a7a5453 {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    opacity: 0.22;
    transition: opacity 0.5s;
}

/* ===== Property ===== */
.property-a7a5453 {
    position: absolute;
    inset: 0;
}

.propertyTower-a7a5453 {
    position: absolute;
    right: 12px;
    bottom: 40px;
    width: 96px;
    height: 200px;
    opacity: 0.32;
    transition:
        opacity 0.6s,
        transform 0.8s;
}

.propertyTitleBlock-a7a5453 {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 72px;
    z-index: 2;
}

.propertyCoords-a7a5453 {
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(95, 159, 225, 0.7);
    letter-spacing: 0.22em;
    margin-bottom: 12px;
}

.propertyEyebrow-a7a5453 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
    font-weight: 400;
    line-height: 1;
}

.propertyTitle-a7a5453 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.05;
    color: #ecedf2;
    letter-spacing: -0.025em;
}

.propertyMeta-a7a5453 {
    margin-top: 12px;
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.propertyFloorPlan-a7a5453 {
    position: absolute;
    left: 18px;
    bottom: 40px;
    width: 64px;
    height: 46px;
    opacity: 0.25;
    transition: opacity 0.5s;
}

/* ===== RWA ===== */
.rwa-a7a5453 {
    position: absolute;
    inset: 0;
}

.rwaSeal-a7a5453 {
    position: absolute;
    bottom: 16px;
    right: 12px;
    width: 76px;
    height: 76px;
    opacity: 0.55;
    transition:
        opacity 0.6s,
        transform 1s;
}

.rwaIngot-a7a5453 {
    position: absolute;
    left: 18px;
    bottom: 30px;
    width: 110px;
    height: 44px;
    background: linear-gradient(
        135deg,
        #c97a4a 0%,
        #8e4f2a 50%,
        #c97a4a 100%
    );
    box-shadow:
        0 12px 32px -8px rgba(201, 122, 74, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: rotate(-2deg);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    border-radius: 1px;
}

.rwaIngotEm-a7a5453 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 10px;
    color: rgba(20, 12, 6, 0.65);
    letter-spacing: 0.05em;
}

.rwaIngotWeight-a7a5453 {
    font-family: var(--mono);
    font-size: 13px;
    color: rgba(20, 12, 6, 0.85);
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-top: 1px;
}

.rwaIngotSerial-a7a5453 {
    font-family: var(--mono);
    font-size: 7px;
    color: rgba(20, 12, 6, 0.55);
    letter-spacing: 0.25em;
    margin-top: 1px;
}

.rwaTitleBlock-a7a5453 {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 72px;
    z-index: 2;
}

.rwaEyebrow-a7a5453 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(201, 122, 74, 0.7);
    margin-bottom: 4px;
    font-weight: 400;
    line-height: 1;
}

.rwaTitle-a7a5453 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.05;
    color: #ecedf2;
    letter-spacing: -0.025em;
}


.section-93a8aa9 {
    padding: 140px 56px 100px;
    position: relative;
}

.inner-93a8aa9 {
    max-width: 1280px;
    margin: 0 auto;
}

.title-93a8aa9 {
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: var(--text);
}

.titleEm-93a8aa9 {
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

.lead-93a8aa9 {
    font-size: 18px;
    color: var(--text-dim);
    font-weight: 300;
    max-width: 640px;
    margin: 0;
    line-height: 1.6;
}

.grid-93a8aa9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 80px;
}

@media (max-width: 980px) {
    .section-93a8aa9 {
        padding: 100px 24px 80px;
    }

    .grid-93a8aa9 {
        grid-template-columns: 1fr;
    }
}


/* Sticky filter rail — search, facets, count, view toggle, sort. Sits just
   under the shared floating top nav. */

.rail-d57ff6a {
    position: relative;
    z-index: 40;
    gap: 12px;
    padding: 12px 32px;
    background: rgba(250, 237, 229, 0.86);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--color-border);

    & .search-d57ff6a {
        height: 36px;
        padding: 0 14px;
        gap: 9px;
        border-radius: 999px;
        background: var(--color-surface);
        border: 1px solid var(--color-border-strong);
        width: 240px;
        max-width: 32vw;

        & .searchIcon-d57ff6a {
            color: var(--color-text-subtle);
        }

        & .searchInput-d57ff6a {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 13px;
        }
    }

    & .facets-d57ff6a {
        gap: 8px;
    }

    & .spacer-d57ff6a {
        flex: 1;
    }

    & .count-d57ff6a {
        color: var(--color-text-subtle);
        font-size: 12.5px;
        white-space: nowrap;
    }

    & .viewToggle-d57ff6a {
        flex-shrink: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border-strong);
        border-radius: 999px;
        padding: 3px;

        & .viewBtn-d57ff6a {
            gap: 6px;
            padding: 6px 13px;
            border-radius: 999px;
            cursor: pointer;
            border: none;
            font-family: var(--font-body);
            font-size: 12.5px;
            font-weight: 600;
            white-space: nowrap;
            background: transparent;
            color: var(--color-text-muted);
            transition:
                background 160ms ease,
                color 160ms ease;

            &.viewBtnActive-d57ff6a {
                background: var(--color-brand);
                color: #fff;
            }
        }
    }
}

.dropdown-d57ff6a {
    position: relative;
    flex-shrink: 0;

    & .trigger-d57ff6a {
        height: 36px;
        padding: 0 14px;
        background: var(--color-surface);
        border: 1px solid var(--color-border-strong);
        border-radius: 999px;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 13px;
        cursor: pointer;
        gap: 7px;
        white-space: nowrap;
        transition:
            border-color 160ms ease,
            color 160ms ease,
            background 160ms ease;

        &:hover {
            border-color: var(--color-accent);
            color: var(--color-text);
        }

        &.triggerActive-d57ff6a {
            border-color: var(--color-brand);
            background: var(--color-brand);
            color: #fff;
        }

        & .chevron-d57ff6a {
            opacity: 0.7;
        }
    }

    & .panel-d57ff6a {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 20;
        min-width: 220px;
        max-height: 320px;
        overflow-y: auto;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        padding: 6px;
        box-shadow: var(--shadow-lg);
        gap: 2px;

        & .option-d57ff6a {
            width: 100%;
            padding: 9px 12px;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            background: transparent;
            border: none;
            color: var(--color-text);
            font-family: var(--font-body);
            font-size: 13px;

            &:hover,
            &.optionActive-d57ff6a {
                background: var(--color-accent-tint, rgba(254, 168, 107, 0.16));
                color: var(--color-accent);
            }

            &.optionActive-d57ff6a {
                font-weight: 600;
            }
        }
    }
}


.footer-793ddb2 {
    padding: 56px 56px 40px;
    border-top: 1px solid var(--border);
}

.inner-793ddb2 {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.copy-793ddb2 {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: 0.05em;
}

@media (max-width: 720px) {
    .footer-793ddb2 {
        padding: 40px 24px 32px;
    }
}


.page-19019b7 {
    min-height: 100vh;
}

.grow-19019b7 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grow-19019b7 > section {
    padding-top: 40px;
    padding-bottom: 40px;
}


/* Light peach ground. */
.landing-c977869 {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: linear-gradient(165deg, #fdece1 0%, #fbe3d3 100%);
}

.topbar-c977869 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 22px 56px;
}

.hero-c977869 {
    position: relative;
    flex: 1;
    padding: 160px 56px 80px;
    overflow: hidden;
}

.grid-c977869 {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(1, 31, 69, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 31, 69, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 82%);
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 40%,
        transparent 82%
    );
    pointer-events: none;
}

.inner-c977869 {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.headline-c977869 {
    font-family: var(--font-title);
    font-weight: 400;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 auto 32px;
    max-width: 1000px;
    color: var(--color-text);
    animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.1s;
}

.subcopy-c977869 {
    font-size: 19px;
    line-height: 1.55;
    max-width: 620px;
    color: var(--color-text-muted);
    margin: 0 auto 56px;
    font-weight: 300;
    animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.2s;
}

.ctas-c977869 {
    gap: 16px;
    animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.3s;
}

.ctaPrimary-c977869 {
    background: linear-gradient(180deg, #f4a45c 0%, #ed8c43 100%);
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 16px;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    transition:
        filter 0.2s,
        box-shadow 0.2s;
}

.ctaPrimary-c977869:hover {
    filter: brightness(1.04);
    box-shadow: 0 10px 24px -10px rgba(237, 140, 67, 0.6);
}

.ctaPrimaryArrow-c977869 {
    font-size: 17px;
}

.managedBy-c977869 {
    position: relative;
    z-index: 2;
    padding: 24px 56px 40px;
}

.managedByImg-c977869 {
    height: 96px;
    opacity: 0.85;
}

@media (max-width: 720px) {
    .topbar-c977869 {
        padding: 18px 24px;
    }

    .hero-c977869 {
        padding: 130px 24px 60px;
    }

    .managedBy-c977869 {
        padding: 16px 24px 28px;
    }

    .managedByImg-c977869 {
        height: 72px;
    }
}


.getStarted-6e2bb32 {
    background: var(--site-cream);

    & .container-6e2bb32 {
        max-width: 1180px;
        margin: 0 auto;
        padding: 120px 28px;

        & .head-6e2bb32 {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;

            & .eyebrowAccent-6e2bb32 {
                color: var(--site-orange-600);
            }

            & .title-6e2bb32 {
                font-size: clamp(38px, 5vw, 70px);
                margin: 14px 0 0;
                padding-bottom: 0.06em; /* room for Playfair descenders */
                color: var(--color-text);
            }
        }

        & .timeline-6e2bb32 {
            position: relative;
            margin: 80px 0 64px;

            & .track-6e2bb32 {
                position: absolute;
                top: 27px;
                left: 12.5%;
                right: 12.5%;
                height: 2px;

                & .trackBase-6e2bb32 {
                    position: absolute;
                    inset: 0;
                    background: var(--color-border-strong);
                    border-radius: 2px;
                }

                & .trackFill-6e2bb32 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 2px;
                    width: 100%;
                    background: var(--color-text);
                    border-radius: 2px;
                    transform-origin: left center;
                    animation: exc-grow-x 2452ms linear 187ms both;
                }
            }

            & .steps-6e2bb32 {
                display: grid;
                grid-template-columns: repeat(4, 1fr);

                & .step-6e2bb32 {
                    position: relative;
                    padding: 0 16px;
                    text-align: center;

                    & .circleWrap-6e2bb32 {
                        position: relative;
                        width: 56px;
                        height: 56px;
                        margin: 0 auto;

                        & .halo-6e2bb32 {
                            position: absolute;
                            inset: -6px;
                            border-radius: 50%;
                            border: 2px solid var(--site-orange);
                            opacity: 0;
                            animation: exc-halo 520ms ease both;
                        }

                        & .ringSvg-6e2bb32 {
                            position: absolute;
                            inset: 0;
                            transform: rotate(-90deg);

                            & .ring-6e2bb32 {
                                animation: exc-chart-draw 373ms cubic-bezier(0.16, 1, 0.3, 1) both;
                            }
                        }

                        & .num-6e2bb32 {
                            position: absolute;
                            inset: 0;
                            display: grid;
                            place-items: center;
                            font-family: var(--font-data);
                            font-size: 15px;
                            font-weight: 700;
                            color: var(--color-text);
                            animation: exc-fade-in 253ms ease both;
                        }
                    }

                    & .stepIconRow-6e2bb32 {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 12px;
                        margin-top: 30px;
                        color: var(--color-text);
                        animation: exc-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;

                        & .stepLabel-6e2bb32 {
                            font-family: var(--font-data);
                            font-size: 12px;
                            font-weight: 600;
                            letter-spacing: 0.12em;
                            text-transform: uppercase;
                            color: var(--color-text);
                        }
                    }

                    & .stepTitle-6e2bb32 {
                        font-size: 26px;
                        line-height: 1.12;
                        margin: 22px 0 14px;
                        color: var(--color-text);
                        animation: exc-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
                    }

                    & .stepText-6e2bb32 {
                        font-size: 15px;
                        color: var(--color-text-muted);
                        margin: 0 auto;
                        max-width: 240px;
                        line-height: 1.6;
                        animation: exc-fade-up 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
                    }

                    &.s1-6e2bb32 .ring-6e2bb32 {
                        animation-delay: 0ms;
                    }
                    &.s1-6e2bb32 .halo-6e2bb32 {
                        animation-delay: 287ms;
                    }
                    &.s1-6e2bb32 .num-6e2bb32 {
                        animation-delay: 227ms;
                    }
                    &.s1-6e2bb32 .stepIconRow-6e2bb32 {
                        animation-delay: 360ms;
                    }
                    &.s1-6e2bb32 .stepTitle-6e2bb32 {
                        animation-delay: 413ms;
                    }
                    &.s1-6e2bb32 .stepText-6e2bb32 {
                        animation-delay: 467ms;
                    }

                    &.s2-6e2bb32 .ring-6e2bb32 {
                        animation-delay: 693ms;
                    }
                    &.s2-6e2bb32 .halo-6e2bb32 {
                        animation-delay: 980ms;
                    }
                    &.s2-6e2bb32 .num-6e2bb32 {
                        animation-delay: 920ms;
                    }
                    &.s2-6e2bb32 .stepIconRow-6e2bb32 {
                        animation-delay: 1053ms;
                    }
                    &.s2-6e2bb32 .stepTitle-6e2bb32 {
                        animation-delay: 1106ms;
                    }
                    &.s2-6e2bb32 .stepText-6e2bb32 {
                        animation-delay: 1160ms;
                    }

                    &.s3-6e2bb32 .ring-6e2bb32 {
                        animation-delay: 1386ms;
                    }
                    &.s3-6e2bb32 .halo-6e2bb32 {
                        animation-delay: 1673ms;
                    }
                    &.s3-6e2bb32 .num-6e2bb32 {
                        animation-delay: 1613ms;
                    }
                    &.s3-6e2bb32 .stepIconRow-6e2bb32 {
                        animation-delay: 1746ms;
                    }
                    &.s3-6e2bb32 .stepTitle-6e2bb32 {
                        animation-delay: 1799ms;
                    }
                    &.s3-6e2bb32 .stepText-6e2bb32 {
                        animation-delay: 1853ms;
                    }

                    &.s4-6e2bb32 .ring-6e2bb32 {
                        animation-delay: 2079ms;
                    }
                    &.s4-6e2bb32 .halo-6e2bb32 {
                        animation-delay: 2366ms;
                    }
                    &.s4-6e2bb32 .num-6e2bb32 {
                        animation-delay: 2306ms;
                    }
                    &.s4-6e2bb32 .stepIconRow-6e2bb32 {
                        animation-delay: 2439ms;
                    }
                    &.s4-6e2bb32 .stepTitle-6e2bb32 {
                        animation-delay: 2492ms;
                    }
                    &.s4-6e2bb32 .stepText-6e2bb32 {
                        animation-delay: 2546ms;
                    }
                }
            }
        }

        & .ctaRow-6e2bb32 {
            display: flex;
            justify-content: center;
            margin: 0 0 56px;
        }

        /* ── Video placeholder frame — a blank charcoal 16:9 panel with a play badge ── */

        & .video-6e2bb32 {
            position: relative;
            border-radius: var(--radius-2xl);
            overflow: hidden;
            aspect-ratio: 16 / 9;
            cursor: pointer;
            background: var(--site-charcoal-grad);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: var(--shadow-lg);

            &:hover .playBadge-6e2bb32 {
                transform: scale(1.06);
            }

            & .videoCenter-6e2bb32 {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;

                & .playBadge-6e2bb32 {
                    width: 84px;
                    height: 84px;
                    border-radius: 50%;
                    background: var(--site-orange);
                    color: var(--color-text);
                    display: grid;
                    place-items: center;
                    transition: transform var(--duration-fast) var(--ease-out);
                }
            }
        }
    }
}

@media (max-width: 880px) {
    .track-6e2bb32 {
        display: none;
    }

    .steps-6e2bb32 {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 56px;
    }

    .container-6e2bb32 {
        padding: 72px 22px;
    }
}

@media (max-width: 520px) {
    .steps-6e2bb32 {
        grid-template-columns: 1fr;
        row-gap: 44px;
    }
}


.section-8b1d323 {
    padding: 140px 56px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);

    & .inner-8b1d323 {
        max-width: 1280px;
        margin: 0 auto;
        text-align: center;

        & .title-8b1d323 {
            font-family: var(--serif);
            font-size: clamp(40px, 5vw, 72px);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: -0.02em;
            margin: 0 0 28px;
            color: var(--text);
            text-align: center;

            & .titleEm-8b1d323 {
                font-style: italic;
                font-weight: 400;
                color: var(--gold);
            }
        }

        & .lead-8b1d323 {
            font-size: 18px;
            color: var(--text-dim);
            font-weight: 300;
            max-width: 680px;
            margin: 0 auto;
            line-height: 1.6;
        }

        & .brand-8b1d323 {
            margin-top: 64px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;

            & .brandImg-8b1d323 {
                height: 80px;
                opacity: 0.92;
            }

            & .brandLink-8b1d323 {
                font-family: var(--mono);
                font-size: 12px;
                color: var(--equitativa);
                letter-spacing: 0.05em;
                margin-top: 8px;
            }
        }

        & .stats-8b1d323 {
            margin-top: 80px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);

            & .stat-8b1d323 {
                padding: 32px 24px;
                border-left: 1px solid var(--border);

                &:first-child {
                    border-left: none;
                }

                & .statValue-8b1d323 {
                    font-family: var(--serif);
                    font-size: 32px;
                    font-weight: 500;
                    margin-bottom: 6px;
                    color: var(--text);
                }

                & .statLabel-8b1d323 {
                    font-size: 11px;
                    letter-spacing: 0.18em;
                    text-transform: uppercase;
                    color: var(--text-mute);
                }
            }
        }

        & .ctaWrap-8b1d323 {
            margin-top: 80px;

            & .cta-8b1d323 {
                background: #011f45;
                color: #ffffff;
                border: none;
                padding: 18px 32px;
                font-size: 13px;
                letter-spacing: 0.22em;
                text-transform: uppercase;
                font-weight: 600;
                border-radius: 2px;
                display: inline-flex;
                align-items: center;
                gap: 12px;
                cursor: pointer;
                font-family: inherit;
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;

                &:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 12px 28px -10px rgba(1, 31, 69, 0.18);
                }
            }
        }
    }
}

@media (max-width: 980px) {
    .section-8b1d323 {
        padding: 100px 24px;
    }

    .stats-8b1d323 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-8b1d323:nth-child(3) {
        border-left: none;
    }
}


/* Hero — cream stage with centred copy over a faint blueprint grid.
   A stronger duplicate of the grid is masked to a circle that follows
   the cursor (centre fed via --mx/--my from hero.rs) as a spotlight. */

.hero-bcb9c07 {
    position: relative;
    background: var(--site-cream);
    overflow: hidden;
}

/* ── Blueprint grids ── */

.gridBase-bcb9c07,
.gridSpot-bcb9c07 {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: 48px 48px;
}

/* Faint base grid, strongest towards the upper right */
.gridBase-bcb9c07 {
    background-image:
        linear-gradient(rgba(28, 46, 126, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 46, 126, 0.05) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(
        125% 120% at 72% 28%,
        #000 0%,
        rgba(0, 0, 0, 0.45) 58%,
        transparent 100%
    );
    mask-image: radial-gradient(
        125% 120% at 72% 28%,
        #000 0%,
        rgba(0, 0, 0, 0.45) 58%,
        transparent 100%
    );
}

/* Stronger grid copy, masked to the cursor-following circle */
.gridSpot-bcb9c07 {
    background-image:
        linear-gradient(rgba(28, 46, 126, 0.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 46, 126, 0.17) 1px, transparent 1px);
    opacity: 0;
    transition: opacity 450ms ease;
    -webkit-mask-image: radial-gradient(
        circle 340px at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.55) 32%,
        rgba(0, 0, 0, 0.18) 58%,
        transparent 80%
    );
    mask-image: radial-gradient(
        circle 340px at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.55) 32%,
        rgba(0, 0, 0, 0.18) 58%,
        transparent 80%
    );
}

.gridSpotOn-bcb9c07 {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gridSpot-bcb9c07 {
        display: none;
    }
}

/* ── Copy ── */

.inner-bcb9c07 {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 140px 28px 150px;
    display: flex;
    flex-direction: column;
}

.heroMain-bcb9c07 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 64px;
}

.logoCol-bcb9c07 {
    display: grid;
    place-items: center;
}

.excLogo-bcb9c07 {
    width: clamp(180px, 22vw, 320px);
    aspect-ratio: 701.61 / 581.96;
    background-color: var(--site-cream-2);
    -webkit-mask: url(/images/exc-mark-secondary-white.svg) center / contain
        no-repeat;
    mask: url(/images/exc-mark-secondary-white.svg) center / contain no-repeat;
}

@media (max-width: 900px) {
    .heroMain-bcb9c07 {
        grid-template-columns: 1fr;
    }

    .logoCol-bcb9c07 {
        display: none;
    }
}

.copy-bcb9c07 {
    text-align: left;
    width: 100%;
}

.eyebrow-bcb9c07 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--site-orange-600);
    margin-bottom: 22px;
}

.headline-bcb9c07 {
    color: var(--color-text);
    font-size: clamp(56px, 8vw, 96px);
    margin: 0;
    padding-bottom: 0.06em; /* room for Playfair descenders */
    text-wrap: balance;
}

.subtitle-bcb9c07 {
    color: var(--color-text-muted);
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.65;
    max-width: 560px;
    margin: 28px 0 0;
    text-wrap: pretty;
}

.ctas-bcb9c07 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.ctas-bcb9c07 a {
    font-size: 18px;
    padding: 16px 40px;
}

/* ── Stats — full menu-bar width, large serif figures ── */

.stats-bcb9c07 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 104px;
    flex-wrap: wrap;
}

.stat-bcb9c07 {
    text-align: center;
}

.statNumber-bcb9c07 {
    font-family: var(--font-title);
    font-size: clamp(52px, 7.4vw, 108px);
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 0.95;
    letter-spacing: -0.01em;
}

/* The currency sign and unit run smaller than the figure */
.statCurrency-bcb9c07 {
    font-size: 0.56em;
}

.statUnit-bcb9c07 {
    font-size: 0.52em;
}

.statLabel-bcb9c07 {
    margin-top: 16px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}


.hero-34e8fa1 {
    position: relative;
    min-height: 100vh;
    padding: 160px 56px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;

    & .glowBlue-34e8fa1 {
        position: absolute;
        top: 10%;
        left: -10%;
        width: 800px;
        height: 800px;
        background: radial-gradient(
            circle,
            rgba(95, 159, 225, 0.1),
            transparent 60%
        );
        filter: blur(40px);
        pointer-events: none;
    }

    & .glowGold-34e8fa1 {
        position: absolute;
        bottom: -10%;
        right: -5%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
            circle,
            rgba(217, 165, 79, 0.07),
            transparent 60%
        );
        filter: blur(40px);
        pointer-events: none;
    }

    & .grid-34e8fa1 {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(
                rgba(1, 31, 69, 0.05) 1px,
                transparent 1px
            ),
            linear-gradient(90deg, rgba(1, 31, 69, 0.05) 1px, transparent 1px);
        background-size: 80px 80px;
        mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
        -webkit-mask-image: radial-gradient(
            ellipse at center,
            black 30%,
            transparent 75%
        );
        pointer-events: none;
    }

    & .inner-34e8fa1 {
        position: relative;
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;

        & .eyebrow-34e8fa1 {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid var(--border-2);
            background: var(--surface-2);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 40px;
            animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;

            & .eyebrowDot-34e8fa1 {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--good);
                box-shadow: 0 0 10px var(--good);
                animation: xl-shimmer 2.4s ease infinite;
            }
        }

        & .headline-34e8fa1 {
            font-family: var(--serif);
            font-weight: 400;
            font-size: clamp(48px, 7vw, 104px);
            line-height: 1.02;
            letter-spacing: -0.02em;
            margin: 0 0 32px;
            max-width: 1100px;
            animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.1s;
            color: var(--text);

            & .headlineEm-34e8fa1 {
                font-style: italic;
                font-weight: 400;
                color: var(--gold);
            }
        }

        & .subcopy-34e8fa1 {
            font-size: 19px;
            line-height: 1.55;
            max-width: 620px;
            color: var(--text-dim);
            margin: 0 0 56px;
            font-weight: 300;
            animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.2s;
        }

        & .ctas-34e8fa1 {
            display: flex;
            gap: 16px;
            align-items: center;
            animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.3s;

            & .ctaPrimary-34e8fa1 {
                background: #011f45;
                color: #ffffff;
                border: none;
                padding: 18px 32px;
                font-size: 13px;
                letter-spacing: 0.22em;
                text-transform: uppercase;
                font-weight: 600;
                border-radius: 2px;
                display: inline-flex;
                align-items: center;
                gap: 12px;
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
                cursor: pointer;
                font-family: inherit;

                &:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 12px 28px -10px rgba(1, 31, 69, 0.18);
                }

                & .ctaPrimaryArrow-34e8fa1 {
                    font-size: 16px;
                }
            }

            & .ctaSecondary-34e8fa1 {
                color: var(--text-dim);
                font-size: 12px;
                letter-spacing: 0.22em;
                text-transform: uppercase;
                font-weight: 500;
                padding: 18px 8px;
                transition: color 0.2s;

                &:hover {
                    color: var(--brand-dark);
                }
            }
        }

        & .stats-34e8fa1 {
            margin-top: 100px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border-top: 1px solid var(--border);
            padding-top: 32px;
            animation: xl-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.5s;

            & .stat-34e8fa1 {
                padding-left: 32px;
                border-left: 1px solid var(--border);

                &:first-child {
                    padding-left: 0;
                    border-left: none;
                }

                & .statValue-34e8fa1 {
                    font-family: var(--serif);
                    font-size: 36px;
                    font-weight: 500;
                    letter-spacing: -0.01em;
                    margin-bottom: 6px;
                    color: var(--text);
                }

                & .statLabel-34e8fa1 {
                    font-size: 11px;
                    letter-spacing: 0.18em;
                    text-transform: uppercase;
                    color: var(--text-mute);
                }
            }
        }
    }

    & .scroll-34e8fa1 {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--text-mute);
        display: flex;
        align-items: center;
        gap: 12px;

        & .scrollLine-34e8fa1 {
            width: 1px;
            height: 28px;
            background: linear-gradient(180deg, transparent, var(--text-mute));
        }
    }
}

@media (max-width: 720px) {
    .hero-34e8fa1 {
        padding: 130px 24px 60px;
    }

    .stats-34e8fa1 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .stat-34e8fa1 {
        padding-left: 16px;
    }

    .stat-34e8fa1:nth-child(3) {
        padding-left: 0;
        border-left: none;
    }

    .ctas-34e8fa1 {
        flex-direction: column;
        align-items: stretch;
    }
}


.section-50a004d {
    padding: 140px 56px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.inner-50a004d {
    max-width: 1280px;
    margin: 0 auto;
}

.title-50a004d {
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    color: var(--text);
}

.titleEm-50a004d {
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

.lead-50a004d {
    font-size: 18px;
    color: var(--text-dim);
    font-weight: 300;
    max-width: 640px;
    margin: 0;
    line-height: 1.6;
}

.grid-50a004d {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 80px;
    position: relative;
}

.connector-50a004d {
    position: absolute;
    top: 32px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--border-2) 15%,
        var(--border-2) 85%,
        transparent
    );
}

.step-50a004d {
    padding: 0 24px;
    position: relative;
}

.circle-50a004d {
    width: 64px;
    height: 64px;
    background: var(--bg);
    border: 1px solid var(--border-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 auto 32px;
    position: relative;
    z-index: 1;
}

.stepTitle-50a004d {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 16px;
    text-align: center;
    letter-spacing: -0.01em;
    color: var(--text);
}

.stepBody-50a004d {
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    margin: 0;
    line-height: 1.65;
}

@media (max-width: 980px) {
    .section-50a004d {
        padding: 100px 24px;
    }

    .grid-50a004d {
        grid-template-columns: 1fr 1fr;
        gap: 48px 0;
    }

    .connector-50a004d {
        display: none;
    }
}

@media (max-width: 600px) {
    .grid-50a004d {
        grid-template-columns: 1fr;
    }
}


.table-a9fd4bd {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.headRow-a9fd4bd th {
    color: var(--color-text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 8px;
}

.th-a9fd4bd {
    text-align: right;
}

.thLeft-a9fd4bd {
    text-align: left;
}

.tr-a9fd4bd {
    border-top: 1px solid var(--color-border);
}

.assetCell-a9fd4bd {
    padding: 8px 0;
}

.token-a9fd4bd {
    font-weight: 700;
    font-size: 11.5px;
    color: var(--color-brand);
}

.name-a9fd4bd {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-left: 6px;
}

.pattern-a9fd4bd {
    padding: 8px 0;
    color: var(--color-text);
}

.freq-a9fd4bd {
    padding: 8px 0;
    text-align: right;
    color: var(--color-text-muted);
}

.next-a9fd4bd {
    padding: 8px 0;
    text-align: right;
    color: var(--site-orange-600);
}


/* From asset to income — straight centred journey on a full-bleed
   navy panel. All blocks are absolutely positioned on a fixed
   1120×1835 design canvas that journey.rs scales to the available
   width, so the SVG line stays pixel-aligned to the content: copy and
   visuals alternate sides of the centred line. Reveal state (.blkIn /
   .numIn / .markerOn / play classes) is toggled from scroll progress
   in journey.rs; the delay utilities (.d60–.d600) must stay below the
   .blk/.num definitions so their transition-delay wins the cascade. */

.journey-86c88f1 {
    background: var(--site-cream);
    padding: 8px 0 56px;

    & .panel-86c88f1 {
        position: relative;
        width: 100%;
        border-radius: 40px;
        overflow: hidden;
        background: radial-gradient(
            120% 120% at 50% 0%,
            #26399a 0%,
            #1c2e7e 55%,
            #14205e 100%
        );

        & .stage-86c88f1 {
            position: absolute;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;

            & .canvas-86c88f1 {
                width: 1120px;
                height: 1835px;
                flex: 0 0 auto;
                transform-origin: top center;
                position: relative;
            }
        }
    }
}

/* ── Header ── */

.header-86c88f1 {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    text-align: center;
}

.eyebrowAccent-86c88f1 {
    color: var(--site-orange);
}

.title-86c88f1 {
    font-size: 70px;
    margin: 14px 0 14px;
    padding-bottom: 0.06em; /* room for Playfair descenders */
    color: #fff;
}

.lead-86c88f1 {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
    line-height: 1.6;
}

.bull-86c88f1 {
    position: absolute;
    left: 402px;
    top: 301px;
    height: 140px;
    z-index: 2;
}

/* ── Line, markers and the travelling box ── */

.lineSvg-86c88f1 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    & .marker-86c88f1 {
        opacity: 0;
        transform: scale(0.4);
        transform-box: fill-box;
        transform-origin: center;
        transition:
            opacity 320ms ease,
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1);

        &.markerOn-86c88f1 {
            opacity: 1;
            transform: scale(1);
        }
    }

    & .travelBox-86c88f1 {
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
    }
}

/* ── Reveal contract for positioned blocks ── */

.blk-86c88f1 {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.blkIn-86c88f1 {
    opacity: 1;
    transform: none;
}

.num-86c88f1 {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 104px;
    line-height: 0.8;
    color: #fff;
    letter-spacing: -0.04em;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition:
        opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.numIn-86c88f1 {
    opacity: 1;
    transform: none;
}

/* ── Step copy ── */

.stepTitle-86c88f1 {
    font-size: 27px;
    line-height: 1.12;
    color: #fff;
    margin: 0;
}

.stepBody-86c88f1 {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    margin: 13px 0 0;
    text-wrap: pretty;
}

/* ── Canvas placement (px on the 1120×1835 design canvas) ── */

.num1-86c88f1 {
    left: 622px;
    top: 540px;
}

.copy1-86c88f1 {
    position: absolute;
    left: 690px;
    top: 548px;
    width: 320px;
}

.visual1-86c88f1 {
    position: absolute;
    left: 210px;
    top: 490px;
    width: 250px;
}

.num2-86c88f1 {
    left: 79px;
    top: 830px;
}

.copy2-86c88f1 {
    position: absolute;
    left: 153px;
    top: 838px;
    width: 320px;
}

.visual2-86c88f1 {
    position: absolute;
    left: 632px;
    top: 805px;
    width: 350px;
}

.num3-86c88f1 {
    left: 622px;
    top: 1120px;
}

.copy3-86c88f1 {
    position: absolute;
    left: 690px;
    top: 1128px;
    width: 320px;
}

.visual3-86c88f1 {
    position: absolute;
    left: 185px;
    top: 1080px;
    width: 319px;
}

.num4-86c88f1 {
    left: 79px;
    top: 1410px;
    transition-delay: 60ms;
}

.copy4-86c88f1 {
    position: absolute;
    left: 153px;
    top: 1418px;
    width: 320px;
}

.visual4-86c88f1 {
    position: absolute;
    left: 632px;
    top: 1358px;
    width: 303px;
}

.closing-86c88f1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 1700px;
    text-align: center;
}

.closingLine-86c88f1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
}

/* Reveal delays — keep below .blk/.num so transition-delay wins. */

.d80-86c88f1 {
    transition-delay: 80ms;
}

.d160-86c88f1 {
    transition-delay: 160ms;
}

.d180-86c88f1 {
    transition-delay: 180ms;
}

.d320-86c88f1 {
    transition-delay: 320ms;
}

.d600-86c88f1 {
    transition-delay: 600ms;
}

/* ── Visual 1: verified asset list ── */

.assetList-86c88f1 {
    display: flex;
    flex-direction: column;
    gap: 10px;

    & .assetRow-86c88f1 {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 15px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        transition: border-color 420ms cubic-bezier(0.16, 1, 0.3, 1);

        &.assetRowActive-86c88f1 {
            border-color: var(--site-orange);
        }

        & .assetIcon-86c88f1 {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            display: grid;
            place-items: center;
            flex-shrink: 0;
            color: var(--site-orange);
        }

        & .assetMeta-86c88f1 {
            flex: 1;
            min-width: 0;

            & .assetName-86c88f1 {
                display: block;
                font-family: var(--font-display);
                font-size: 13.5px;
                font-weight: 600;
                color: #fff;
            }

            & .assetTag-86c88f1 {
                display: block;
                font-size: 11px;
                color: rgba(255, 255, 255, 0.5);
            }
        }

        & .verified-86c88f1 {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: var(--font-data);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            transition: color 360ms;

            & .verifiedDot-86c88f1 {
                position: relative;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                display: grid;
                place-items: center;
                color: #fff;
                transition: background 360ms;
            }

            &.verifiedOn-86c88f1 {
                color: var(--exc-up-500);

                & .verifiedDot-86c88f1 {
                    background: var(--exc-up-500);
                }
            }
        }
    }
}

/* ── Visual 2: your-share donut + amount ── */

.invest-86c88f1 {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 26px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);

    & .donutWrap-86c88f1 {
        position: relative;
        width: 108px;
        height: 108px;
        flex-shrink: 0;

        & .donutSvg-86c88f1 {
            transform: rotate(-90deg);

            & .donutFill-86c88f1 {
                transition: stroke-dashoffset 120ms linear;
            }
        }

        & .donutCenter-86c88f1 {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            text-align: center;

            & .donutPct-86c88f1 {
                font-family: var(--font-display);
                font-size: 24px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -0.02em;
            }

            & .donutLabel-86c88f1 {
                font-size: 8.5px;
                color: rgba(255, 255, 255, 0.5);
                font-family: var(--font-data);
                letter-spacing: 0.06em;
                text-transform: uppercase;
            }
        }
    }

    & .investAmount-86c88f1 {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 700;
        color: var(--site-orange);
        letter-spacing: -0.01em;
    }
}

/* ── Visual 3: monthly income bars ── */

.earn-86c88f1 {
    padding: 20px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);

    & .earnHead-86c88f1 {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 16px;

        & .earnLabel-86c88f1 {
            font-family: var(--font-data);
            font-size: 10.5px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
        }

        & .earnTotal-86c88f1 {
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            color: var(--site-orange);
        }
    }

    & .bars-86c88f1 {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        height: 100px;

        & .barCol-86c88f1 {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;

            & .monthLabel-86c88f1 {
                font-family: var(--font-data);
                font-size: 9.5px;
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
}

.bar-86c88f1 {
    width: 100%;
    border-radius: 5px 5px 0 0;
    background: var(--exc-blue-400);
    opacity: 0.55;
    transform-origin: bottom;
    animation: exc-grow 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-play-state: paused;
}

.barsPlay-86c88f1 .bar-86c88f1 {
    animation-play-state: running;
}

.bar1-86c88f1 {
    height: 38px;
}

.bar2-86c88f1 {
    height: 52px;
    animation-delay: 90ms;
}

.bar3-86c88f1 {
    height: 47px;
    animation-delay: 180ms;
}

.bar4-86c88f1 {
    height: 66px;
    animation-delay: 270ms;
}

.bar5-86c88f1 {
    height: 72px;
    animation-delay: 360ms;
}

.bar6-86c88f1 {
    height: 88px;
    animation-delay: 450ms;
    background: var(--site-orange);
    opacity: 1;
}

/* ── Visual 4: bank card ── */

.spend-86c88f1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    & .bankCard-86c88f1 {
        position: relative;
        width: 100%;
        height: 168px;
        border-radius: 18px;
        padding: 20px;
        color: #fff;
        overflow: hidden;
        background: linear-gradient(135deg, #2f45b0 0%, #26399a 60%, #1c2e7e 100%);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.6);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & .cardTop-86c88f1 {
            display: flex;
            align-items: center;
            justify-content: space-between;

            & .cardBrand-86c88f1 {
                font-family: var(--font-display);
                font-weight: 700;
                font-size: 12.5px;
                letter-spacing: 0.04em;
            }

            & .walletWrap-86c88f1 {
                position: relative;
                display: inline-grid;
                place-items: center;
                color: var(--site-orange);
            }
        }

        & .cardNumber-86c88f1 {
            font-family: var(--font-data);
            font-size: 12px;
            letter-spacing: 0.18em;
            color: rgba(255, 255, 255, 0.82);
        }

        & .cardBottom-86c88f1 {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-top: 10px;

            & .balanceLabel-86c88f1 {
                font-size: 9px;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.5);
            }

            & .balanceValue-86c88f1 {
                font-family: var(--font-display);
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -0.01em;
            }

            & .partnership-86c88f1 {
                font-size: 9px;
                color: rgba(255, 255, 255, 0.5);
                max-width: 90px;
                text-align: right;
            }
        }
    }

    & .landed-86c88f1 {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: var(--font-data);
        font-size: 11.5px;
        font-weight: 700;
        color: var(--exc-up-500);
    }
}

.walletRipple-86c88f1 {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--site-orange);
    animation: exc-pulse 1800ms ease-out infinite;
    animation-play-state: paused;
}

.spendPlay-86c88f1 .walletRipple-86c88f1 {
    animation-play-state: running;
}


.landing-8080f4f {
    position: relative;
    z-index: 2;
}


/* Map popup card — cream/orange theme. */

.popup-aabe45b {
    width: 248px;
    background: var(--color-surface);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 22px 50px -16px rgba(1, 31, 69, 0.45);

    & .media-aabe45b {
        position: relative;
        height: 120px;

        & .mediaImg-aabe45b {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        & .mediaPlaceholder-aabe45b {
            width: 100%;
            height: 100%;
            background: var(--color-surface-2);
        }

        & .closeBtn-aabe45b {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.92);
            color: var(--color-brand);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            display: grid;
            place-items: center;
        }
    }

    & .body-aabe45b {
        padding: 12px 14px 14px;

        & .name-aabe45b {
            font-family: var(--font-title);
            font-size: 16px;
            font-weight: 600;
            margin: 0;
            letter-spacing: -0.01em;
            color: var(--color-text);
        }

        & .address-aabe45b {
            gap: 4px;
            margin-top: 3px;
            color: var(--color-text-subtle);
            font-size: 12.5px;

            & svg {
                color: var(--color-accent);
                flex-shrink: 0;
            }
        }

        & .stats-aabe45b {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--color-border);
            gap: 10px;

            & .statLabel-aabe45b {
                font-size: 10px;
                letter-spacing: 0.04em;
                color: var(--color-text-subtle);
            }

            & .statValue-aabe45b {
                font-family: var(--font-title);
                font-size: 16px;
                font-weight: 600;
                color: var(--color-text);
            }

            & .statYieldWrap-aabe45b {
                text-align: right;

                & .statYield-aabe45b {
                    font-family: var(--font-data);
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--color-accent);
                }
            }

            & .openBtn-aabe45b {
                margin-left: auto;
                padding: 7px 14px;
                border-radius: 999px;
                background: var(--color-brand);
                color: #fff;
                font-size: 12.5px;
                font-weight: 600;
                text-decoration: none;
            }
        }
    }
}


.card-d29859a {
    gap: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    animation: card-fade-up 0.35s ease both;

    &:hover .poster-d29859a {
        border-color: var(--accent);
    }

    &:hover .posterImg-d29859a {
        transform: scale(1.05);
    }

    & .poster-d29859a {
        position: relative;
        aspect-ratio: 2 / 3;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--surface);
        transition:
            border-color 0.2s ease,
            transform 0.2s ease;

        & .posterImg-d29859a {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        & .posterPlaceholder-d29859a {
            width: 100%;
            height: 100%;
            background: linear-gradient(
                135deg,
                var(--surface),
                var(--surface-2)
            );
        }
    }

    & .body-d29859a {
        gap: 8px;

        & .title-d29859a {
            font-family: var(--serif);
            font-size: 17px;
            font-weight: 500;
            line-height: 1.2;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* Type then genre, stacked under the title. The type is the prominent line
           (accent colour + bold); the genre sits under it, muted and lighter. */
        & .projectType-d29859a {
            font-family: var(--sans);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--accent);
            text-transform: uppercase;
            margin-top: -4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .genreRow-d29859a {
            margin-top: 2px;
            gap: 8px;
        }

        & .genre-d29859a {
            font-family: var(--sans);
            font-size: 10px;
            letter-spacing: 0.06em;
            color: var(--text-mute);
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1 1 auto;
            min-width: 0;
        }

        & .flags-d29859a {
            flex: 0 0 auto;
            font-size: 14px;
            line-height: 1;
        }

        & .footer-d29859a {
            gap: 10px;
            padding-top: 8px;
            border-top: 1px solid var(--border);

            & .statLabel-d29859a {
                color: var(--text-mute);
                font-size: 9.5px;
                letter-spacing: 0.1em;
                text-transform: uppercase;
            }

            & .value-d29859a {
                font-family: var(--sans);
                font-size: 16px;
                font-weight: 500;
                color: var(--text);
                margin-top: 2px;
            }

            & .footerRight-d29859a {
                text-align: right;

                & .roiValue-d29859a {
                    font-family: var(--sans);
                    font-size: 15px;
                    color: var(--good);
                    margin-top: 2px;
                }
            }
        }
    }
}

@keyframes card-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Outer wrapper for the shared media-listing preview body.
   Self-contained: scopes the media-exchange dark theme tokens and font
   families so the component renders correctly in any binary, even
   ones that don't ship the global [data-theme="media-exchange"]
   overrides (e.g. the ERP admin "Preview" tab). */
.body-911db2f {
    --bg: #faf7f8;
    --bg-2: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4eef0;
    --surface-3: #ece2e6;
    --border: #e9e1e4;
    --border-2: #d9ccd1;
    --text: #1e1419;
    --text-dim: #6d5b62;
    --text-mute: #9c8d92;
    --accent: #8e1f43;
    --accent-2: #a8345a;
    --accent-deep: #6e1733;
    --accent-soft: rgba(142, 31, 67, 0.1);
    --good: #11a86b;
    --serif: "Playfair Display", Georgia, serif;
    --sans:
        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --mono: var(--sans);

    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    /* Normalise inherited weight so a theme that bolds body text
       (e.g. Brutalist) doesn't bleed into the preview's body copy. */
    font-weight: 400;
    position: relative;
}

/* ---- Hero — poster left, details right, on a black/grey gradient band ---- */
.hero-911db2f {
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0e 0%, #1a1a20 55%, #2c2c34 100%);
}

.heroInner-911db2f {
    max-width: 1320px;
    margin: 0 auto;
    gap: 44px;
    padding: 48px 48px 56px;
}

.heroPoster-911db2f {
    width: 240px;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.heroPosterImg-911db2f {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.heroPosterPlaceholder-911db2f {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6e1733 0%, #8e1f43 55%, #a8345a 100%);
}

.heroContent-911db2f {
    flex: 1;
    min-width: 0;
    color: #fff;
}

.heroBadgeRow-911db2f {
    gap: 8px;
    margin-top: 12px;
}

.heroTag-911db2f {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.heroTitle-911db2f {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 600;
    margin: var(--space-2) 0 0;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
}

.heroLogline-911db2f {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin-top: var(--space-3);
    max-width: 620px;
}

.heroActions-911db2f {
    gap: 10px;
    margin-top: 22px;
}

.body-911db2f .btnPrimary-911db2f {
    padding: 16px 42px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    gap: var(--space-2);
    white-space: nowrap;
    text-decoration: none !important;
    transition: filter 0.15s ease;
}

.body-911db2f .btnPrimary-911db2f:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* ---- Inner content wrapper (below the hero) ---- */
.content-911db2f {
    max-width: 1320px;
    width: 100%;
    margin: var(--space-5) auto var(--space-0);
    padding: 0 48px 60px;
    position: relative;
    z-index: 5;
    flex: 1;
}

.statsBar-911db2f {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

.stat-911db2f {
    background: var(--surface);
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    padding: 16px 18px;
    gap: 6px;
    box-shadow: 0 8px 18px -10px rgba(142, 31, 67, 0.35);
}

.statLabel-911db2f {
    color: var(--text-mute);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.statValue-911db2f {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statSub-911db2f {
    font-size: 10.5px;
    color: var(--text-mute);
    font-family: var(--sans);
}

.statFlags-911db2f {
    margin-top: 2px;
    gap: 6px;
    font-size: 19px;
    line-height: 1.1;
}

.columns-911db2f {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.mainCol-911db2f {
    gap: var(--space-5);
}

.sideCol-911db2f {
    position: relative;
}

@media (max-width: 1100px) {
    .statsBar-911db2f {
        grid-template-columns: repeat(2, 1fr);
    }
    .columns-911db2f {
        grid-template-columns: 1fr;
    }
    .heroTitle-911db2f {
        font-size: 38px;
    }
    .heroInner-911db2f {
        flex-direction: column;
        padding: var(--space-8) var(--space-6) var(--space-10);
    }
    .heroPoster-911db2f {
        width: 200px;
    }
}

/* ---- Cards ---- */
.card-911db2f {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-6);
}

.body-911db2f .cardTitle-911db2f {
    margin: 0;
    font-size: 13px;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    color: var(--text-dim) !important;
    text-transform: uppercase;
}

.cardSerifBody-911db2f {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--text);
    margin: 14px 0 0;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

/* ---- Stills gallery ---- */
.galleryHead-911db2f {
    gap: 10px;
}

.galleryCount-911db2f {
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--text-mute);
}

.galleryGrid-911db2f {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: var(--space-4);
}

.galleryThumb-911db2f {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    padding: 0;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 0.15s ease;

    &:hover {
        border-color: var(--accent);
    }

    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.lightbox-911db2f {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 8, 0.92);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-10);
    animation: lightbox-fade 0.2s ease both;
}

@keyframes lightbox-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lightboxImg-911db2f {
    max-width: 90vw;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightboxClose-911db2f {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(22, 22, 28, 0.9);
    border: 1px solid var(--border-2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
}

.lightboxPosition-911db2f {
    position: absolute;
    bottom: 32px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-dim);
}

/* ---- Investment sidebar ---- */
.sidebar-911db2f {
    gap: var(--space-4);
    position: sticky;
    top: 84px;
}

.sidebarLabel-911db2f {
    color: var(--text-mute);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sidebarLabelSmall-911db2f {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}

.sidebarValueRow-911db2f {
    gap: 10px;
    margin-top: 6px;
}

.sidebarValue-911db2f {
    font-family: var(--sans);
    font-size: 36px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.015em;
}

.amountSection-911db2f {
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.body-911db2f .amountInput-911db2f {
    width: 100%;
    padding: 12px 14px;
    /* Nostalgia themes bare <input>; lock these so the field keeps the
       preview's dark styling under every theme. */
    background: var(--bg-2) !important;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text) !important;
    font-size: 15px;
    font-family: var(--sans) !important;
    outline: none;
}

.amountInput-911db2f:focus {
    border-color: var(--accent);
}

.presetRow-911db2f {
    gap: 6px;
    margin-top: 2px;
}

.preset-911db2f {
    flex: 1;
    padding: 6px 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    font-family: var(--sans);
}

.presetActive-911db2f {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.breakdown-911db2f {
    gap: var(--space-2);
    padding: 14px 0;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.breakdownRow-911db2f {
    font-size: 14px;
    gap: 10px;
    align-items: center;
}

.breakdownLabel-911db2f {
    color: var(--text-mute);
}

.breakdownValue-911db2f {
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.cta-911db2f {
    width: 100%;
    padding: 13px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    margin-top: var(--space-4);
    transition: filter 0.15s ease;

    &:hover {
        filter: brightness(1.1);
    }
}

.disclaimer-911db2f {
    font-size: 10.5px;
    color: var(--text-mute);
    text-align: center;
    line-height: 1.5;
    margin-top: var(--space-3);
}

.trustItem-911db2f {
    gap: 6px;

    & svg {
        color: var(--accent);
        flex-shrink: 0;
    }
}

/* ---- Detail tabs (About / Documents / Media) ---- */
.tabsCard-911db2f {
    margin-bottom: var(--space-5);
}

.tabBar-911db2f {
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-5);
}

.tab-911db2f {
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    transition:
        color 0.15s ease,
        border-color 0.15s ease;

    &:hover {
        color: var(--text);
    }
}

.tabActive-911db2f {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tabPanel-911db2f {
    gap: var(--space-5);
}

.aboutLogline-911db2f {
    margin: 14px 0 0;
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--text);
}

/* ---- Snapshot grid (Overview / About details): 3 rows × 2 columns ---- */
.snapshotGrid-911db2f {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
    margin-top: 14px;
}

.snapshotItem-911db2f {
    min-width: 0;
}

.snapshotLabel-911db2f {
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.snapshotValue-911db2f {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

/* ---- About-tab redirect cards (whole card is a button) ---- */
.body-911db2f .aboutRedirect-911db2f {
    cursor: pointer;
    text-align: left;
    gap: var(--space-3);
    transition: border-color 0.15s ease;

    &:hover {
        border-color: var(--accent);
    }
}

.aboutRedirectMeta-911db2f {
    font-size: 12px;
    color: var(--text-mute);
    flex-shrink: 0;
}

.mediaVideos-911db2f {
    gap: var(--space-3);
}

.mediaVideo-911db2f {
    width: 100%;
    border-radius: var(--radius);
    background: #000;
    display: block;
}

.tabEmpty-911db2f {
    margin: 0;
    padding: var(--space-6) 0;
    color: var(--text-mute);
    font-size: 14px;
}

/* ---- Documents list ---- */
.dataRoomList-911db2f {
    gap: 2px;
    margin-top: 14px;
}

.body-911db2f .dataRoomItem-911db2f {
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--text) !important;
    transition: background 0.15s ease;
}

.body-911db2f .dataRoomItem-911db2f:hover {
    background: var(--surface-2);
}

.dataRoomIcon-911db2f {
    color: var(--text-mute);
    flex-shrink: 0;
}

.dataRoomInfo-911db2f {
    flex: 1;
    min-width: 0;
}

.dataRoomName-911db2f {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataRoomSize-911db2f {
    font-size: 10px;
    font-family: var(--sans);
    color: var(--text-mute);
}

.dataRoomDownload-911db2f {
    color: var(--text-mute);
    flex-shrink: 0;
}

/* ---- Asset manager card ---- */
.assetManager-911db2f {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: var(--space-5);
    gap: var(--space-3);
}

.assetManagerAvatar-911db2f {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

.assetManagerInfo-911db2f {
    flex: 1;
    min-width: 0;
}

.assetManagerLabel-911db2f {
    color: var(--text-mute);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.assetManagerName-911db2f {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    margin-top: 3px;
}

/* The .related* classes live with the RelatedTitles component in
   bins/the_exchange (preview.css) — it composes around this body but
   stays out of the shared crate because the ERP preview tab doesn't
   render the "more titles" rail. */

/* ---- Lightbox prev/next chevrons ---- */
.lightboxNav-911db2f {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(22, 22, 28, 0.85);
    border: 1px solid var(--border-2);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;

    &:hover {
        background: rgba(22, 22, 28, 1);
        color: var(--accent);
    }
}

.lightboxNavPrev-911db2f {
    left: 24px;
}
.lightboxNavNext-911db2f {
    right: 24px;
}

.castWrap-911db2f {
    position: relative;
    margin-top: 14px;
}

.castScroller-911db2f {
    gap: var(--space-4);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: var(--space-1) 36px var(--space-2);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
        height: 0;
    }
}

.talentCard-911db2f {
    width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
    gap: 12px;
}

.talentAvatar-911db2f {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.talentInfo-911db2f {
    min-width: 0;
}

.talentName-911db2f {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.talentRole-911db2f {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.castNav-911db2f {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(30, 20, 25, 0.18);
    opacity: 0;
    transition:
        opacity 0.2s ease,
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;

    &:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }
}

.castNavPrev-911db2f {
    left: 0;
}
.castNavNext-911db2f {
    right: 0;
}

.castWrap-911db2f:hover .castNav-911db2f {
    opacity: 1;
}

@media (hover: none) {
    .castNav-911db2f {
        opacity: 1;
    }
}

.econSummary-911db2f {
    margin-top: 16px;
    gap: var(--space-5);
}

.econPriceBlock-911db2f {
    min-width: 0;
}

.econPrice-911db2f {
    font-family: var(--sans);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.econPriceSub-911db2f {
    margin-top: 6px;
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.econStats-911db2f {
    gap: var(--space-6);
}

.econStat-911db2f {
    text-align: right;
}

.econStatLabel-911db2f {
    font-size: 10.5px;
    color: var(--text-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.econStatValue-911db2f {
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

/* ---- Key risks accordion (Economics tab) ---- */
.riskList-911db2f {
    margin-top: 14px;
}

.riskItem-911db2f {
    border-top: 1px solid var(--border);

    &:last-child {
        border-bottom: 1px solid var(--border);
    }
}

.body-911db2f .riskHead-911db2f {
    width: 100%;
    padding: 12px 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    gap: 10px;
    color: var(--text);
    text-align: left;
    font-family: var(--sans);
}

.riskName-911db2f {
    font-size: 13.5px;
    font-weight: 500;
}

.riskChevron-911db2f {
    color: var(--text-mute);
    flex-shrink: 0;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.riskChevronOpen-911db2f {
    transform: rotate(180deg);
}

.riskBody-911db2f {
    padding: 0 2px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}


/* Media marketplace filter rail — search, facets, count, view toggle, sort.
   Burgundy/white (media-burgundy theme tokens). Sits just under the shared
   floating top nav. */

.rail-382776c {
    position: relative;
    z-index: 40;
    gap: 12px;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);

    & .search-382776c {
        height: 36px;
        padding: 0 14px;
        gap: 9px;
        border-radius: 999px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        width: 240px;
        max-width: 32vw;

        & .searchIcon-382776c {
            color: var(--text-mute);
        }

        & .searchInput-382776c {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text);
            font-family: var(--sans);
            font-size: 13px;
        }
    }

    & .facets-382776c {
        gap: 8px;
    }

    & .spacer-382776c {
        flex: 1;
    }

    & .count-382776c {
        color: var(--text-mute);
        font-size: 12.5px;
        white-space: nowrap;
    }

    & .viewToggle-382776c {
        flex-shrink: 0;
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: 999px;
        padding: 3px;

        & .viewBtn-382776c {
            gap: 6px;
            padding: 6px 13px;
            border-radius: 999px;
            cursor: pointer;
            border: none;
            font-size: 12.5px;
            font-weight: 600;
            white-space: nowrap;
            background: transparent;
            color: var(--text-mute);
            transition: background 160ms ease, color 160ms ease;

            &.viewBtnActive-382776c {
                background: var(--accent);
                color: #fff;
            }
        }
    }
}

.dropdown-382776c {
    position: relative;
    flex-shrink: 0;

    & .trigger-382776c {
        height: 36px;
        padding: 0 14px;
        background: var(--surface);
        border: 1px solid var(--border-2);
        border-radius: 999px;
        color: var(--text-dim);
        font-size: 13px;
        cursor: pointer;
        gap: 7px;
        white-space: nowrap;
        transition: border-color 160ms ease, color 160ms ease, background 160ms ease;

        &:hover {
            border-color: var(--accent);
            color: var(--text);
        }

        &.triggerActive-382776c {
            border-color: var(--accent);
            background: var(--accent);
            color: #fff;
        }

        & .chevron-382776c {
            opacity: 0.7;
        }
    }

    & .panel-382776c {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 20;
        min-width: 200px;
        max-height: 320px;
        overflow-y: auto;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 6px;
        box-shadow: 0 18px 48px rgba(30, 20, 25, 0.14);
        gap: 2px;

        & .option-382776c {
            width: 100%;
            padding: 9px 12px;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            background: transparent;
            border: none;
            color: var(--text);
            font-size: 13px;

            &:hover,
            &.optionActive-382776c {
                background: var(--accent-soft);
                color: var(--accent);
            }

            &.optionActive-382776c {
                font-weight: 600;
            }
        }
    }
}


/* Responsive results grid / stacked list for media listings. */

.grid-35a107b {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
    padding: 28px 28px 56px;
}

.list-35a107b {
    gap: 8px;
    padding: 24px 28px 56px;
}

.empty-35a107b {
    padding: 90px 20px;
    text-align: center;
    color: var(--text-mute);
    font-size: 14px;
}


.row-5f90c4b {
    display: grid;
    grid-template-columns: 84px 1fr 120px 150px 80px 160px 40px;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    animation: row-fade 0.35s ease both;

    &:hover {
        background: var(--surface-2);
        border-color: var(--accent);
    }

    & .poster-5f90c4b {
        position: relative;
        aspect-ratio: 2 / 3;
        border-radius: 6px;
        overflow: hidden;
        background: var(--bg-2);

        & .posterImg-5f90c4b {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        & .posterPlaceholder-5f90c4b {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--surface), var(--surface-2));
        }
    }

    & .main-5f90c4b {
        min-width: 0;

        & .topLine-5f90c4b {
            gap: 10px;
            margin-bottom: 4px;

            & .ticker-5f90c4b {
                font-family: var(--sans);
                font-size: 10.5px;
                color: var(--accent);
                letter-spacing: 0.08em;
            }
        }

        & .title-5f90c4b {
            font-family: var(--serif);
            font-size: 19px;
            font-weight: 500;
            color: var(--text);
            line-height: 1.15;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .sub-5f90c4b {
            color: var(--text-dim);
            font-size: 11.5px;
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    & .col-5f90c4b {
        gap: 4px;
        min-width: 0;

        & .colLabel-5f90c4b {
            font-size: 10px;
            color: var(--text-mute);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        & .colValueSerif-5f90c4b {
            font-family: var(--serif);
            font-size: 16px;
            font-weight: 500;
            color: var(--text);
        }

        & .roiValue-5f90c4b {
            font-family: var(--sans);
            font-size: 14px;
            color: var(--good);
        }
    }

    & .arrow-5f90c4b {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-dim);
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: color 0.15s ease;
    }

    &:hover .arrow-5f90c4b {
        color: var(--accent);
    }
}

@keyframes row-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}


.page-9db3a72 {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    position: relative;
}

.loadingContainer-9db3a72 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.emptyState-9db3a72 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    gap: 16px;
    color: var(--text-mute);
}

.emptyText-9db3a72 {
    font-size: 16px;
    margin: 0;
}

.errorContainer-9db3a72 {
    padding: 48px 28px;
}

.shelves-9db3a72 {
    padding-bottom: 32px;
}


/* Horizontal "shelf" of media cards (browse view). */

.shelf-fc32eb4 {
    margin-top: 40px;

    & .head-fc32eb4 {
        padding: 0 28px;
        margin-bottom: 16px;

        & .title-fc32eb4 {
            font-family: var(--serif);
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            letter-spacing: -0.015em;
            color: var(--text);
            text-transform: capitalize;
        }

        & .countLabel-fc32eb4 {
            font-family: var(--sans);
            font-size: 11.5px;
            color: var(--text-mute);
            letter-spacing: 0.06em;
        }
    }

    /* Holds the scroller and the absolutely-positioned prev/next arrows. */
    & .scrollerWrap-fc32eb4 {
        position: relative;

        & .scroller-fc32eb4 {
            padding: 6px 28px 10px;
            gap: 18px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x proximity;
            scroll-padding-left: 28px;
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
                height: 0;
            }

            & .cardSlot-fc32eb4 {
                width: 220px;
                flex-shrink: 0;
                scroll-snap-align: start;
            }
        }

        /* Netflix-style paging arrows — centred on the poster row, shown on hover. */
        & .navBtn-fc32eb4 {
            position: absolute;
            top: 165px;
            transform: translateY(-50%);
            z-index: 5;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid var(--border-2);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            display: grid;
            place-items: center;
            box-shadow: 0 6px 20px rgba(30, 20, 25, 0.18);
            opacity: 0;
            transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

            &:hover {
                background: var(--accent);
                color: #fff;
                border-color: var(--accent);
            }

            &.navPrev-fc32eb4 {
                left: 10px;
            }

            &.navNext-fc32eb4 {
                right: 10px;
            }
        }

        &:hover .navBtn-fc32eb4 {
            opacity: 1;
        }
    }
}

@media (hover: none) {
    .navBtn-fc32eb4 {
        opacity: 1;
    }
}


/* Media spotlight hero — black/grey gradient band, left portrait poster,
   right details. Mirrors the reference Media.html spotlight. */

.hero-79f9d3f {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0e 0%, #1a1a20 55%, #2c2c34 100%);

    & .inner-79f9d3f {
        max-width: 1100px;
        margin: 0;
        gap: 48px;
        padding: 52px 56px 72px;

        & .poster-79f9d3f {
            position: relative;
            width: 300px;
            flex-shrink: 0;
            aspect-ratio: 2 / 3;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.04);
            box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);

            & .posterImg-79f9d3f {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            & .posterPlaceholder-79f9d3f {
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #6e1733 0%, #8e1f43 55%, #a8345a 100%);
            }
        }

        & .details-79f9d3f {
            flex: 1;
            min-width: 0;
            color: #fff;

            & .eyebrow-79f9d3f {
                font-family: var(--sans);
                font-size: 12px;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.55);
                margin-bottom: 14px;

                & .eyebrowTag-79f9d3f {
                    color: var(--accent-2);
                    font-weight: 600;
                }
            }

            & .title-79f9d3f {
                font-family: var(--serif);
                font-size: clamp(36px, 5vw, 64px);
                font-weight: 600;
                line-height: 1;
                letter-spacing: -0.02em;
                color: #fff;
                margin: 0;
            }

            & .blurb-79f9d3f {
                margin-top: 14px;
                margin-bottom: 0;
                color: rgba(255, 255, 255, 0.62);
                font-size: 14px;
                line-height: 1.5;
                max-width: 560px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            & .metrics-79f9d3f {
                gap: 34px;
                margin-top: 26px;

                & .metric-79f9d3f {
                    min-width: 0;

                    & .metricLabel-79f9d3f {
                        font-size: 11.5px;
                        color: rgba(255, 255, 255, 0.5);
                        letter-spacing: 0.04em;
                        text-transform: uppercase;
                        margin-bottom: 4px;
                    }

                    & .metricValue-79f9d3f {
                        font-family: var(--sans);
                        font-size: 24px;
                        font-weight: 600;
                        color: #fff;
                    }
                }
            }

            & .actions-79f9d3f {
                gap: 12px;
                margin-top: 28px;

                & .cta-79f9d3f {
                    height: 46px;
                    padding: 0 26px;
                    border-radius: 999px;
                    background: var(--accent);
                    color: #fff;
                    font-family: var(--sans);
                    font-weight: 600;
                    font-size: 14.5px;
                    text-decoration: none;
                    border: 2px solid transparent;
                    transition: background 240ms ease;

                    &:hover {
                        background: var(--accent-deep);
                    }
                }
            }
        }
    }

    & .dots-79f9d3f {
        position: absolute;
        left: 56px;
        bottom: 28px;
        gap: 7px;

        & .dot-79f9d3f {
            width: 7px;
            height: 7px;
            border-radius: 4px;
            border: none;
            padding: 0;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.35);
            transition: all 280ms ease;

            &.dotActive-79f9d3f {
                width: 26px;
                background: var(--accent);
            }
        }
    }
}

@media (max-width: 820px) {
    .inner-79f9d3f {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 36px 24px 56px;
    }

    .poster-79f9d3f {
        width: 220px;
    }

    .dots-79f9d3f {
        left: 24px;
    }
}


.nav-9ad48bf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 22px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92),
        rgba(255, 255, 255, 0)
    );
    backdrop-filter: blur(8px);

    & .links-9ad48bf {
        display: flex;
        align-items: center;
        gap: 38px;
        margin-left: 48px;

        & .link-9ad48bf {
            font-size: 12px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--text-dim);
            font-weight: 500;
            transition: color 0.2s;

            &:hover {
                color: var(--brand-dark);
            }
        }

        & .cta-9ad48bf {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border-3);
            padding: 10px 20px;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 500;
            border-radius: 2px;
            transition: all 0.25s;
            cursor: pointer;

            &:hover {
                border-color: var(--brand-dark);
                background: rgba(1, 31, 69, 0.04);
            }
        }
    }
}

@media (max-width: 720px) {
    .nav-9ad48bf {
        padding: 18px 24px;
    }

    .links-9ad48bf {
        gap: 18px;
        margin-left: 16px;
    }

    .link-9ad48bf {
        display: none;
    }
}


/* The platform — three market cards on a white panel that rounds off
   into the cream below. Cards keep the hover morph (radius morph +
   lift + photo zoom + sky border), all CSS-only. */

.pillars-c736f00 {
    background: var(--color-surface);
    border-radius: 0 0 64px 64px;
}

.container-c736f00 {
    max-width: 1320px;
    margin: 0 auto;
    padding: 116px 28px 128px;
}

.head-c736f00 {
    max-width: 680px;
    margin: 0 auto 60px;
    text-align: center;
}

.eyebrowAccent-c736f00 {
    color: var(--site-orange-600);
}

.title-c736f00 {
    font-size: clamp(36px, 5vw, 70px);
    margin: 14px 0 14px;
    padding-bottom: 0.06em; /* room for Playfair descenders */
    color: var(--color-text);
}

.lead-c736f00 {
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
    text-wrap: pretty;
}

.grid-c736f00 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.cardWrap-c736f00 {
    display: flex;
}

.card-c736f00 {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    display: flex;
    flex-direction: column;
    transition:
        border-radius 560ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 320ms ease;
}

/* At rest the row reads as one band — only the outer bottom corners are
   swept (first card bottom-left, last card bottom-right). */
.cardWrap-c736f00:first-child .card-c736f00 {
    border-radius: 0 0 0 80px;
}

.cardWrap-c736f00:last-child .card-c736f00 {
    border-radius: 0 0 80px 0;
}

.cardWrap-c736f00 .card-c736f00:hover {
    border-radius: 96px 16px 16px 16px;
    transform: translateY(-8px);
    box-shadow: 0 26px 60px -18px rgba(1, 31, 69, 0.3);
    border-color: #aeb6c2;
}

.photoWrap-c736f00 {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #1c2e7e; /* dark-blue panels pinned, not navy-800 */
}

.photo-c736f00 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card-c736f00:hover .photo-c736f00 {
    transform: scale(1.06);
}

/* legibility gradient over the photo bottom */
.shade-c736f00 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 17, 42, 0.5) 0%,
        rgba(0, 17, 42, 0.05) 38%,
        transparent 60%
    );
}

.badge-c736f00 {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.body-c736f00 {
    padding: 28px 30px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.name-c736f00 {
    font-size: clamp(22px, 2vw, 27px);
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.desc-c736f00 {
    font-size: 15.5px;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 14px 0 26px;
    flex: 1;
}

.footerRow-c736f00 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Live markets have no "Notify me" label — keep the lone arrow on the right. */
.footerRowSolo-c736f00 {
    justify-content: flex-end;
}

.notify-c736f00 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
}

/* card hover pre-fills the arrow (tag-targeted through the wrapper so
   we never reference arrow.css's hashed classes from here) */
.card-c736f00:hover .footerRow-c736f00 a {
    border-color: var(--color-text);
}

.card-c736f00:hover .footerRow-c736f00 a svg {
    color: #fff;
}

.card-c736f00:hover .footerRow-c736f00 a > span {
    transform: scale(1);
}

@media (max-width: 920px) {
    .grid-c736f00 {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 480px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .container-c736f00 {
        padding: 72px 22px 84px;
    }

    .pillars-c736f00 {
        border-radius: 0 0 40px 40px;
    }
}


.card-d832209 {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 22px;
}

.heading-d832209 {
    font-family: var(--font-title);
    font-size: 19px;
    margin: 0 0 16px;
    color: var(--color-brand);
}

.grid2-d832209 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.label-d832209 {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: 7px;
}

.field-d832209 {
    height: 42px;
    width: 100%;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    background: #fff;
    color: var(--color-text);
    font-size: 14px;
    box-sizing: border-box;
    appearance: textfield;
}

.field-d832209::-webkit-outer-spin-button,
.field-d832209::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.suffixWrap-d832209 {
    position: relative;
}

.suffix-d832209 {
    position: absolute;
    right: 12px;
    top: 11px;
    font-size: 13px;
    color: var(--color-text-subtle);
    pointer-events: none;
}

.cashflowGrid-d832209 {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkRow-d832209 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.inflationRow-d832209 {
    margin-top: 16px;
}

.assetsHead-d832209 {
    margin-top: 20px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.labelInline-d832209 {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.equalize-d832209 {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: var(--site-orange-600);
    font-weight: 600;
}

.empty-d832209 {
    font-size: 12.5px;
    color: var(--color-text-subtle);
    padding: 12px 0;
}

.totalRow-d832209 {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;
    border-top: 1px solid var(--color-border);
}

.totalLabel-d832209 {
    font-size: 12px;
    color: var(--color-text-muted);
}

.totalValue-d832209 {
    font-size: 14px;
    font-weight: 700;
    color: var(--site-orange-600);
}

.run-d832209 {
    margin-top: 18px;
    width: 100%;
    height: 52px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, #fbb377 0%, #f2944c 100%);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    transition: filter 160ms;
}

.run-d832209:hover {
    filter: brightness(1.05);
}

.run-d832209:disabled {
    background: var(--color-surface-2);
    color: var(--color-text-subtle);
    cursor: default;
    filter: none;
}


/* Page wrapper for the public /media-listing/:pk route. Provides the
   full-viewport dark backdrop + dotted noise overlay; the shared
   `MediaDetailsBody` renders the hero and content within. */
.page-fb200c4 {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    position: relative;

    &::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(
            circle at 1px 1px,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 0
        );
        background-size: 3px 3px;
        z-index: 100;
        mix-blend-mode: screen;
    }
}

/* ---- Related titles rail (under the body) ---- */
.relatedSection-fb200c4 {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 48px 60px;

    & .relatedHeading-fb200c4 {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 500;
        margin: 0;
        letter-spacing: -0.01em;
        color: var(--text);
    }

    & .relatedGrid-fb200c4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
        margin-top: var(--space-4);

        & .relatedCard-fb200c4 {
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            display: block;

            &:hover .relatedPoster-fb200c4 {
                border-color: var(--accent);
            }

            &:hover .relatedPosterImg-fb200c4 {
                transform: scale(1.04);
            }

            & .relatedPoster-fb200c4 {
                aspect-ratio: 2 / 3;
                border-radius: 10px;
                overflow: hidden;
                border: 1px solid var(--border);
                position: relative;
                background: var(--surface);
                transition: border-color 0.18s ease;

                & .relatedPosterImg-fb200c4 {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                }

                & .relatedPosterPlaceholder-fb200c4 {
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(135deg, var(--surface), var(--surface-2));
                }

                & .relatedPosterOverlay-fb200c4 {
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(to top, rgba(10, 10, 14, 0.85) 0%, transparent 40%);
                    pointer-events: none;
                }

                & .relatedPosterTitle-fb200c4 {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    right: 10px;
                    color: #fff;
                    font-family: var(--serif);
                    font-size: 15px;
                    font-weight: 500;
                    line-height: 1.2;
                }
            }

            & .relatedFooter-fb200c4 {
                margin-top: var(--space-2);
                font-size: 11px;
                font-family: var(--sans);

                & .relatedTicker-fb200c4 {
                    color: var(--accent);
                    letter-spacing: 0.08em;
                }

                & .relatedPrice-fb200c4 {
                    color: var(--text-dim);
                }
            }
        }
    }
}

@media (max-width: 900px) {
    .relatedGrid-fb200c4 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Responsive results grid. */

.grid-84b5bf6 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
    padding: 28px 32px 48px;
}

.empty-84b5bf6 {
    padding: 90px 20px;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 14px;
}


/* Properties marketplace page — cream/orange theme.
   Re-point the (otherwise blue) accent to the marketplace orange for this
   page's whole subtree; child components read `var(--color-accent)`. */

.page-911594b {
    --color-accent: var(--site-orange-600);
    --color-accent-hover: var(--site-orange);
    --color-accent-tint: var(--site-orange-tint, rgba(254, 168, 107, 0.16));

    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

.loading-911594b {
    flex: 1;
    min-height: 60vh;
}

.empty-911594b {
    flex: 1;
    min-height: 60vh;
    gap: 16px;
    padding: 96px 24px;
    text-align: center;
    color: var(--color-text-subtle);
    font-size: 16px;
}

.error-911594b {
    padding: 48px 28px;
}

.shelves-911594b {
    padding-bottom: 32px;
}

.mapSplit-911594b {
    border-top: 1px solid var(--color-border);
    /* Map view sits below the 120px nav+sub-header; shrunk by 25%. */
    height: calc((100vh - 120px) * 0.75);
    min-height: 420px;
}

.mapList-911594b {
    width: 420px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-bg);
}

.mapPane-911594b {
    position: relative;
    flex: 1;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .mapSplit-911594b {
        flex-direction: column;
        height: auto;
    }

    .mapList-911594b {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .mapPane-911594b {
        height: 390px;
    }
}


/* Property card — cream/orange marketplace theme. */

.card-730539a {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(16, 38, 76, 0.05);
    transition:
        transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 240ms ease;

    &:hover,
    &.cardHovered-730539a {
        transform: translateY(-6px);
        border-color: var(--color-border-strong);
        box-shadow: 0 22px 50px -20px rgba(1, 31, 69, 0.28);
    }

    & .imageWrap-730539a {
        position: relative;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--color-surface-2);

        & .cover-730539a {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
        }

        & .overlay-730539a {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(to top, rgba(0, 17, 42, 0.5) 0%, rgba(0, 17, 42, 0.05) 32%, transparent 55%);
        }

        & .placeholder-730539a {
            width: 100%;
            height: 100%;
            color: var(--color-text-subtle);
            opacity: 0.5;
        }

        & .badge-730539a {
            position: absolute;
            bottom: 12px;
            left: 12px;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--site-orange);
            color: var(--exc-ink-900, #0e1726);
            font-family: var(--font-display);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
    }

    &:hover .cover-730539a,
    &.cardHovered-730539a .cover-730539a {
        transform: scale(1.06);
    }

    & .body-730539a {
        padding: 16px 18px 18px;
        gap: 12px;

        & .name-730539a {
            font-family: var(--font-title);
            margin: 0;
            font-size: 19px;
            font-weight: 600;
            color: var(--color-text);
            line-height: 1.2;
            letter-spacing: -0.01em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & .location-730539a {
            gap: 5px;
            margin-top: 5px;
            color: var(--color-text-subtle);
            font-size: 13px;

            & svg {
                color: var(--color-accent);
                flex-shrink: 0;
            }
        }

        & .footer-730539a {
            padding-top: 12px;
            border-top: 1px solid var(--color-border);

            & .statLabel-730539a {
                color: var(--color-text-subtle);
                font-size: 11px;
                letter-spacing: 0.04em;
            }

            & .value-730539a {
                font-family: var(--font-title);
                font-size: 22px;
                font-weight: 600;
                color: var(--color-text);
                letter-spacing: -0.01em;
                margin-top: 2px;
            }

            & .footerRight-730539a {
                text-align: right;
                gap: 4px;

                & .yieldValue-730539a {
                    font-family: var(--font-data);
                    font-size: 13px;
                    font-weight: 600;
                    color: var(--color-accent);
                }

                & .meta-730539a {
                    font-family: var(--font-data);
                    font-size: 11.5px;
                    color: var(--color-text-muted);
                }
            }
        }
    }
}


.body-eb1aff9 {
    --bg: #f7f9fc;
    --surface: #ffffff;
    --surface-2: #eff2f7;
    --surface-inverse: #011f45;
    --text: #0e1726;
    --text-muted: #5b6577;
    --text-subtle: #7a8499;
    --border: #e2e7ef;
    --border-strong: #cbd2de;
    --brand: #011f45;
    --brand-strong: #00132c;
    --accent: #2c68b0;
    --accent-hover: #1e4e8c;
    --accent-tint: #e2edfa;
    --brand-blue: #609ddf;
    --gold: #e3a82f;
    --up: #11a86b;
    --down: #e0473d;
    --display: "Poppins", system-ui, -apple-system, sans-serif;
    --sans: "Poppins", system-ui, -apple-system, sans-serif;
    --mono: "Poppins", ui-monospace, "SF Mono", monospace;

    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-weight: 400;
    position: relative;
}

.body-eb1aff9 :is(h1, h2, h3, h4) {
    font-family: var(--display);
    color: var(--text);
    letter-spacing: -0.015em;
    margin: 0;
}

/* ---- Page container ---- */
.main-eb1aff9 {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 26px 28px 8px;
    flex: 1 0 auto;
}

/* ---- Gallery ---- */
.galleryGrid-eb1aff9 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    height: clamp(320px, 42vw, 480px);

    &.galleryGridSingle-eb1aff9 {
        grid-template-columns: 1fr;
    }
}

.hero-eb1aff9 {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.heroImg-eb1aff9 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    padding: 0;
    cursor: zoom-in;
    background: var(--surface-2);
}

.heroPlaceholder-eb1aff9 {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-subtle);
    font-size: 13px;
    background: radial-gradient(
        120% 120% at 50% -10%,
        #0a2c5e 0%,
        #011f45 60%,
        #00132c 100%
    );
    color: rgba(255, 255, 255, 0.7);
}

.chip-eb1aff9 {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--brand);
    text-transform: uppercase;
}

.heroOverlay-eb1aff9 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 64px 24px 20px;
    background: linear-gradient(
        to top,
        rgba(0, 17, 42, 0.82) 0%,
        rgba(0, 17, 42, 0.5) 38%,
        rgba(0, 17, 42, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.body-eb1aff9 .heroName-eb1aff9 {
    color: #fff;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.heroLoc-eb1aff9 {
    gap: 7px;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
}

.dots-eb1aff9 {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    gap: 6px;
    z-index: 4;
}

.dot-eb1aff9 {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(0, 19, 44, 0.35);
    cursor: pointer;
    transition: width 0.25s ease;

    &.dotActive-eb1aff9 {
        width: 18px;
        background: #fff;
    }
}

.thumbCol-eb1aff9 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    min-height: 0;
}

.thumb-eb1aff9 {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    background: var(--surface-2);
}

.thumbImg-eb1aff9 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Lightbox ---- */
.lightbox-eb1aff9 {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 24, 0.92);
    backdrop-filter: blur(10px);
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 40px;
    animation: pdLightboxFade 0.2s ease both;
}

@keyframes pdLightboxFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lightboxImg-eb1aff9 {
    max-width: 90vw;
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.lightboxClose-eb1aff9 {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-strong);
    color: var(--brand);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
}

.lightboxNav-eb1aff9 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-strong);
    color: var(--brand);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;

    &.lightboxNavPrev-eb1aff9 {
        left: 24px;
    }

    &.lightboxNavNext-eb1aff9 {
        right: 24px;
    }
}

.lightboxPosition-eb1aff9 {
    position: absolute;
    bottom: 30px;
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- Spec strip ---- */
.specStrip-eb1aff9 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-top: 30px;
}

.spec-eb1aff9 {
    align-items: center;
    gap: 10px;
}

.specIcon-eb1aff9 {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--brand);
}

.specVal-eb1aff9 {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.specLabel-eb1aff9 {
    font-size: 11.5px;
    color: var(--text-subtle);
    margin-top: 2px;
}

/* ---- Two-column layout ---- */
.layout-eb1aff9 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 30px;
    align-items: start;
    margin-top: 28px;
}

.mainCol-eb1aff9 {
    min-width: 0;
    gap: 22px;
}

.sideCol-eb1aff9 {
    min-width: 0;
}

/* ---- Tabs ---- */
.tabBar-eb1aff9 {
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.tab-eb1aff9 {
    padding: 12px 18px;
    margin-bottom: -1px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-muted);
    transition:
        color 0.15s ease,
        border-color 0.15s ease;

    &:hover {
        color: var(--text);
    }

    &.tabActive-eb1aff9 {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }
}

.tabPanel-eb1aff9 {
    gap: 22px;
}

/* ---- Cards + section titles ---- */
.card-eb1aff9 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 30px;
}

.secKicker-eb1aff9 {
    font-family: var(--display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.body-eb1aff9 .secTitle-eb1aff9 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 18px;
}

.bodyText-eb1aff9 {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
    text-wrap: pretty;
}

.empty-eb1aff9 {
    margin: 0;
    color: var(--text-subtle);
    font-size: 14px;
    font-style: italic;
}

/* ---- At-a-glance grid ---- */
.glanceGrid-eb1aff9 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.glanceItem-eb1aff9 {
    padding: 15px 16px;
    border-radius: 12px;
    background: var(--surface-2);
}

.glanceLabel-eb1aff9 {
    font-size: 12px;
    color: var(--text-subtle);
}

.glanceVal-eb1aff9 {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---- Key facts table ---- */
.facts-eb1aff9 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}

.factRow-eb1aff9 {
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.factLabel-eb1aff9 {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

.factVal-eb1aff9 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    overflow-wrap: anywhere;
}

.factValMuted-eb1aff9 {
    color: var(--text-subtle);
    font-weight: 400;
}

.body-eb1aff9 .factLink-eb1aff9 {
    color: var(--accent);
    text-decoration: none;

    &:hover {
        color: var(--accent-hover);
    }
}

.chipRow-eb1aff9 {
    gap: 8px;
}

.typeChip-eb1aff9 {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

/* ---- Location card ---- */
.locCard-eb1aff9 {
    padding: 0;
    overflow: hidden;
}

.locHead-eb1aff9 {
    padding: 30px 30px 0;
}

.mapFrame-eb1aff9 {
    position: relative;
    height: 260px;
    margin-top: 8px;
    background: linear-gradient(160deg, #eef2f4 0%, #e6edf1 100%);
}

.mapSvg-eb1aff9 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mapDots-eb1aff9 {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        rgba(1, 31, 69, 0.05) 1px,
        transparent 1px
    );
    background-size: 26px 26px;
    pointer-events: none;
}

.mapPin-eb1aff9 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
}

.mapPinLabel-eb1aff9 {
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 10px 24px -8px rgba(1, 31, 69, 0.5);
    white-space: nowrap;
}

.mapCaption-eb1aff9 {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-subtle);
    background: rgba(255, 255, 255, 0.72);
    padding: 4px 9px;
    border-radius: 6px;
}

/* ---- Documents ---- */
.body-eb1aff9 .docItem-eb1aff9 {
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background: var(--surface-2);
    }
}

.docIcon-eb1aff9 {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-tint);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--accent);
}

.docName-eb1aff9 {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docExt-eb1aff9 {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.docArrow-eb1aff9 {
    color: var(--text-subtle);
    flex-shrink: 0;
}

/* ---- Sidebar ---- */
.sidebar-eb1aff9 {
    position: sticky;
    top: 92px;
    gap: 16px;
}

.valCard-eb1aff9 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px -28px rgba(1, 31, 69, 0.35);
}

.valHead-eb1aff9 {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border);
}

.valLabel-eb1aff9 {
    font-size: 12px;
    color: var(--text-subtle);
    letter-spacing: 0.04em;
}

.body-eb1aff9 .valAmount-eb1aff9 {
    font-family: var(--mono);
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;

    &.valAmountSmall-eb1aff9 {
        font-size: 22px;
    }
}

.valHint-eb1aff9 {
    font-size: 12px;
    color: var(--text-subtle);
    margin-top: 4px;
}

.valBody-eb1aff9 {
    padding: 18px 24px 4px;
}

.miniRow-eb1aff9 {
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);

    &:last-child {
        border-bottom: none;
    }
}

.miniLabel-eb1aff9 {
    font-size: 13.5px;
    color: var(--text-muted);
}

.miniVal-eb1aff9 {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.valFooter-eb1aff9 {
    padding: 18px 24px 24px;
}

.body-eb1aff9 .cta-eb1aff9 {
    width: 100%;
    height: 50px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    gap: 9px;
    text-decoration: none;
    transition: background 0.15s ease;

    &:hover {
        background: var(--accent-hover);
        color: #fff;
    }
}

.ctaNote-eb1aff9 {
    gap: 7px;
    margin-top: 14px;
    color: var(--text-subtle);
    font-size: 12px;
}

/* "Listed by" card */
.listedBy-eb1aff9 {
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
}

.listedAvatar-eb1aff9 {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand));
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 700;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.listedInfo-eb1aff9 {
    flex: 1;
    min-width: 0;
}

.listedLabel-eb1aff9 {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.listedName-eb1aff9 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-top: 3px;
    overflow-wrap: anywhere;
}

/* ---- Responsive ---- */
@media (max-width: 1020px) {
    .layout-eb1aff9 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar-eb1aff9 {
        position: static;
    }
}

@media (max-width: 760px) {
    .galleryGrid-eb1aff9 {
        grid-template-columns: 1fr;
        height: auto;
    }

    .thumbCol-eb1aff9 {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
        height: 160px;
    }

    .facts-eb1aff9 {
        grid-template-columns: 1fr;
    }

    .main-eb1aff9 {
        padding: 20px 16px 8px;
    }
}


/* Split-view right pane: Leaflet map container */

.mapContainer-5aba9c9 {
    width: 100%;
    height: 100%;
    display: block;
}

.popupWrap-5aba9c9 {
    position: absolute;
    z-index: 500;
    transform: translate(-50%, calc(-100% - 28px));
    pointer-events: auto;
    max-width: calc(100% - 24px);
}


.loadingScreen-ac2cce5 {
    position: fixed;
    inset: 0;
    background: #faf7f5;
}


.wrap-e111b3c {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.svg-e111b3c {
    transform: rotate(-90deg);
    display: block;
}

.track-e111b3c {
    stroke: var(--border);
}

.arc-e111b3c {
    transition: stroke-dashoffset 0.4s ease;
}

.label-e111b3c {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--mono);
}


.sectionLabel-558bbbe {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    justify-content: flex-start;

    &.centered-558bbbe {
        justify-content: center;
    }

    & .num-558bbbe {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--text-mute);
    }

    & .rule-558bbbe {
        width: 32px;
        height: 1px;
        background: var(--border-2);
    }

    & .label-558bbbe {
        font-size: 11px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--text-dim);
        font-weight: 500;
    }
}


.seg-cca6ba8 {
    display: flex;
    background: var(--color-surface-2);
    border-radius: 4px;
    padding: 3px;
    gap: 3px;
}

.opt-cca6ba8 {
    flex: 1;
    height: 34px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--color-text-muted);
    transition: all 160ms;
}

.active-cca6ba8 {
    background: #fff;
    color: var(--site-orange-600);
    box-shadow: 0 1px 3px rgba(14, 23, 38, 0.12);
}


/* Horizontal "shelf" of property cards (browse view). */

.shelf-7d94e7a {
    margin-top: 40px;

    & .head-7d94e7a {
        padding: 0 32px;
        margin-bottom: 16px;

        & .title-7d94e7a {
            font-family: var(--font-title);
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            letter-spacing: -0.015em;
            color: var(--color-text);
        }

        & .countLabel-7d94e7a {
            font-family: var(--font-data);
            font-size: 11.5px;
            color: var(--color-text-subtle);
            letter-spacing: 0.06em;
        }
    }

    & .scroller-7d94e7a {
        padding: 6px 32px 10px;
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-left: 32px;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
            height: 0;
        }

        & .cardSlot-7d94e7a {
            width: 300px;
            flex-shrink: 0;
            scroll-snap-align: start;
        }
    }
}


/* Sign-up / early access — charcoal card on cream, orange accents. Sits
   tight under the journey panel (8px gap, matching the reference). */

.signUp-800caff {
    background: var(--site-cream);
    padding: 8px 28px 112px;

    & .panel-800caff {
        max-width: 1320px;
        margin: 0 auto;
        background: var(--site-charcoal-grad);
        border-radius: var(--radius-2xl);
        padding: 52px;
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        gap: 56px;
        position: relative;
        overflow: hidden;

        & .intro-800caff {
            position: relative;

            & .eyebrowAccent-800caff {
                color: var(--site-orange);
            }

            & .title-800caff {
                color: #fff;
                font-size: clamp(34px, 5.5vw, 70px);
                margin: 12px 0 14px;
                padding-bottom: 0.06em; /* room for Playfair descenders */
            }

            & .lead-800caff {
                color: rgba(255, 255, 255, 0.72);
                font-size: 16px;
                line-height: 1.6;
                margin: 0;
                max-width: 360px;
            }

            & .community-800caff {
                margin-top: 28px;

                & .communityLabel-800caff {
                    color: rgba(255, 255, 255, 0.5);
                    margin-bottom: 12px;
                }

                & .socials-800caff {
                    display: flex;
                    gap: 10px;

                    & .socialLink-800caff {
                        width: 40px;
                        height: 40px;
                        border-radius: var(--radius-sm);
                        border: 1px solid rgba(255, 255, 255, 0.16);
                        display: grid;
                        place-items: center;
                        color: #fff;
                        transition:
                            background var(--duration-fast),
                            border-color var(--duration-fast);

                        &:hover {
                            background: var(--site-orange-tint);
                            border-color: var(--site-orange);
                            color: #fff;
                        }
                    }
                }
            }
        }

        & .formWrap-800caff {
            position: relative;

            & .form-800caff {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                margin-top: 60px;

                & .field-800caff {
                    height: 46px;
                    padding: 0 14px;
                    border-radius: var(--radius-sm);
                    border: 1px solid rgba(255, 255, 255, 0.16);
                    background: rgba(255, 255, 255, 0.06);
                    color: #fff;
                    font-family: var(--font-body);
                    font-size: 15px;
                    outline: none;
                    width: 100%;

                    &::placeholder {
                        color: rgba(255, 255, 255, 0.45);
                    }

                    &:focus-visible {
                        border-color: var(--site-orange);
                        box-shadow: 0 0 0 3px rgba(254, 168, 107, 0.3);
                    }

                    &.textarea-800caff {
                        height: 96px;
                        padding: 12px 14px;
                        resize: vertical;
                    }

                    &.spanFull-800caff {
                        grid-column: 1 / -1;
                    }
                }

                & .error-800caff {
                    grid-column: 1 / -1;
                    color: var(--exc-down-100);
                    font-size: 13.5px;
                    margin: 0;
                }

                & .submitRow-800caff {
                    grid-column: 1 / -1;
                    margin-top: 4px;
                }
            }

            /* success state */
            & .success-800caff {
                height: 100%;
                min-height: 280px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 14px;

                & .successBadge-800caff {
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    background: var(--color-up);
                    display: grid;
                    place-items: center;
                    color: #fff;
                }

                & .successTitle-800caff {
                    color: #fff;
                    font-size: 24px;
                    margin: 0;
                }

                & .successText-800caff {
                    color: rgba(255, 255, 255, 0.7);
                    margin: 0;
                }
            }
        }
    }
}

@media (max-width: 980px) {
    .panel-800caff {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px 26px;
    }

    .signUp-800caff {
        padding: 8px 16px 72px;
    }
}

@media (max-width: 560px) {
    .form-800caff {
        grid-template-columns: 1fr;
    }
}


/* Spotlight hero — full-bleed rotating flagship listings. */

.hero-83554ad {
    position: relative;
    height: 574px;
    overflow: hidden;
    background: #14161b;

    & .slides-83554ad {
        position: absolute;
        inset: 0;

        & .slide-83554ad {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 900ms ease;

            &.slideActive-83554ad {
                opacity: 1;
            }

            & .slideImg-83554ad {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            & .slidePlaceholder-83554ad {
                width: 100%;
                height: 100%;
                background: var(--site-charcoal-grad, linear-gradient(135deg, #0a0a0c 0%, #2b2e33 60%, #4a4f57 100%));
            }
        }
    }

    & .scrim-83554ad {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(10, 11, 14, 0.45) 0%,
            transparent 26%,
            transparent 48%,
            rgba(10, 11, 14, 0.82) 90%,
            #14161b 100%
        );
    }

    & .content-83554ad {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 76px;
        padding: 0 56px;
        max-width: 760px;
        color: #fff;

        & .title-83554ad {
            font-family: var(--font-title);
            font-size: clamp(40px, 6vw, 74px);
            font-weight: 600;
            margin: 0;
            letter-spacing: -0.025em;
            line-height: 0.98;
            color: #fff;
        }

        & .location-83554ad {
            gap: 7px;
            margin-top: 16px;
            color: rgba(255, 255, 255, 0.82);
            font-size: 15px;

            & svg {
                color: var(--site-orange);
                flex-shrink: 0;
            }
        }

        & .metrics-83554ad {
            gap: 32px;
            margin-top: 26px;

            & .metric-83554ad {
                min-width: 0;

                & .metricLabel-83554ad {
                    font-size: 11.5px;
                    color: rgba(255, 255, 255, 0.55);
                    letter-spacing: 0.04em;
                    margin-bottom: 4px;
                    text-transform: uppercase;
                }

                & .metricValue-83554ad {
                    font-family: var(--font-data);
                    font-size: 24px;
                    font-weight: 600;
                    color: #fff;
                }
            }
        }

        & .cta-83554ad {
            margin-top: 30px;
            height: 48px;
            padding: 0 28px;
            border-radius: 999px;
            background: linear-gradient(180deg, #fbb377 0%, #f2944c 100%);
            color: #fff;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            border: 2px solid transparent;
            transition:
                background 360ms ease,
                color 360ms ease,
                border-color 360ms ease;

            &:hover {
                background: linear-gradient(180deg, #ffffff 0%, #fff7f0 100%);
                color: #f2944c;
                border-color: #f2944c;
            }
        }
    }

    & .dots-83554ad {
        position: absolute;
        right: 56px;
        bottom: 84px;
        gap: 7px;

        & .dot-83554ad {
            width: 7px;
            height: 7px;
            border-radius: 4px;
            border: none;
            padding: 0;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.4);
            transition: all 320ms ease;

            &.dotActive-83554ad {
                width: 26px;
                background: #fff;
            }
        }
    }
}

@media (max-width: 720px) {
    .content-83554ad {
        padding: 0 24px;
        bottom: 56px;
    }

    .dots-83554ad {
        right: 24px;
        bottom: 64px;
    }

    .metrics-83554ad {
        gap: 20px;
    }
}


.tiles-d8ad138 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.tile-d8ad138 {
    background: var(--color-surface-2);
    border-radius: 14px;
    padding: 16px 18px;
}

.tileLabel-d8ad138 {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.tileValue-d8ad138 {
    font-family: var(--font-title);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
}

.numUp-d8ad138 {
    color: #11a86b;
}
.numBlue-d8ad138 {
    color: #2c68b0;
}
.numGold-d8ad138 {
    color: #e3a82f;
}
.numBrand-d8ad138 {
    color: var(--color-brand);
}

.tableWrap-d8ad138 {
    overflow-x: auto;
}

.table-d8ad138 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 540px;
}

.headRow-d8ad138 th {
    color: var(--color-text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 10px;
}

.th-d8ad138 {
    text-align: right;
}

.thLeft-d8ad138 {
    text-align: left;
}

.tr-d8ad138 {
    border-top: 1px solid var(--color-border);
}

.metricCell-d8ad138 {
    padding: 11px 0;
    color: var(--color-text);
}

.pcell-d8ad138 {
    text-align: right;
    color: var(--color-text-muted);
    padding: 11px 0;
}

.p50-d8ad138 {
    text-align: right;
    font-weight: 700;
    color: var(--color-brand);
    padding: 11px 0;
}

.note-d8ad138 {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--color-text-subtle);
}


.bar-69092dc {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2px;
}

.tab-69092dc {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px 14px;
    margin-right: 24px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color 160ms;
}

.tab-69092dc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2.5px;
    border-radius: 2px;
    background: transparent;
}

.active-69092dc {
    color: var(--site-orange-600);
    font-weight: 700;
}

.active-69092dc::after {
    background: var(--site-orange-600);
}


.section-697a757 {
    padding: 140px 56px;
    position: relative;
    overflow: hidden;

    & .glow-697a757 {
        position: absolute;
        top: 20%;
        right: -20%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
            circle,
            rgba(217, 165, 79, 0.06),
            transparent 60%
        );
        filter: blur(50px);
        pointer-events: none;
    }

    & .inner-697a757 {
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: start;
        position: relative;

        & .title-697a757 {
            font-family: var(--serif);
            font-size: clamp(40px, 5vw, 72px);
            font-weight: 400;
            line-height: 1.05;
            letter-spacing: -0.02em;
            margin: 0 0 32px;
            color: var(--text);

            & .titleEm-697a757 {
                font-style: italic;
                font-weight: 400;
                color: var(--gold);
            }
        }

        & .lead-697a757 {
            font-size: 18px;
            color: var(--text-dim);
            font-weight: 300;
            max-width: 480px;
            margin: 0;
            line-height: 1.6;

            & + .lead-697a757 {
                margin-top: 24px;
            }
        }

        & .stack-697a757 {
            display: grid;
            gap: 16px;

            & .row-697a757 {
                display: grid;
                grid-template-columns: 160px 1fr auto;
                align-items: center;
                gap: 24px;
                padding: 24px 28px;
                border: 1px solid var(--border);
                background: var(--bg-2);
                border-radius: 4px;

                & .rowLabel-697a757 {
                    font-size: 11px;
                    letter-spacing: 0.18em;
                    text-transform: uppercase;
                    color: var(--text-mute);
                }

                & .rowBody-697a757 {
                    font-size: 13px;
                    color: var(--text-dim);
                    font-weight: 300;
                }

                & .rowValue-697a757 {
                    font-family: var(--serif);
                    font-size: 28px;
                    font-weight: 500;
                    color: var(--gold);
                    letter-spacing: -0.01em;
                }
            }
        }
    }
}

@media (max-width: 980px) {
    .section-697a757 {
        padding: 100px 24px;
    }

    .inner-697a757 {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .row-697a757 {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}


/* Market ticker — slow seamless right-to-left marquee with feathered
   edges; pauses on hover. */

.ticker-19dd5df {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);

    & .marquee-19dd5df {
        position: relative;
        overflow: hidden;
        padding: 16px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);

        &:hover .track-19dd5df {
            animation-play-state: paused;
        }

        & .track-19dd5df {
            display: inline-flex;
            align-items: center;
            will-change: transform;
            animation: exc-ticker 60s linear infinite;

            & .half-19dd5df {
                display: inline-flex;
                align-items: center;

                & .item-19dd5df {
                    display: inline-flex;
                    align-items: center;
                    gap: 12px;
                    padding: 0 30px;
                    border-right: 1px solid var(--color-border);
                    white-space: nowrap;

                    & .iconBubble-19dd5df {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        background: var(--exc-blue-50);
                        display: grid;
                        place-items: center;
                        flex-shrink: 0;
                        color: var(--color-accent);
                    }

                    & .sym-19dd5df {
                        font-family: var(--font-data);
                        font-size: 12px;
                        font-weight: 700;
                        letter-spacing: 0.04em;
                        color: var(--color-text);
                    }

                    & .name-19dd5df {
                        font-size: 13px;
                        color: var(--color-text-muted);
                    }

                    & .price-19dd5df {
                        font-family: var(--font-data);
                        font-size: 13.5px;
                        font-weight: 600;
                        color: var(--color-text);
                    }

                    & .change-19dd5df {
                        display: inline-flex;
                        align-items: center;
                        gap: 3px;
                        font-family: var(--font-data);
                        font-size: 12.5px;
                        font-weight: 700;

                        &.up-19dd5df {
                            color: var(--color-up);
                        }

                        &.down-19dd5df {
                            color: var(--color-down);
                        }
                    }
                }
            }
        }
    }
}


.ticker-b512033 {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
    padding: 18px 0;
    overflow: hidden;
    position: relative;
}

.track-b512033 {
    display: flex;
    width: 200%;
    animation: xl-ticker 60s linear infinite;
}

.item-b512033 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    white-space: nowrap;
}

.dotGold-b512033,
.dotBlue-b512033,
.dotCopper-b512033 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dotGold-b512033 {
    background: var(--gold);
}

.dotBlue-b512033 {
    background: var(--blue);
}

.dotCopper-b512033 {
    background: var(--copper);
}

.sym-b512033 {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 500;
}

.name-b512033 {
    font-size: 12px;
    color: var(--text-mute);
}

.pxUp-b512033,
.pxDown-b512033 {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
}

.pxUp-b512033 {
    color: var(--good);
}

.pxDown-b512033 {
    color: #ef6a5a;
}

.sep-b512033 {
    color: var(--border-2);
    margin-left: 8px;
}


/* Institutional-grade infrastructure — split header + a row of cards
   on cream. The first card is orange-tinted with an organic top-left
   corner; the last mirrors it bottom-right. */

.trust-7d0434c {
    background: var(--site-cream);
}

.container-7d0434c {
    max-width: 1320px;
    margin: 0 auto;
    padding: 120px 28px;
}

.head-7d0434c {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 52px;
}

.eyebrowAccent-7d0434c {
    color: var(--site-orange-600);
}

.title-7d0434c {
    font-size: clamp(36px, 5vw, 70px);
    margin: 14px 0 0;
    padding-bottom: 0;
    color: var(--color-text);
}

.subtitle-7d0434c {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 500;
    color: var(--color-text-muted);
    margin: 12px 0 0;
    line-height: 1.3;
    text-wrap: pretty;
}

.lead-7d0434c {
    font-size: 17px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
    text-wrap: pretty;
}

.grid-7d0434c {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

.cardWrap-7d0434c {
    display: flex;
}

/* All cards share the orange tint — the featured/last ones just get an
   organic corner. No borders, no hover lift. */
.card-7d0434c {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 46px 32px 54px;
    min-width: 0;
    background: var(--site-orange-tint);
    border-radius: 20px;
    border: 1px solid transparent;
}

.featured-7d0434c {
    border-radius: 110px 20px 20px 20px;
}

.lastCard-7d0434c {
    border-radius: 20px 20px 110px 20px;
}

.cardIcon-7d0434c {
    color: var(--color-text);
}

.cardTitle-7d0434c {
    font-size: 20px;
    margin: 26px 0 10px;
    color: var(--color-text);
}

.cardText-7d0434c {
    font-size: 14.5px;
    color: var(--color-text-muted);
    line-height: 1.62;
    margin: 0;
}

@media (max-width: 920px) {
    .grid-7d0434c {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .head-7d0434c {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }
}

@media (max-width: 560px) {
    .grid-7d0434c {
        grid-template-columns: 1fr;
    }

    .container-7d0434c {
        padding: 72px 22px;
    }
}


.wordmark-6d5acd6 {
    display: block;
    width: auto;
    user-select: none;
    -webkit-user-drag: none;
    filter: brightness(0);
}