/* ==========================================================================
   /platform/ — the connected event + audience narrative (§35).

   Five capability groups, each a full-width band rather than a feature grid,
   because the argument is that they are one system and a grid of tiles argues
   the opposite. Layers on home.css, which loads first on this page; the band,
   hero and button systems come from there.

   Deliberately its own sheet rather than more lines in home.css: this page is
   the only consumer, and keeping it separate keeps the homepage sheet from
   growing a section it does not use.
   ========================================================================== */

/* --- Section jump list ---
   Five bands is a long page. The list gives the reader the shape up front and
   a way back to it, without pretending to be a second navigation bar. */
.platform-toc {
    background: var(--blue-deep);
    border-bottom: 1px solid var(--edge);
    padding: 1.1rem 1.5rem;
    position: sticky;
    /* Sticks BELOW the fixed .site-nav (marketing.css: 64px, 56px under 768px),
       not at top:0 — the nav is z-index 1000 and opaque, so a toc stuck at 0
       would be painted behind it and never seen. First sticky element in the
       repo; matches the offset convention .nav-links already uses. */
    top: 64px;
    z-index: 20;
}
.platform-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    counter-reset: toc;
}
.platform-toc li { counter-increment: toc; }
.platform-toc a {
    font-family: 'Source Code Pro', monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: var(--cream-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
}
.platform-toc a::before {
    content: counter(toc, decimal-leading-zero) " ";
    color: var(--yellow);
}
.platform-toc a:hover { color: var(--cream); }
.platform-toc a:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}

/* Anchored bands must clear BOTH the fixed nav and the sticky list when jumped
   to (64px + ~53px), or the heading lands tucked behind the list. */
.band[id] { scroll-margin-top: 7.5rem; }

/* --- A capability group --- */
.platform-group { max-width: 74ch; }
.platform-group h2 { margin-bottom: 1.5rem; }
.platform-group .big-body + .big-body { margin-top: 1.25rem; }

/* --- The capability list that closes each group ---
   Supporting detail, not the headline: mono and small, so it reads as an index
   of what the prose above just described rather than as a feature dump. */
.cap-list {
    list-style: none;
    padding: 1.5rem 0 0;
    margin: 2.25rem 0 0;
    border-top: 1px solid var(--edge);
    display: grid;
    gap: 0.6rem 1.5rem;
    grid-template-columns: 1fr;
}
.cap-list li {
    position: relative;
    padding-left: 1.4rem;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--cream-dim);
}
.cap-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5rem;
    height: 1px;
    background: var(--yellow);
}
/* On cream bands the type and rule invert. */
.cap-list-dark { border-top-color: rgba(0, 40, 80, 0.16); }
.cap-list-dark li { color: rgba(0, 40, 80, 0.72); }
.cap-list-dark li::before { background: var(--magenta); }

/* .site-nav drops to 56px here, so the sticky offset follows it. Must stay in
   lockstep with the nav collapse breakpoint in marketing.css — it moved from
   768px to 860px when the six-item IA landed, and a mismatch here leaves the
   list floating 8px off the nav. The list wraps to two rows at this width, so
   anchors need to clear more, not less. */
@media (max-width: 860px) {
    .platform-toc { top: 56px; }
    .band[id] { scroll-margin-top: 9.5rem; }
}

@media (min-width: 620px) {
    .cap-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
    .platform-toc { padding: 1.1rem 2rem; }
    .cap-list { grid-template-columns: repeat(3, 1fr); }
}

/* The sticky list is a convenience, not a necessity — drop it when the viewport
   is short enough that it would eat meaningful reading room. */
@media (max-height: 560px) {
    .platform-toc { position: static; }
}