.v2-footer {
    border-top: 1px solid var(--v2-border);
    background: var(--v2-bg-deep);
    padding: 60px var(--v2-pad) 28px;
}
.v2-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--v2-border);
    margin: 0 auto 20px;
    max-width: var(--v2-max);
}
.v2-footer__brand img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.v2-footer__tag {
    font-size: 14px; color: var(--v2-muted); margin-top: 16px; line-height: 1.5; max-width: 280px;
}
.v2-footer__status {
    display: flex; gap: 8px; align-items: center; margin-top: 18px;
    font-family: var(--v2-f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--v2-muted);
}
.v2-footer__status .dot { color: var(--v2-accent); }

.v2-footer__col h4 {
    font-family: var(--v2-f-mono); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; font-weight: 500;
    color: var(--v2-accent); margin: 0 0 18px;
}
.v2-footer__col a {
    display: block; margin-bottom: 8px;
    font-family: var(--v2-f-mono); font-size: 12px;
    color: var(--v2-text-lead); letter-spacing: 0.5px;
}
.v2-footer__col a:hover { color: var(--v2-accent); }

/* The footer columns use <details>/<summary> for mobile accordion.
   A tiny inline script in footer.html keeps every column open on
   tablet/desktop and toggles mobile behaviour. We just neutralise the
   default summary affordance (triangle marker + text cursor). */
details.v2-footer__col { display: block; }
details.v2-footer__col > summary {
    list-style: none;
    cursor: default;
}
details.v2-footer__col > summary::-webkit-details-marker { display: none; }
details.v2-footer__col > summary::marker { content: ""; }
details.v2-footer__col > summary h4 { display: block; }

@media (min-width: 641px) {
    /* Desktop: details always [open] via JS, summary isn't interactive */
    details.v2-footer__col > summary { pointer-events: none; }
}

.v2-footer__bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    max-width: var(--v2-max); margin: 0 auto;
    font-family: var(--v2-f-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--v2-muted-deep);
}

@media (max-width: 900px) {
    .v2-footer__top { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 520px) {
    .v2-footer__top { grid-template-columns: 1fr; }
}