.home-page {
    overflow: hidden;
    --home-primary: var(--primary);
    --home-primary-rgb: var(--home-theme-primary-rgb, 0, 184, 255);
    --home-primary-gradient: var(--home-theme-primary-gradient, var(--home-primary));
    --home-primary-gradient-state: var(--home-theme-primary-gradient-state, var(--home-primary));
    --home-primary-gradient-rgb: var(--home-theme-primary-gradient-rgb, var(--home-primary-rgb));
    --home-primary-gradient-state-rgb: var(--home-theme-primary-gradient-state-rgb, var(--home-primary-rgb));
    --home-title-color: #16132b;
    --home-copy-color: #625f78;
    --home-kicker-bg: rgba(255, 255, 255, 0.82);
    --home-kicker-border: rgba(var(--home-primary-rgb), 0.14);
    --home-kicker-color: var(--home-primary);
    --home-surface-bg: rgba(255, 255, 255, 0.92);
    --home-surface-border: rgba(20, 19, 43, 0.08);
    --home-surface-shadow: 0 24px 50px rgba(23, 21, 52, 0.08);
    --home-surface-shadow-hover: 0 30px 60px rgba(23, 21, 52, 0.12);
}

.home-hero {
    position: relative;
    padding: 3.5rem 0 2.5rem;
    background:
        linear-gradient(135deg, rgba(var(--home-primary-rgb), 0.045) 0%, transparent 42%),
        linear-gradient(180deg, #fff 0%, #fffafd 56%, #ffffff 100%);
}

.home-hero-row {
    min-height: clamp(35rem, 72vh, 42rem);
}

.home-eyebrow,
.home-section-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--home-kicker-border);
    border-radius: 999px;
    background: var(--home-kicker-bg);
    color: var(--home-kicker-color);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-hero-content {
    width: 100%;
    max-width: 37rem;
}

.home-hero-title {
    max-width: 11.5ch;
    margin: 1.15rem 0 1.1rem;
    color: var(--home-title-color);
    font-size: clamp(3rem, 4.4vw, 4.35rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.05em;
}

.home-hero-title-line,
.home-hero-title-accent {
    display: block;
    white-space: nowrap;
}

.home-hero-title-accent {
    color: var(--home-primary);
}

.home-hero-copy,
.home-section-heading p,
.home-spotlight-copy,
.home-cta-card p,
.home-feature-card p,
.home-glass-card p,
.home-spotlight-point span {
    color: var(--home-copy-color);
    font-size: 1rem;
    line-height: 1.8;
}

.home-hero-copy {
    max-width: none;
    width: 100%;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.72;
}

.home-hero-actions {
    margin: 1.8rem 0 0;
}

.home-hero-btn-primary,
.home-spotlight-btn,
.home-cta-card .btn.bg-gradient-primary {
    padding: 0.95rem 1.45rem;
    box-shadow: none;
}

.home-hero-btn-secondary,
.home-cta-card .btn-outline-primary {
    padding: 0.95rem 1.45rem;
    border-width: 1px;
    background: rgba(255, 255, 255, 0.88);
}

.home-hero-btn-secondary .icon,
.home-hero-btn-secondary svg {
    margin-right: 0.4rem;
}

.home-hero-visual {
    position: relative;
    max-width: 41rem;
    margin-left: auto;
    padding: 0.1rem 0 0;
}

.home-hero-image-wrap {
    position: relative;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-hero-image-simple:before {
    content: none;
}

.home-hero-image-simple img,
.home-hero-image-simple svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 112%;
    max-width: 112%;
    margin: -0.15rem auto 0;
    transform: translateX(-3%);
}

.home-section {
    position: relative;
    padding: 5.5rem 0;
}

.home-section-tight {
    padding-top: 2rem;
}

.home-section-heading {
    max-width: 50rem;
    margin-bottom: 3rem;
}

.home-section-heading h2,
.home-spotlight-title,
.home-cta-card h2 {
    margin: 1rem 0;
    color: var(--home-title-color);
    font-size: clamp(2.05rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.home-section-heading h2 {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.home-glass-card,
.home-feature-card,
.home-spotlight,
.home-cta-card,
.home-creators-wrapper {
    position: relative;
    border: 1px solid var(--home-surface-border);
    border-radius: 1.5rem;
    background: var(--home-surface-bg);
    box-shadow: var(--home-surface-shadow);
}

.home-glass-card {
    padding: 2rem 1.5rem;
}

.home-glass-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    margin-bottom: 1.25rem;
}

.home-glass-card h3,
.home-feature-card h3 {
    margin-bottom: 0.75rem;
    color: var(--home-title-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.home-spotlight {
    padding: 2rem;
    background: linear-gradient(145deg, #fff 0%, #fffafd 100%);
}

.home-spotlight-points {
    margin: 2rem 0;
}

.home-spotlight-point {
    padding: 1rem 0;
    border-top: 1px solid var(--home-surface-border);
}

.home-spotlight-point:first-child {
    border-top: 0;
    padding-top: 0;
}

.home-spotlight-point strong {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--home-title-color);
    font-size: 1rem;
}

.home-feature-card {
    height: 100%;
    padding: 1.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-feature-card:hover,
.home-glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--home-surface-shadow-hover);
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(var(--home-primary-rgb), 0.12), rgba(var(--home-primary-gradient-state-rgb), 0.12));
}

.home-creators-section {
    background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%);
}

.home-creators-wrapper {
    padding: 0.75rem;
}

.home-cta-section {
    padding: 4.5rem 0;
}

.home-cta-card {
    padding: 3rem 1.5rem;
    background: linear-gradient(145deg, #fff, #fffafd);
}

.home-box-img {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    max-height: 120px;
    margin: 0 auto;
}

.home-mid-img {
    display: block;
    width: 100%;
    max-width: 430px;
    height: auto;
}

@media (min-width: 992px) {
    .home-hero-content {
        margin-right: 1.5rem;
    }

    .home-spotlight {
        padding: 3rem;
    }
}

@media (max-width: 991.98px) {
    .home-hero-row {
        min-height: auto;
    }

    .home-hero-title {
        max-width: 100%;
        margin: 0 auto 1.35rem;
    }

    .home-hero-title-line,
    .home-hero-title-accent {
        white-space: normal;
    }

    .home-eyebrow {
        margin-bottom: 1rem;
    }

    .home-hero-copy {
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero-actions {
        margin-top: 2rem;
    }

    .home-hero-visual {
        margin: 0 auto;
        padding: 0;
    }

    .home-hero-image-simple img,
    .home-hero-image-simple svg {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        transform: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .home-hero {
        padding: calc(91px + 2.75rem) 0 3.25rem;
    }

    .home-hero-content {
        max-width: 42rem;
    }

    .home-hero-title {
        font-size: 4rem;
    }

    .home-hero-copy {
        max-width: 40rem;
        line-height: 1.8;
    }

    .home-hero-visual {
        max-width: 34rem;
        margin-top: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .home-section {
        padding: 3.25rem 0;
    }

    .home-hero {
        padding: calc(78px + 2.75rem) 0 3.25rem;
    }

    .home-hero-content {
        max-width: 32rem;
        padding-top: 0;
    }

    .home-section-heading h2,
    .home-spotlight-title,
    .home-cta-card h2 {
        font-size: 2rem;
    }

    .home-hero-title {
        max-width: 100%;
        margin: 0 auto 1.35rem;
        /*font-size: 2.45rem;*/
        /*line-height: 0.98;*/
    }

    .home-hero-title-line,
    .home-hero-title-accent {
        white-space: normal;
    }

    .home-section-heading h2 {
        max-width: 100%;
    }

    .home-hero-copy {
        max-width: 31rem;
        line-height: 1.8;
    }

    .home-hero-actions .btn {
        margin-bottom: 0.75rem !important;
    }

    .home-hero-visual {
        max-width: 29.5rem;
        margin-top: 2.75rem;
    }

    .home-hero-image-simple img,
    .home-hero-image-simple svg {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        transform: none;
    }

    .home-glass-card,
    .home-feature-card,
    .home-spotlight,
    .home-cta-card {
        border-radius: 1.2rem;
    }
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-page {
    --home-title-color: #f5f7fb;
    --home-copy-color: #98a2b3;
    --home-kicker-bg: rgba(255, 255, 255, 0.06);
    --home-kicker-border: rgba(255, 255, 255, 0.08);
    --home-kicker-color: var(--home-primary);
    --home-surface-bg: rgba(21, 24, 34, 0.92);
    --home-surface-border: rgba(255, 255, 255, 0.08);
    --home-surface-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
    --home-surface-shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.28);
    background: linear-gradient(180deg, #11131b 0%, #151822 100%);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-hero {
    background:
        linear-gradient(135deg, rgba(var(--home-primary-rgb), 0.08) 0%, transparent 42%),
        linear-gradient(180deg, #141722 0%, #171b27 52%, #12151d 100%);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-title,
.navbar-dark.app-navbar-home ~ .flex-fill .home-section-heading h2,
.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight-title,
.navbar-dark.app-navbar-home ~ .flex-fill .home-cta-card h2,
.navbar-dark.app-navbar-home ~ .flex-fill .home-glass-card h3,
.navbar-dark.app-navbar-home ~ .flex-fill .home-feature-card h3,
.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight-point strong {
    color: var(--home-title-color);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-eyebrow,
.navbar-dark.app-navbar-home ~ .flex-fill .home-section-kicker,
.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-visual-badge {
    background: var(--home-kicker-bg);
    border-color: var(--home-kicker-border);
    color: var(--home-kicker-color);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-copy,
.navbar-dark.app-navbar-home ~ .flex-fill .home-section-heading p,
.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight-copy,
.navbar-dark.app-navbar-home ~ .flex-fill .home-cta-card p,
.navbar-dark.app-navbar-home ~ .flex-fill .home-feature-card p,
.navbar-dark.app-navbar-home ~ .flex-fill .home-glass-card p,
.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight-point span {
    color: var(--home-copy-color);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-glass-card,
.navbar-dark.app-navbar-home ~ .flex-fill .home-feature-card,
.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight,
.navbar-dark.app-navbar-home ~ .flex-fill .home-cta-card,
.navbar-dark.app-navbar-home ~ .flex-fill .home-creators-wrapper {
    background: var(--home-surface-bg);
    border-color: var(--home-surface-border);
    box-shadow: var(--home-surface-shadow);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-glass-card:hover,
.navbar-dark.app-navbar-home ~ .flex-fill .home-feature-card:hover {
    box-shadow: var(--home-surface-shadow-hover);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-feature-icon {
    background: linear-gradient(135deg, rgba(var(--home-primary-rgb), 0.18), rgba(var(--home-primary-gradient-state-rgb), 0.18));
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight {
    background: linear-gradient(145deg, rgba(22, 25, 36, 0.98) 0%, rgba(18, 21, 30, 0.98) 100%);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-spotlight-point,
.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-image-wrap,
.navbar-dark.app-navbar-home ~ .flex-fill .home-cta-card,
.navbar-dark.app-navbar-home ~ .flex-fill .home-creators-wrapper {
    border-color: var(--home-surface-border);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-image-wrap {
    background: transparent;
    box-shadow: none;
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-hero-image-simple:before {
    background: linear-gradient(135deg, rgba(var(--home-primary-rgb), 0.09), rgba(var(--home-primary-gradient-state-rgb), 0.12));
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-creators-section {
    background: linear-gradient(180deg, #141721 0%, #11131b 100%);
}

.navbar-dark.app-navbar-home ~ .flex-fill .home-cta-card {
    background: linear-gradient(145deg, rgba(23, 26, 37, 0.98), rgba(17, 20, 29, 0.98));
}

.navbar-dark.app-navbar-home ~ footer {
    background: linear-gradient(180deg, #161922 0%, #11131b 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-dark.app-navbar-home ~ footer hr {
    border-color: rgba(255, 255, 255, 0.08);
}

.navbar-dark.app-navbar-home ~ footer p,
.navbar-dark.app-navbar-home ~ footer .text-dark-r,
.navbar-dark.app-navbar-home ~ footer a:not(.btn) {
    color: #9aa4b2 !important;
}

.navbar-dark.app-navbar-home ~ footer a:not(.btn):hover {
    color: var(--home-title-color) !important;
    text-decoration: none;
}

.app-navbar-home ~ footer .footer-social-links a {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--home-primary-rgb), 0.08);
    border: 1px solid rgba(var(--home-primary-rgb), 0.12);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.app-navbar-home ~ footer .footer-social-links a:hover {
    background: rgba(var(--home-primary-rgb), 0.14);
    border-color: rgba(var(--home-primary-rgb), 0.22);
}

.navbar-dark.app-navbar-home ~ footer .footer-social-links a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-dark.app-navbar-home ~ footer .footer-social-links a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.navbar-dark.app-navbar-home ~ footer .footer-social-links .ion-icon-wrapper,
.navbar-dark.app-navbar-home ~ footer .footer-social-links ion-icon,
.navbar-dark.app-navbar-home ~ footer .footer-social-links svg {
    color: var(--home-title-color) !important;
}

.navbar-dark.app-navbar-home ~ footer .copyRightInfo {
    color: #7f8896;
}

/* ============================================================
   FXH — Landing redesign (clean / minimal, fan-first)
   Theme-aware via body.fx-theme-light / .fx-theme-dark.
   Self-contained .fxh-* namespace; does not touch old .home-*.
   ============================================================ */
.fxh {
    --fxh-bg: #FBFBFD; --fxh-panel: #FFFFFF; --fxh-ink: #16151A; --fxh-muted: #6B6875;
    --fxh-line: #ECEAF0; --fxh-accent: #d10054; --fxh-accent-soft: rgba(209,0,84,.09);
    --fxh-ok: #12A150;
    background: var(--fxh-bg); color: var(--fxh-ink);
}
body.fx-theme-dark .fxh {
    --fxh-bg: #0E0D12; --fxh-panel: #17161C; --fxh-ink: #F4F3F7; --fxh-muted: #9E9AAA;
    --fxh-line: #262430; --fxh-accent: #ab0045; --fxh-accent-soft: rgba(255,45,119,.12);
}
.fxh .container { max-width: 1140px; }

/*
 * Desktop only: clear the fixed header.
 *
 * ON THE SECTION, NOT ON `.fxh .container`. Three divs carry that class -- the hero's
 * button, the posts feed and the suggestions -- so putting the margin there would open a
 * 75px gap before EACH of them and stack three of them down the page. The gap is wanted
 * once, at the top, so it goes on the first section in flex order instead.
 *
 * `order: 0` is the posts feed (the hero is 2 and the suggestions 1 -- see the ordering
 * block further down), and :first-child is a second, cheaper guard for the case where the
 * feed renders nothing and the suggestions lead instead.
 *
 * NOT applied below 768px: on a phone the hero's padding is already zeroed for the
 * reordered layout, and a margin here would reopen the gap that closed.
 */
@media (min-width: 768px) {
    /*
     * NOT `section:first-child`: that is the hero in DOM order, which flex order pushes to
     * the BOTTOM of the page -- the margin would have landed under the suggestions instead
     * of above the posts. The posts feed is what renders first, so it carries the gap, and
     * the suggestions take it only when the feed is absent.
     */
    .fxh > .fxl-feed-section {
        margin-top: 75px !important;
    }

    .fxh > .fxl-suggest-section:first-of-type {
        margin-top: 75px !important;
    }

    /* Both present: only the first one in visual order keeps it. */
    .fxh > .fxl-feed-section ~ .fxl-suggest-section {
        margin-top: 0 !important;
    }
}
.fxh h1, .fxh h2, .fxh h3 { letter-spacing: -.02em; line-height: 1.12; font-weight: 750; margin: 0; }
.fxh p { margin: 20px auto; }
.fxh-center { text-align: center; }
.fxh-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--fxh-accent); margin-bottom: 12px; }

/* buttons */
.fxh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 650; font-size: 15px; padding: 13px 24px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; transition: .16s; text-decoration: none; }
.fxh-btn-primary { background: var(--fxh-accent); color: #fff; }
.fxh-btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff; }
.fxh-btn-ghost { background: transparent; border-color: var(--fxh-line); color: var(--fxh-ink); }
.fxh-btn-ghost:hover { background: var(--fxh-panel); border-color: var(--fxh-muted); color: var(--fxh-ink); }

/* hero */
.fxh-hero { padding: 125px 0 52px !important; text-align: center; }
.fxh-hero .container { text-align: center; }
.fxh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
    color: var(--fxh-muted); background: var(--fxh-panel); border: 1px solid var(--fxh-line);
    padding: 6px 14px; border-radius: 999px; margin: 0 auto 22px; }
.fxh-hero-title { font-size: clamp(38px, 6vw, 62px); margin: 0 auto 22px; text-align: center; }
.fxh-accent { color: var(--fxh-accent); }
.fxh-hero-copy { font-size: clamp(16px, 2vw, 19px); color: var(--fxh-muted); max-width: 560px;
    margin: 0 auto 32px; text-align: center; }
.fxh-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 auto; }

/* sections */
.fxh-section { padding: 15px 0; }
.fxh-section-alt { background: var(--fxh-panel); border-top: 1px solid var(--fxh-line);
    border-bottom: 1px solid var(--fxh-line); }
.fxh-sec-head { text-align: center; max-width: 620px; margin: 0 auto 26px; }
.fxh-sec-head h2 { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 12px; }
.fxh-sec-head p { color: var(--fxh-muted); font-size: 16px; }

/* category chips */
.fxh-chips { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.fxh-chip { font-size: 13.5px; font-weight: 600; color: var(--fxh-muted); background: var(--fxh-panel);
    border: 1px solid var(--fxh-line); padding: 8px 16px; border-radius: 999px; text-decoration: none; transition: .15s; }
.fxh-chip:hover { color: var(--fxh-ink); border-color: var(--fxh-muted); text-decoration: none; }
.fxh-chip.on { background: var(--fxh-accent); border-color: var(--fxh-accent); color: #fff; }
.fxh-chip.on:hover { color: #fff; }

/* masonry creator grid (CSS columns) */
.fxh-masonry { columns: 3; column-gap: 16px; }
.fxh-mason-item { break-inside: avoid; margin-bottom: 16px; }
.fxh-mason-item .suggestion-box {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid var(--fxh-line) !important;
    background: var(--fxh-panel) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    padding: 0 !important;
}
.fxh-mason-item .suggestion-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}
.fxh-mason-item .suggestion-header-bg {
    display: block !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}
/* varied heights for a lively masonry feel */
.fxh-mason-item:nth-child(3n+1) .suggestion-header-bg { height: 220px !important; }
.fxh-mason-item:nth-child(3n+2) .suggestion-header-bg { height: 270px !important; }
.fxh-mason-item:nth-child(3n) .suggestion-header-bg { height: 200px !important; }
@media (max-width: 820px) { .fxh-masonry { columns: 2; column-gap: 12px; } }
@media (max-width: 520px) { .fxh-masonry { columns: 1; } }

/* fan steps */
.fxh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fxh-step { background: var(--fxh-bg); border: 1px solid var(--fxh-line); border-radius: 18px; padding: 26px; }
body.fx-theme-dark .fxh-step { background: var(--fxh-bg); }
.fxh-step-n { width: 34px; height: 34px; border-radius: 10px; background: var(--fxh-accent-soft);
    color: var(--fxh-accent); display: flex; align-items: center; justify-content: center;
    font-weight: 800; margin-bottom: 14px; }
.fxh-step h3 { font-size: 17px; margin-bottom: 7px; }
.fxh-step p { font-size: 14.5px; color: var(--fxh-muted); }
@media (max-width: 760px) { .fxh-steps { grid-template-columns: 1fr; } }

/* creator earn */
.fxh-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    background: var(--fxh-panel); border: 1px solid var(--fxh-line); border-radius: 24px;
    padding: clamp(28px, 5vw, 52px); }
.fxh-earn-copy h2 { font-size: clamp(26px, 3.5vw, 36px); margin-bottom: 14px; }
.fxh-earn-copy > p { color: var(--fxh-muted); margin-bottom: 22px; }
.fxh-earn-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.fxh-earn-li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.fxh-earn-ck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--fxh-accent-soft); color: var(--fxh-accent);
    display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.fxh-earn-card { background: var(--fxh-bg); border: 1px solid var(--fxh-line); border-radius: 20px; padding: 24px; }
.fxh-earn-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fxh-earn-card-top > span:first-child { font-size: 13px; color: var(--fxh-muted); }
.fxh-earn-badge { font-size: 12px; font-weight: 700; color: var(--fxh-ok);
    background: rgba(18,161,80,.12); padding: 4px 9px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px; }
.fxh-earn-amt { font-size: 40px; font-weight: 820; letter-spacing: -.03em; margin-bottom: 16px; }
.fxh-earn-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; margin-bottom: 18px; }
.fxh-earn-bars i { flex: 1; background: var(--fxh-accent-soft); border-radius: 5px 5px 0 0; }
.fxh-earn-bars i:last-child { background: var(--fxh-accent); }
.fxh-earn-rows { display: flex; flex-direction: column; gap: 9px; }
.fxh-earn-row { display: flex; justify-content: space-between; font-size: 13.5px;
    padding-top: 9px; border-top: 1px solid var(--fxh-line); color: var(--fxh-muted); }
.fxh-earn-row b { font-weight: 700; color: var(--fxh-ink); }
@media (max-width: 820px) { .fxh-earn { grid-template-columns: 1fr; gap: 28px; } }

/* final CTA */
.fxh-cta { text-align: center; background: var(--fxh-ink); border-radius: 24px;
    padding: clamp(36px, 6vw, 64px); }
.fxh-cta h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; color: #fff; }
body.fx-theme-dark .fxh-cta h2 { color: #0E0D12; }
.fxh-cta p { opacity: .72; margin-bottom: 26px; font-size: 17px; color: #fff; }
body.fx-theme-dark .fxh-cta p { color: #0E0D12; }
.fxh-center-actions { justify-content: center; }
.fxh-btn-cta-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.fxh-btn-cta-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
body.fx-theme-dark .fxh-btn-cta-ghost { border-color: rgba(14,13,18,.25); color: #0E0D12; }
body.fx-theme-dark .fxh-btn-cta-ghost:hover { background: rgba(14,13,18,.08); color: #0E0D12; }

/* Lazy cover placeholder (landing masonry): grey until the image loads in */
.fx-lazy-bg { background-color: var(--fxh-line, #ECEAF0); background-size: cover; background-position: center;
    transition: background-image .2s ease; }
body.fx-theme-dark .fx-lazy-bg { background-color: #262430; }

/* ============================================================
   LANDING PAGE: admin-pinned posts ("Add to landing page")

   NOTHING HERE HAS A FIXED HEIGHT. Each post is as tall as its own media: a
   portrait shot renders tall, a landscape one renders short, and neither is
   cropped, letterboxed or stretched to match its neighbours.

   MOBILE  - full width, edge to edge, height from the content's own ratio.
   DESKTOP - a grid of at least three per row, rows sized to their own content
             (align-items: start), so one tall post cannot inflate the row.
   ============================================================ */

.fxl-feed-section { padding-top: 18px; }

/* ---------- MOBILE FIRST: full-bleed, natural height ---------- */

.fxl-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fxl-card {
    overflow: hidden;
    background: #000;
    border: 0;
    border-radius: 0;
}

.fxl-card-link { display: block; position: relative; color: inherit; text-decoration: none; }
.fxl-card-link:hover { text-decoration: none; color: inherit; }

/*
 * NO FIXED HEIGHT ANYWHERE.
 *
 * The box is as tall as its content: a tall portrait shot renders tall, a wide landscape one
 * renders short, and neither is cropped or letterboxed. That is why there is no height, no
 * aspect-ratio and no object-fit on the image -- the <img> sizes itself, and the card follows.
 *
 * (An earlier version set 100dvh with object-fit: contain. Every post then occupied exactly
 * one screen, which made wide images sit in tall black bars.)
 */
.fxl-media {
    position: relative;
    display: block;
    width: 100%;
    background: #000;
}

.fxl-img {
    display: block;
    width: 100%;
    height: auto;      /* the image's own ratio decides the height */
}

/*
 * Video: the ratio is known only when the upload recorded it (attachments.video_width /
 * video_height), so the Blade sets it inline per attachment. Without it the element would
 * have zero height before metadata loads and the page would jump; 16/9 is the fallback,
 * applied in the Blade rather than here so a known ratio always wins.
 */
.fxl-video {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * A locked post has no real media to size the box, only a blurred backdrop. It is the one
 * place a ratio is unavoidable -- but it is a portrait-ish teaser, not a full screen.
 */
.fxl-media.is-locked {
    aspect-ratio: 4 / 5;
}

.fxl-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: block;
}

.fxl-media.is-locked .fxl-media-bg { filter: blur(18px); transform: scale(1.1); }

.fxl-lock,
.fxl-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    pointer-events: none;
}

.fxl-count {
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

/* Overlaid on the media so the post keeps its full natural height. */
.fxl-by {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 26px 14px 14px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.fxl-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
/*
 * White on both breakpoints, and it is white for two different reasons.
 *
 * On a phone .fxl-by is absolutely positioned over the media with a dark gradient behind it.
 * From 768px it becomes `position: static` in its own row -- but .fxl-card takes
 * `background: #000` at that same breakpoint, so the row is still dark. A hardcoded #fff is
 * safe in both; it would not be if that card background ever went light.
 */
.fxl-name {
    font-weight: 600;
    color: #fff;
}

/* ---------- DESKTOP: at least three per row ---------- */

@media (min-width: 768px) {
    .fxl-feed {
        display: grid;
        /*
         * EXACTLY three columns from 768px up -- not auto-fill.
         *
         * auto-fill with minmax(min(280px, 32%), 1fr) was tried and is wrong: at 768-860px
         * it yields TWO columns, because 32% of 800px is 256px and only two 256px tracks
         * plus a gap fit. The arithmetic was checked rather than eyeballed. A fixed
         * three-column track has no such failure mode, and 3 was the requirement.
         */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        max-width: 1180px;
        margin: 0 auto;
        /*
         * Masonry-ish: rows size to their own content, so a column of short posts does not
         * inherit the height of a tall one in the same row. Without this, grid stretches
         * every item in a row to the tallest, which is the fixed-height problem returning
         * by another name.
         */
        align-items: start;
    }

    .fxl-card {
        border-radius: 14px;
        border: 1px solid rgba(128, 128, 128, .16);
        background: rgba(128, 128, 128, .08);
        background: #000;
    }

    /* Byline returns to its own row under the tile, where there is space for it. */
    .fxl-by {
        position: static;
        background: none;
        color: inherit;
        padding: 11px 14px;
    }
}

/* More than the minimum once there is genuinely room for it. */
@media (min-width: 1200px) {
    .fxl-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * FULL-BLEED ON MOBILE.
 *
 * `.fxh .container` (and the app-wide .container rules beside it) force
 * `padding-left/right: 18px !important` below 992px, so a post stopped 18px short of each
 * edge. This class is added to that same div and cancels only the padding, leaving the
 * container's width behaviour alone.
 *
 * !important is required, not preferred: the rule being overridden is itself !important, so
 * a plain declaration loses no matter how specific the selector.
 */
@media (max-width: 991.98px) {
    .fxh .container.fxl-container,
    .fxl-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   LANDING PAGE, MOBILE: hero button below the posts
   ============================================================ */

.fxl-media { margin-bottom: 5px; }

/*
 * SECTION ORDER, ON EVERY SCREEN: posts -> suggestions -> "Explore creators" button.
 *
 * Done with flex order rather than a second copy of the button in the Blade: one button in
 * the markup means there is no way for both to render, and nothing to keep in sync if its
 * link or label changes later.
 *
 * The hero is a direct child of .fxh, as are the feed and the suggestions sections, so the
 * ordering happens at that level. Anything without an explicit order defaults to 0 and keeps
 * its document position; only the hero is pushed past them.
 *
 * This was a phone-only rule until the button was wanted below the suggestions on desktop
 * too, so it now sits outside the media query. Only the hero's padding still differs by
 * width, below.
 */
.fxh {
    display: flex;
    flex-direction: column;
}

.fxh-hero {
    order: 2;
}

.fxl-suggest-section {
    order: 1;
}

/*
 * The hero's padding was written for the top of the page, where it had to clear the fixed
 * header. At the foot there is nothing above it to clear, so the large top padding goes --
 * but it keeps a little breathing room from the suggestions panel on a desktop, and none on
 * a phone, where vertical space is scarcer.
 */
.fxh-hero {
    padding: 8px 0 44px !important;
    text-align: center;
}

@media (max-width: 767.98px) {
    .fxh-hero {
        padding: 0 0 0 !important;
    }
}

/* ============================================================
   LANDING PAGE: the feed's Suggestions widget at the foot
   ============================================================ */

/*
 * The widget was designed for the feed's narrow right sidebar. Dropped into a full-width
 * container it stretches the whole page, so it is capped to the same measure as the post
 * column and centred under it.
 *
 * Only these few rules are needed here: the widget's base styling lives in app.css, which is
 * global. feed-premium.css is NOT loaded -- almost everything it adds for this component is
 * scoped to .feed-widgets, a wrapper this page does not have, so pulling in a whole feed
 * stylesheet would drag in unrelated rules for two that apply.
 */
.fxl-suggest-section .suggestions-box {
    max-width: 680px;
    margin: 0 auto;
}

.fxl-suggest-section .suggestions-header { padding-top: 10px; }

/*
 * THREE CARDS ACROSS, on every screen.
 *
 * The cards are laid out inside each slide rather than left to stack: a slide is one page of
 * the slider, so its contents have to sit side by side for the arrows to mean anything.
 * minmax(0, 1fr) rather than 1fr so a long display name cannot push a column wider than its
 * share -- 1fr floors at the content's min size, which is how one card ends up bigger than
 * the other two.
 *
 * The GRID LIVES ON THE SLIDE, not on .fxl-sugg-row -- see the note below. The row used to
 * carry a grid of its own here; it was redundant (the row is dissolved with
 * `display: contents`) and, once the rules needed !important to outrank Swiper's own
 * stylesheet, it actively beat that `contents` declaration and broke the layout.
 */
.fxl-suggest-section .fxl-sugg-row .suggestion-box { margin-bottom: 0 !important; }

/*
 * THE REFRESH BUTTON REPLACES THIS MARKUP, so the layout must survive without .fxl-sugg-row.
 *
 * SuggestionsSlider.appendSuggestionsResults() empties .suggestions-content and injects HTML
 * the SERVER rendered through elements.feed.suggestions-wrapper -- the shared partial, which
 * has no .fxl-sugg-row and chunks by 2 on a phone. Styling only .fxl-sugg-row would give
 * three across until the first refresh and two after it, which is worse than either.
 *
 * So the slide itself is the grid. It applies to both shapes: the initial render (where
 * .fxl-sugg-row is an extra, harmless wrapper that the `display: contents` below dissolves)
 * and the refreshed one (cards are direct children of the slide).
 */
.fxl-suggest-section .swiper-slide {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    align-items: start;
}

/*
 * Let the initial wrapper's children be laid out by the slide's grid, not by the wrapper.
 * !important for the same reason the slide's own rules carry it: so no later stylesheet can
 * quietly reinstate a box here and break the single grid the cards are placed on.
 */
.fxl-suggest-section .fxl-sugg-row { display: contents !important; }

.fxl-suggest-section .swiper-slide .suggestion-box { margin-bottom: 0 !important; }

@media (min-width: 768px) {
    .fxl-suggest-section .suggestions-box { max-width: 1180px; }
}

/*
 * SCALING THE CARD DOWN FOR A NARROW COLUMN.
 *
 * .suggestion-box is a Bootstrap .card whose entire height comes from .suggestion-header-bg
 * -- everything else sits in .card-img-overlay and is absolutely positioned, so it
 * contributes nothing. That background div is a fixed 128px and the avatar a fixed 90px,
 * both sized for the feed's full-width sidebar card. At a third of the page the avatar is
 * nearly as tall as the card it sits in, so it overflows and the name strip is crushed.
 *
 * The same problem was already solved for .fx-mention-cards .col-6; this is that treatment,
 * scoped to the landing section so neither the feed nor the mention cards are touched.
 */
/*
 * ON A PHONE THE CARD IS FULL WIDTH, so it keeps the proportions the component was
 * designed with -- the 128px header and 90px avatar of the feed's sidebar card. Nothing
 * needs shrinking here; only the desktop block below does that, because that is where
 * three of them share a row.
 */
.fxl-suggest-section .suggestion-header-bg {
    height: 128px !important;
}

/*
 * THREE ACROSS FROM 768px, and the card scaled to match.
 *
 * The slide still carries the same three cards it does on a phone -- only the column count
 * changes, so the arrows and the pagination bullets page through identical groups on both.
 *
 * The card has to shrink here. .suggestion-box is a Bootstrap .card whose entire height
 * comes from .suggestion-header-bg -- everything else sits in .card-img-overlay, absolutely
 * positioned, contributing no height at all. The header is a fixed 128px and the avatar a
 * fixed 90px, both sized for the feed's full-width sidebar; at a third of the row the
 * untouched avatar is nearly as tall as the card holding it, which is how it ended up
 * overflowing a squashed strip. This is the treatment the codebase already uses on
 * .fx-mention-cards .col-6, scoped here so the feed and the mention cards are untouched.
 */
@media (min-width: 768px) {
    .fxl-suggest-section .swiper-slide {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px;
    }

    .fxl-suggest-section .suggestion-header-bg {
        height: 118px !important;
    }

    .fxl-suggest-section .suggestion-box .avatar {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }

    /* The avatar's gutters were set for a card wider than a third of the row. */
    .fxl-suggest-section .suggestion-box .card-text > div:first-child {
        padding-left: .5rem !important;
        padding-right: .375rem !important;
    }

    .fxl-suggest-section .suggestion-box .h6 { font-size: .85rem; }
    .fxl-suggest-section .suggestion-box .small { font-size: .72rem; }

    /* The verified tick is sized for the larger card and crowds the truncated name here. */
    .fxl-suggest-section .suggestion-box .h6 ion-icon,
    .fxl-suggest-section .suggestion-box .h6 svg {
        width: 13px !important;
        height: 13px !important;
        font-size: 13px !important;
    }
}

/* ============================================================
   DESKTOP: every landing post in a 4:5 frame, name below -- update 2507 / 2508
   ============================================================
   From 768px up each post the admin puts on the landing page fills the same 4:5 frame
   (object-fit: cover -- the frame is filled, edges may be trimmed), so the grid lines up.
   The creator's name sits BELOW the frame, not over the picture. The card itself is
   transparent there, so the name reads in the page's colours (dark on light, white on
   dark). Phones are unchanged: full width, natural height, name over the media.
   The video's inline aspect-ratio (set per upload in the card) is overridden here. */
@media (min-width: 768px) {
    .fxl-card {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    .fxl-media {
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 14px;
        margin-bottom: 0;
    }
    .fxl-media .fxl-img,
    .fxl-media .fxl-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover;
        background: #000;
    }
    .fxl-card .fxl-by {
        position: static !important;
        background: none !important;
        padding: 10px 2px 2px !important;
        color: inherit !important;
    }
    .fxl-card .fxl-name { color: #0F172A !important; }
    body.fx-theme-dark .fxl-card .fxl-name { color: #fff !important; }
}