.tbf-home-page .mocat > .container {
    container-type: inline-size;
    container-name: tbf-home-module;
}

.tbf-home-page .mocat.tbf-mocat--feature .grids,
.tbf-home-page .mocat.tbf-mocat--photo .grids,
.tbf-home-page .mocat.tbf-mocat--editorial .grids,
.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    margin-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--feature .grids {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 205px;
    gap: 18px;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid {
    height: 205px;
    border: 0;
    border-radius: 18px;
    background: #dfe7f2 !important;
    box-shadow: 0 15px 38px rgba(29, 43, 70, .09);
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: 428px;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .img::after,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .img::after {
    content: "";
    position: absolute;
    inset: 28% 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 15, 30, .12) 35%, rgba(7, 15, 30, .78) 100%);
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 18px 16px;
    display: block;
    color: #fff !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-type,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-access-badge {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    margin: 0;
    overflow: hidden !important;
    font-size: 15px;
    line-height: 1.35 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    font-size: 21px;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a,
.tbf-home-page .mocat.tbf-mocat--feature .post.grid .con h3 a:visited {
    color: #fff !important;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-footer {
    margin-top: 8px;
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--feature .post.grid .tbf-work-date {
    color: rgba(255, 255, 255, .7);
}

/* “最新期刊”固定 8 项，组件宽度允许时始终采用 4×2 完整行；
 * 窄屏只降到 2 列，避免 Tablet 竖屏出现 3+3+2。 */
.tbf-home-page .mocat.tbf-mocat--journal .grids {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.tbf-home-page .mocat.tbf-mocat--photo .grids {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid {
    overflow: hidden;
    border: 1px solid rgba(16, 27, 49, .065);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 13px 32px rgba(29, 43, 70, .065);
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid:hover {
    border-color: rgba(16, 27, 49, .11);
    box-shadow: 0 19px 42px rgba(29, 43, 70, .095);
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .img {
    aspect-ratio: 9 / 6;
    border-radius: 17px 17px 0 0;
    box-shadow: none;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con {
    min-height: 82px;
    padding: 13px 15px 14px;
    gap: 7px;
    border-top: 1px solid rgba(16, 27, 49, .045);
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--photo .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    color: var(--tbf-ink) !important;
    font-family: var(--tbf-font-sans) !important;
    font-size: 16px;
    line-height: 1.35 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-footer {
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--photo .post.grid .tbf-work-date {
    color: #919baa;
}

.tbf-home-page .mocat.tbf-mocat--editorial .grids {
    height: 430px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid {
    flex: 1 1 0;
    width: auto;
    height: 430px;
    border: 0;
    border-radius: 21px;
    background: #e7edf6 !important;
    box-shadow: 0 18px 44px rgba(29, 43, 70, .09);
    transition: flex .46s cubic-bezier(.22, .8, .22, 1), box-shadow .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
    flex: 2.65 1 0;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28px 20px 20px;
    display: block;
    color: #fff !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a {
    min-height: 1.3em !important;
    height: 1.3em !important;
    max-height: 1.3em !important;
    overflow: hidden !important;
    font-size: 17px;
    line-height: 1.3 !important;
    font-weight: 700;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a,
.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .con h3 a:visited {
    color: #fff !important;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-footer {
    margin-top: 9px;
    padding: 0;
    justify-content: flex-start;
}

.tbf-home-page .mocat.tbf-mocat--editorial .post.grid .tbf-work-date {
    color: rgba(255, 255, 255, .72);
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid {
    aspect-ratio: 9 / 7;
    border: 0;
    border-radius: 18px;
    background: #e8edf5 !important;
    box-shadow: 0 14px 34px rgba(29, 43, 70, .075);
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(7, 15, 30, .68));
    transition: opacity .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px;
    display: block;
    opacity: 0;
    color: #fff !important;
    background: transparent !important;
    transition: opacity .28s ease;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid:hover .img::after,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid:hover .con {
    opacity: 1;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-brand,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-resource,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-access-badge,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-type {
    display: none !important;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-resolution {
    display: inline-flex;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con h3,
.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con h3 a {
    min-height: 1.35em !important;
    height: 1.35em !important;
    max-height: 1.35em !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.35 !important;
    font-weight: 750;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .tbf-work-footer {
    display: none;
}

@media (hover: none) {
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        opacity: 1;
    }
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        transform: none;
    }
}

/* Homepage catalog modules now react to their own available width rather
 * than the device viewport.  The custom properties are consumed by home.js so
 * row balancing and preview limits follow the same component state as CSS. */
.tbf-home-page .mocat .grids {
    --tbf-home-limit-tier: desktop;
}

.tbf-home-page .mocat.tbf-mocat--photo .grids,
.tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
    --tbf-row-balance: 0;
}

@container tbf-home-module (max-width: 1040px) {
    .tbf-home-page .mocat .grids {
        --tbf-home-limit-tier: tablet;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: span 2;
    }

    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        --tbf-home-limit-tier: tablet;
        --tbf-row-balance: 1;
    }
}

@container tbf-home-module (max-width: 760px) {
    .tbf-home-page .mocat .grids {
        --tbf-home-limit-tier: mobile;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 220px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        height: 220px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        --tbf-home-limit-tier: mobile;
        --tbf-row-balance: 0;
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .grids {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
        width: auto;
        height: 300px;
        flex: none;
    }
}


@container tbf-home-module (min-width: 700px) and (max-width: 760px) {
    .tbf-home-page .mocat.tbf-mocat--journal .grids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container tbf-home-module (max-width: 520px) {
    .tbf-home-page .mocat.tbf-mocat--feature .grids,
    .tbf-home-page .mocat.tbf-mocat--photo .grids,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .grids {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .grids {
        grid-auto-rows: 190px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        height: 190px;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3,
    .tbf-home-page .mocat.tbf-mocat--feature .post.grid:first-child .con h3 a {
        font-size: 15px;
    }

    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid,
    .tbf-home-page .mocat.tbf-mocat--editorial .grids:not(:hover) .post.grid:first-child,
    .tbf-home-page .mocat.tbf-mocat--editorial .post.grid:hover {
        width: auto;
        height: clamp(168px, 45vw, 210px);
        aspect-ratio: auto;
    }

    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .img::after,
    .tbf-home-page .mocat.tbf-mocat--wallpaper .post.grid .con {
        display: none;
    }
}

/* Three-column Mocat: tools / feed / visual picks. */
.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 22px;
    align-items: stretch;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel {
    min-width: 0;
    padding: 26px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #f05b83;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head h3 {
    margin: 0;
    color: #172033;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: #8b94a4;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more:hover {
    color: #172033;
    transform: translateY(-1px);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 8px;
    padding: 5px 3px 6px;
    color: #263044;
    text-align: center;
    text-decoration: none;
    transition: color .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool:hover {
    color: #172033;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__logo {
    display: block;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: contain;
    border-radius: 15px;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #263044;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.065);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__num {
    color: #c0c6d0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(1) .tbf-triple-mocat__num {
    color: #ff5c87;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(2) .tbf-triple-mocat__num {
    color: #7b8cff;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news li:nth-child(3) .tbf-triple-mocat__num {
    color: #33c7a5;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news a {
    overflow: hidden;
    color: #30394b;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__news a:hover {
    color: #111827;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
    display: grid;
    gap: 13px;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    margin: -8px;
    border-radius: 17px;
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual:hover {
    background: rgba(248, 250, 252, 0.92);
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__thumb {
    display: block;
    width: 92px;
    height: 62px;
    overflow: hidden;
    border-radius: 14px;
    background: #eef1f5;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-visual__title {
    display: -webkit-box;
    overflow: hidden;
    color: #30394b;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__empty {
    grid-column: 1 / -1;
    padding: 28px 0;
    color: #a0a8b5;
    font-size: 13px;
    text-align: center;
}

@container tbf-home-module (max-width: 1000px) {
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
        grid-template-columns: 1fr 1fr;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel--visual {
        grid-column: 1 / -1;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 26px;
    }
}

@container tbf-home-module (max-width: 640px) {
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel,
    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__panel--visual {
        grid-column: auto;
        padding: 20px;
        border-radius: 22px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head {
        margin-bottom: 16px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__head h3 {
        font-size: 20px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__more span {
        display: none;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 8px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool {
        min-height: 0;
        padding: 4px 2px 5px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-tool__logo {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--triple .tbf-triple-mocat__visuals {
        grid-template-columns: 1fr;
    }
}

/* Discover four-column module: deals / apps / media / tech. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__panel {
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-bottom: 18px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #f05b83;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head h3 {
    margin: 0;
    color: #172033;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #8b94a4;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more svg {
    display: block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more:hover {
    color: #172033;
    transform: translateY(-1px);
}

/* Deals: one editorial lead, then compact text rows. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature {
    display: block;
    min-height: 112px;
    padding: 14px 16px;
    border-radius: 19px;
    background: rgba(247, 248, 251, 0.95);
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature:hover {
    background: #f3f5f8;
    transform: translateY(-1px);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #a0a8b5;
    font-size: 10px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__meta b {
    color: #f05b83;
    font-weight: 700;
    letter-spacing: .08em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__feature strong {
    display: -webkit-box;
    overflow: hidden;
    color: #263044;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 6px;
    color: #8b94a4;
    font-size: 11px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row span {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-deals__row time {
    color: #a0a8b5;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

/* Apps: existing featured covers, not logos. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-apps {
    display: grid;
    gap: 12px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 6px;
    margin: -6px;
    border-radius: 16px;
    color: #263044;
    text-decoration: none;
    transition: background .2s ease;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app:hover {
    background: rgba(248, 250, 252, 0.92);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb {
    display: block;
    width: 78px;
    height: 54px;
    overflow: hidden;
    border-radius: 13px;
    background: #eef1f5;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body {
    min-width: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #30394b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__body small {
    display: block;
    margin-top: 5px;
    color: #a0a8b5;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

/* Media: lead visual card + restrained numbered links. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #e9edf2;
    color: #fff;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(180deg, rgba(8, 12, 20, 0), rgba(8, 12, 20, 0.72));
    pointer-events: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero > span {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 13px;
    left: 14px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
    letter-spacing: .08em;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__hero--empty::after {
    inset: 0;
    background: linear-gradient(135deg, #313846, #111827);
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-height: 42px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__index {
    color: #b3bac5;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-media__row strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Tech: date-forward news stream, no cover dependency. */
.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    color: #30394b;
    text-decoration: none;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row:last-child {
    border-bottom: 0;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time b {
    color: #616b7d;
    font-size: 11px;
    font-weight: 700;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row time span {
    margin-top: 4px;
    color: #b3bac5;
    font-size: 9px;
}

.tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-tech__row strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.48;
    font-weight: 600;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@container tbf-home-module (max-width: 1080px) {
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container tbf-home-module (max-width: 640px) {
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-2,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-3,
    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad--cols-4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__panel {
        padding: 20px;
        border-radius: 22px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head {
        min-height: 0;
        margin-bottom: 16px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__head h3 {
        font-size: 20px;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-quad__more span {
        display: none;
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .tbf-home-page .mocat.tbf-mocat--discover-quad .tbf-discover-app__thumb {
        width: 92px;
        height: 62px;
    }
}