@layer components {
    .plan-matrix {
        /* One shared grid for the whole matrix: the head, every feature row and the foot are
           `display: contents`, so their cells line up in the same four columns. The first column
           carries the capability, the other three the per-plan answer. */
        display: grid;
        grid-template-columns: minmax(12rem, 1.5fr) repeat(3, minmax(9.5rem, 1fr));
        max-width: 68rem;
        margin-inline: auto;
        color: var(--color-text);

        & .plan-matrix__head,
        & .plan-matrix__row,
        & .plan-matrix__foot {
            display: contents;
        }

        & .plan-matrix__plan,
        & .plan-matrix__price {
            padding: var(--space-s) var(--space-xs);
            text-align: center;
        }

        & .plan-matrix__plan {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-3xs);
        }

        & .plan-matrix__plan-badge {
            background: var(--gradient-brand-strong);
            color: var(--color-on-brand);
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.3em 0.8em;
            border-radius: var(--radius-full);
            text-wrap: balance;
        }

        & .plan-matrix__plan-name {
            font-size: var(--size-step-1);
            margin: 0;
        }

        & .plan-matrix__plan-claim {
            color: var(--color-text-muted);
            font-size: 0.8rem;
            line-height: 1.4;
            margin: 0;
            text-wrap: balance;
        }

        /* Feature row: a headline you can scan in one pass, with the explanation demoted below
           it — the old cards put the whole explanation on one line and nothing was scannable. */
        & .plan-matrix__feature {
            padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
            border-block-start: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        & .plan-matrix__feature-title {
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 600;
            margin: 0;
            line-height: 1.3;
        }

        & .plan-matrix__feature-note {
            color: var(--color-text-muted);
            font-size: 0.85rem;
            line-height: 1.45;
            margin: var(--space-3xs) 0 0;
        }

        & .plan-matrix__cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-3xs);
            padding: var(--space-2xs);
            border-block-start: 1px solid var(--color-border);
            text-align: center;
        }

        /* Repeated per cell for the phone layout and for screen readers — the desktop grid
           already answers "which column is this?" with the header row. */
        & .plan-matrix__cell-plan {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        & .plan-matrix__mark {
            width: 1.5rem;
            height: 1.5rem;
        }

        & .plan-matrix__cell[data-answer="yes"] .plan-matrix__mark {
            color: var(--color-accent);
        }

        & .plan-matrix__cell[data-answer="no"] .plan-matrix__mark {
            color: var(--color-border);
        }

        & .plan-matrix__cell-value {
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.35;
            text-wrap: balance;
        }

        & .plan-matrix__price {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-3xs);
            border-block-start: 1px solid var(--color-border);
        }

        & .plan-matrix__price-value {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
            text-wrap: balance;
        }

        /* The three price blocks are grid items in one row, so they're all as tall as the
           tallest. Soaking up the leftover height here — rather than spacing the CTA by a fixed
           amount — lines the three buttons up on the same baseline no matter how many lines the
           price and its note take above them. */
        & .plan-matrix__price-note {
            color: var(--color-text-muted);
            font-size: 0.78rem;
            line-height: 1.4;
            margin: 0 0 auto;
            text-wrap: balance;
        }

        & .plan-matrix__cta {
            width: 100%;
            margin-block-start: var(--space-xs);
            padding-inline: var(--space-xs);
            font-size: 0.9rem;
        }

        /* The highlighted plan reads as one continuous column, not three tinted boxes. */
        & [data-featured="true"] {
            background: color-mix(in srgb, var(--color-accent) 7%, transparent);
            border-inline: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
        }

        /* A 7% tint disappears against the near-black surface — the dark theme needs more of it
           to keep the highlighted column readable as one column. */
        @media (prefers-color-scheme: dark) {
            & [data-featured="true"] {
                background: color-mix(in srgb, var(--color-accent) 15%, transparent);
            }
        }

        & .plan-matrix__plan[data-featured="true"] {
            border-block-start: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
            border-start-start-radius: var(--radius-l);
            border-start-end-radius: var(--radius-l);
        }

        & .plan-matrix__price[data-featured="true"] {
            border-block-end: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
            border-end-start-radius: var(--radius-l);
            border-end-end-radius: var(--radius-l);
        }
    }

    /* Phone: four columns can't hold prose, so each row becomes "capability, then the three
       answers side by side", and the price blocks stack full width where the CTA has room. */
    @media (max-width: 52rem) {
        .plan-matrix {
            display: block;

            /* minmax(0, 1fr), not 1fr: a plan name or a long word would otherwise push its
               column past its share and the whole matrix past the viewport. */
            & .plan-matrix__head,
            & .plan-matrix__row {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            & .plan-matrix__plan,
            & .plan-matrix__cell {
                padding-inline: var(--space-3xs);
                overflow-wrap: break-word;
            }

            & .plan-matrix__plan-name {
                font-size: 1rem;
            }

            & .plan-matrix__foot {
                display: block;
            }

            & .plan-matrix__corner {
                display: none;
            }

            & .plan-matrix__feature {
                grid-column: 1 / -1;
                padding-inline: 0;
                border-block-start-width: 2px;
            }

            & .plan-matrix__cell {
                border-block-start: none;
                padding-block-start: var(--space-2xs);
            }

            /* A pill this narrow would wrap inside its own background — drop to plain small caps. */
            & .plan-matrix__plan-badge {
                background: none;
                color: var(--color-accent);
                padding: 0;
            }

            & .plan-matrix__plan-claim {
                display: none;
            }

            & .plan-matrix__cell-plan {
                position: static;
                width: auto;
                height: auto;
                clip-path: none;
                white-space: normal;
                color: var(--color-text-muted);
                font-size: 0.65rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            & .plan-matrix__price {
                margin-block-start: var(--space-s);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-l);
            }

            & [data-featured="true"] {
                border-inline: none;
            }

            & .plan-matrix__price[data-featured="true"] {
                border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
                border-radius: var(--radius-l);
            }
        }
    }
}