* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background: rgb(255, 255, 255);
    color: rgb(29, 29, 31);
}

.back-nav {
    padding: 13px 32px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.back-link {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.42);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.back-link:hover {
    color: rgb(29, 29, 31);
}

.content {
    padding: 24px 32px 40px;
}

h1 {
    font-size: 18px;
    font-weight: 600;
    color: rgb(29, 29, 31);
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Columnas tipo mosaico en vez de grid: cada categoría fluye llenando su
   columna, así las cortas no dejan el hueco vacío que deja una fila de
   grid estirada por la categoría más larga.
   El número de columnas depende del ancho disponible: angostar de más
   hace que el texto largo (p. ej. Application & System) se parta en más
   líneas, y ese wrap extra come más de lo que se gana repartiendo en más
   columnas. Medido: a ~1100px, 3 columnas gana; a ~1300px o más, 5 gana. */
.grid {
    column-count: 3;
    column-gap: 28px;
}

@media (min-width: 1400px) {
    .grid {
        column-count: 5;
        column-gap: 22px;
    }
}

.category {
    break-inside: avoid;
    margin-bottom: 20px;
}

.category h2 {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 10px;
}

.category ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category li {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.62);
    line-height: 1.45;
    padding-left: 12px;
    position: relative;
}

.category li::before {
    content: '·';
    position: absolute;
    left: 2px;
    color: rgba(0, 0, 0, 0.25);
}

.category li strong {
    color: rgba(0, 0, 0, 0.78);
    font-weight: 500;
}

@media (max-width: 720px) {
    .back-nav {
        padding: 12px 20px;
    }

    .content {
        padding: 20px 20px 32px;
    }
}

@media (max-width: 480px) {
    .grid {
        column-count: 1;
    }
}

@media (min-width: 481px) and (max-width: 720px) {
    .grid {
        column-count: 2;
    }
}