@layer components {
    .what-you-get {
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);

        & .what-you-get__list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
            gap: var(--space-s);
            max-width: 68rem;
            margin-inline: auto;
            margin-block-start: var(--space-l);
            padding: 0;
        }

        & .what-you-get__item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-xs);
            padding: var(--space-m);
            background: var(--color-surface-raised);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-l);
            transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);

            &:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-m);
            }
        }

        /* A real stroked check icon, not a hand-plotted clip-path polygon: the polygon filled the
           whole badge edge to edge and its arms were the wrong lengths, so it read as a crooked
           tick. Same `lucide:check` the pricing matrix uses, inset inside the brand circle. */
        & .what-you-get__icon {
            flex-shrink: 0;
            display: grid;
            place-items: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: var(--radius-full);
            background: var(--gradient-brand-strong);
            color: var(--color-on-brand);

            & svg {
                width: 1rem;
                height: 1rem;
                stroke-width: 3;
            }
        }
    }
}