.subtitle {
            max-width: 46rem;
            line-height: 1.5;
        }

        .cards {
            display: grid;
            /* Three columns by default, filling the page width, and stepping
               down to two and then one as the viewport narrows. */
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        @media (max-width: 70rem) {
            .cards {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 42rem) {
            .cards {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .card {
            display: block;
            padding: 1.1rem 1.2rem;
            border: 1px solid #33343a;
            border-radius: 8px;
            background: #232429;
            color: inherit;
            text-decoration: none;
        }

        a.card:hover {
            border-color: #2d5fa3;
            background: #262a31;
        }

        .card h2 {
            margin: 0 0 0.4rem;
            font-size: 1rem;
            color: #e6e6e6;
        }

        .card p {
            margin: 0;
            font-size: 0.82rem;
            color: #999;
            line-height: 1.5;
        }

        .card .path {
            display: block;
            margin-top: 0.7rem;
            color: #9ecbff;
            font-family: monospace;
            font-size: 0.75rem;
        }

        /* A section this deployment does not serve. Still shown, because one
           quietly missing from a landing page is worse than one that explains
           itself. */
        .card.unavailable {
            opacity: 0.65;
        }

        .card.unavailable .path {
            color: #777;
        }

        .note {
            margin-top: 0.7rem;
            padding: 0.5rem 0.6rem;
            border-left: 2px solid #6f5a1f;
            background: #24211a;
            color: #ffe9b0;
            font-size: 0.78rem;
            line-height: 1.45;
        }

        code {
            padding: 0.05rem 0.3rem;
            border-radius: 3px;
            background: #17181c;
            font-size: 0.95em;
        }