/*
 * Page layer for /integrations/ — the hub for 47 child pages.
 *
 * Almost everything here comes from p-shared.css (.crumb, .subhero, .cap,
 * .note, .link-grid, .pairs, .steps, .faq, .cta-final), shared.css (.grid-3,
 * .grid-4, .card, .btn) and fx.css (.chan-card, .dot, .fx-in). Three things
 * this page needs that none of them provide are below.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-integrations.css.
 * No literal colour, radius or font size: every value resolves to a token.
 */

/* .chan-card is sized for the homepage's horizontal .rail-scroll, where a
   fixed 224px is what makes the cards snap. Here all eleven have to be visible
   at once, so the card gives its width back to the grid track. */
.grid-4 .chan-card { width: auto; }

/* The eleven-row matrix is the widest table on the site. .cap restacks into
   cards at 720px, but between there and the container width six columns still
   overflow, so this one table scrolls sideways in that band instead. */
.matrix { overflow-x: auto; }
@media (min-width: 721px) { .matrix .cap { min-width: 940px; } }
.matrix .cap tbody th a:hover { color: var(--accent); text-decoration: underline; }

/* Thirty-six pairs in one list is unscannable, so they are grouped by first
   channel. .pairs is the chip-list grouping; these hold a .link-grid. */
.pair-group + .pair-group { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.pair-group h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.pair-group__n { color: var(--muted); font-weight: 500; }