/* ---------------------------------------------------------------------------
   next-links.css — the "where to go from here" strip, at the foot of a page.

   Deliberately quieter than a card and louder than a footer link: it is an
   offer, not the page's own content, and it sits between the two. Cards rather
   than a list of links because the second line is the part that does the work —
   the name of a page tells someone who already knows what it is; the sentence
   under it tells everyone else whether they want it.
   --------------------------------------------------------------------------- */
.nxt {
    max-width: 1400px;
    margin: 34px auto 6px;
    padding: 0 20px;
}
.nxt-h {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5a5f72;
    margin-bottom: 12px;
}
.nxt-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.nxt-a {
    position: relative;
    display: block;
    padding: 15px 34px 15px 16px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.nxt-a:hover {
    border-color: rgba(139, 92, 246, 0.42);
    background: rgba(139, 92, 246, 0.07);
    transform: translateY(-1px);
}
.nxt-t {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #e8eaf2;
    letter-spacing: -0.01em;
}
.nxt-d {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #8a8fa3;
}
/* The arrow is the affordance; it only commits to a direction on hover, so a
   row of four does not read as four things shouting at once. */
.nxt-go {
    position: absolute;
    top: 15px;
    right: 14px;
    font-size: 13px;
    color: #5a5f72;
    transition: color 0.15s, transform 0.15s;
}
.nxt-a:hover .nxt-go {
    color: #8b5cf6;
    transform: translateX(2px);
}
/* One link per strip may be the thing the page is actually for. */
.nxt-a.hot {
    border-color: rgba(139, 92, 246, 0.32);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(255, 255, 255, 0.02) 60%);
}
.nxt-a.hot .nxt-go { color: #8b5cf6; }

@media (prefers-reduced-motion: reduce) {
    .nxt-a, .nxt-go { transition: none; }
    .nxt-a:hover { transform: none; }
}