special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
.card {
    background-color: var(--ntp-surface-background-color);
    backdrop-filter: blur(48px);
    border: 1px solid var(--ntp-surface-border-color);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--border-radius-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    max-width: calc(240 * var(--px-in-rem));
    min-height: calc(166 * var(--px-in-rem));
    font-size: var(--body-font-size);
}

.icon {
    height: 3rem;
    width: 4rem;
    margin-bottom: var(--sp-1);
}

.title {
    font-size: var(--body-font-size);
    font-weight: 590;
    line-height: var(--body-line-height);
    letter-spacing: -0.08px;
    color: var(--ntp-text-normal);
    margin-bottom: var(--sp-1);
}

.description {
    font-size: calc(11 * var(--px-in-rem));
    line-height: calc(14 * var(--px-in-rem));
    letter-spacing: 0.06px;
    flex-grow: 1;
    color: var(--ntp-text-muted);
    margin-bottom: var(--sp-1);
}

.btn {
    padding: calc(6 * var(--px-in-rem)) var(--sp-3);
    background-color: transparent;
    border-width: 0;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: calc(11 * var(--px-in-rem));
    line-height: calc(14 * var(--px-in-rem));
    color: var(--ntp-color-primary);
    /* needed for some languages */
    text-wrap: wrap;

    /* the active state created an awkward flash, adding transition out */
    &.supressActiveStateForSwitchToConfirmationText {
        opacity: 1;
        transition: opacity .3s ease-out;

        &:active {
            background-color: var(--color-black-at-6);
            opacity: 0;
        }
    }

    &:hover {
        background-color: var(--color-black-at-6);
        cursor: pointer;
    }

    &:active {
        background-color: var(--ntp-color-primary);
        color: var(--ntp-text-on-primary);
    }

    &:disabled {
        color: var(--color-black-at-84);
    }

    &:disabled:hover {
        cursor: not-allowed;
        background-color: var(--color-white-at-6);
    }

    &:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    [data-theme=dark] & {
        &.supressActiveStateForSwitchToConfirmationText {
            &:active {
                background-color: var(--color-black-at-9);
            }
        }

        &:hover:not(:active) {
            background-color: var(--color-black-at-9);
        }

        &:disabled {
            color: var(--color-white-at-12);
            opacity: 0.8;
        }

        &:disabled:hover {
            cursor: not-allowed;
            background-color: var(--color-white-at-12);
        }
    }
}

.confirmation {
    display: flex;
    align-items: center;
    transition: all .2s ease-in;
    min-height: 26px;

    svg {
        height: 1rem;
        width: 1rem;
        margin-right: var(--sp-2);
    }

    p {
        font-size: calc(11 * var(--px-in-rem));
        line-height: calc(14 * var(--px-in-rem));
        font-weight: 600;
        max-width: 8rem;
    }
}

.dismissBtn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.cardGroup {
    height: 100%;
    width: 100%;
    position: relative;
    margin-bottom: var(--ntp-gap);

    &:has([data-show-hide]) {
        margin-bottom: var(--sp-4);
    }

    [data-show-hide] {
        opacity: 0;
    }

    &:hover {
        [data-show-hide] {
            opacity: 1;
        }
    }
}

.cardGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    margin-bottom: 1px;
}

.showhide {
    opacity: 0;
    transition: opacity .2s;
}

.bubble {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: calc(-22 * var(--px-in-rem));
    left: 0;

    svg path {
        fill: var(--ntp-color-primary);
    }

    div {
        background-color: var(--ntp-color-primary);
        height: calc(20 * var(--px-in-rem));
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1px;
        margin: 0 -1px;

        h2 {
            color: var(--ntp-text-on-primary);
            letter-spacing: 0.06px;
            font-weight: 600;
            line-height: normal;
            font-size: calc(11 * var(--px-in-rem));
        }
    }
}

.cardGroup {
    transition: opacity .2s;

    &:hover {
        .showhide [aria-controls] {
            opacity: 1;
        }
    }
}

:root:has(body[data-platform-name="windows"]) {
    .nextStepsCard .title {
        font-weight: 700;
        letter-spacing: normal;
    }
}
