/* =============================================================================
   NETZERO AQUA — PLATFORM PAGE
   =============================================================================
   Requires na-system.css and na-blocks.css. Only two things on this page are
   not already shared: the full intelligence-layer card (the home page carries
   a compact version of the same idea) and the data-flow panel beside it.
   ========================================================================== */

/* ---- Full intelligence-layer card -----------------------------------------
   Five across on a wide screen, and a swipe row on a phone. The card grows a
   capability list and a CTA that the home page's compact version does not
   have, because this is the page where someone actually reads them.
   -------------------------------------------------------------------------- */

.na-lyr {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
    scroll-margin-top: calc(var(--na-header-h) + 24px);
}

.na-lyr__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.na-lyr__head .na-num { margin: 0; }
.na-lyr__head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--na-dark-line-2), transparent);
}

.na-lyr__kicker {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--na-aqua);
    margin-bottom: 0.75rem;
}

/* Two of the five titles wrap to a second line and three do not, which left
   the descriptions starting at different heights across the row. Reserving
   two lines costs nothing and buys a straight baseline. */
.na-lyr h3 {
    font-size: 1.0625rem;
    margin-bottom: 0.4rem;
    min-height: 2.2em;
}
@media (max-width: 860px) { .na-lyr h3 { min-height: 0; } }
.na-lyr > p { font-size: 0.875rem; }

.na-lyr .na-list { padding-top: 1rem; }

/* The CTA sits on the card floor whatever the capability count, so a row of
   five cards has one straight line of links across the bottom. */
.na-lyr .na-link {
    margin-top: auto;
    padding-top: 1.25rem;
    font-size: 0.8125rem;
}

/* ---- Data-flow panel ------------------------------------------------------
   Holds the .na-chain from na-blocks.css and gives it a ground.
   -------------------------------------------------------------------------- */

.na-flowpanel {
    padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    border-radius: var(--na-r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid var(--na-dark-line);
}
.na-flowpanel h3 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ---- Hero tower caption ---- */
.na-tower__caption {
    margin-top: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--na-on-dark-3);
    text-align: center;
}