/* Deep-dive capability cards — 2026-08-14.

   Replaces the old .detail-card: a two-column row whose start column was a
   saturated blue gradient panel, 41% of the card and 210px tall, carrying one
   74px icon and one word. It was the last flat-gradient surface on the site
   (the feature chips, the extension section and the closing banner had already
   moved to tinted glass) and it shouted louder than the text it framed.

   Now: one horizontal card per capability — glass chip, tag, title, sentence,
   and the checkpoints as inline chips instead of a stacked list. That drops
   roughly 40% of the section's height and removes the dead column entirely.

   New class names (.cap-*) rather than redefining .detail-*: the old rules
   live earlier in the cascade at the same specificity, and overriding a grid
   with a flex row property-by-property is how a layout ends up half-applied.
   The .detail-* rules in app-real-ui-*.css are now inert — don't revive them.

   Deliberately NOT another icon grid: the six-card feature grid sits directly
   above on this page, and a second three-column grid would read as a repeat. */

.cap-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cap-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px;
    border-radius: 20px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.cap-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 18px 40px var(--ring);
}

@media (prefers-reduced-motion: reduce) {
    .cap-card,
    .cap-card:hover {
        transform: none;
        transition: none;
    }
}

.cap-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    color: color-mix(in srgb, var(--primary) 62%, var(--fg));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--primary) 22%, transparent),
            color-mix(in srgb, var(--accent) 9%, transparent)
        ),
        var(--card);
    border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent);
}

.cap-body {
    flex: 1;
    min-width: 0;
}

.cap-tag {
    margin: 0 0 5px;
    font-size: 11.5px;
    font-weight: 800;
    color: color-mix(in srgb, var(--primary) 72%, var(--fg));
}

/* Matches the site's own kicker treatment: letterspaced caps in English only. */
html[lang="en"] .cap-tag {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cap-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.cap-desc {
    margin: 0;
    max-width: 72ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

/* Checkpoints as inline chips — the stacked list cost three lines per card. */
.cap-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
}

.cap-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--chip);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
}

.cap-points svg {
    flex-shrink: 0;
    color: var(--accent2);
}

@media (max-width: 560px) {
    .cap-card {
        flex-direction: column;
        gap: 14px;
        padding: 22px 20px;
    }
}