@layer components {
    .try-on {
        & .try-on__intro {
            text-align: center;
            padding-block: var(--space-xl) var(--space-l);
            padding-inline: var(--space-s);
        }

        & .try-on__demo {
            text-align: center;
            padding-block: var(--space-l) var(--space-xl);
            padding-inline: var(--space-s);
            background: var(--color-surface-mixed);
        }

        & .try-on__qr-block {
            margin-block-start: var(--space-l);
        }

        & .try-on__qr {
            box-shadow: var(--shadow-m);
            border-radius: var(--radius-m);
        }

        & .try-on__qr-hint {
            margin-block-start: var(--space-2xs);
            color: var(--color-text-muted);
            font-size: 0.9rem;
        }

        & .try-on__actions {
            margin-block-start: var(--space-m);
        }

        & .try-on__steps-section,
        & .try-on__facts,
        & .try-on__faq {
            padding-block: var(--space-xl);
            padding-inline: var(--space-s);
        }

        & .try-on__steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
            gap: var(--space-l);
            max-width: 62rem;
            margin-inline: auto;
            /* StepCard's icon tile pokes out of the card's top-left corner, so the row needs
               headroom the gap alone doesn't give it. */
            margin-block-start: var(--space-xl);
        }

        & .try-on__fact-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
            gap: var(--space-l);
            max-width: 62rem;
            margin-inline: auto;
            margin-block-start: var(--space-l);
        }

        & .try-on__fact-title {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            color: var(--color-text);
        }

        & .try-on__fact-text {
            margin-block-start: var(--space-2xs);
            color: var(--color-text-muted);
        }

        & .try-on__faq-list {
            max-width: 48rem;
            margin-inline: auto;
            margin-block-start: var(--space-l);
        }

        & .try-on__cta {
            text-align: center;
            padding-block: var(--space-xl);
            padding-inline: var(--space-s);
            background: var(--color-surface-mixed);
        }

        & .try-on__cta-title {
            font-family: var(--font-display);
            font-size: var(--size-step-2);
        }

        & .try-on__cta-text {
            max-width: 40rem;
            margin-inline: auto;
            margin-block: var(--space-s);
            color: var(--color-text-muted);
        }
    }
}