/*
 * The features page: the catalogue (each feature with the plan it comes
 * from, filtered by category chips) and the three products under it. The
 * hero is templates.css's .hm.ph.solo.
 */
@layer marketing {
    .mk {
        & .cat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0 40px;
        }
        & .fi {
            padding: 20px 0;
            border-top: 1px solid var(--line);
            display: grid;
            gap: 4px;
            align-content: start;
        }
        & .fi.hide {
            display: none;
        }
        & .fi.pop {
            animation: mk-up 0.6s var(--out) both;
            animation-delay: calc(var(--k, 0) * 20ms);
        }
        & .fi b {
            font-weight: 500;
        }
        & .fi span {
            font-size: 14px;
            color: var(--muted);
        }
        & .fi small {
            font: 400 12px / 1.4 var(--f-mono);
            color: var(--faint);
            margin-top: 4px;
        }

        /* the products */
        & .products {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }
        & .prod {
            text-decoration: none;
            color: inherit;
            display: grid;
            grid-template-rows: auto 1fr;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line);
            transition:
                border-color 0.3s,
                box-shadow 0.4s;
        }
        & .prod:hover {
            border-color: #d4d6dd;
            box-shadow: rgb(14 17 23 / 0.35) 0 30px 60px -40px;
        }
        & .prod .tx {
            padding: 24px;
            display: grid;
            gap: 10px;
            align-content: start;
        }
        & .prod h3 {
            font-size: 22px;
            letter-spacing: -0.025em;
        }
        & .prod p {
            color: var(--muted);
            font-size: 15px;
        }
        & .prod .more {
            margin-top: 6px;
        }
    }

    @media (max-width: 900px) {
        .mk .cat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .mk .products {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 560px) {
        .mk .cat-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}