/* onsol.si: SI on Solana hub. Loaded after si.css, adds only what the hub needs. */
.hub .nav-out{display:inline-flex;align-items:center;gap:6px;color:var(--cyan)}
.hub .nav-out svg{width:14px;height:14px}
@media (max-width:1420px) and (min-width:1201px){.hub .nav{display:flex}.hub .burger{display:none}}
@media (max-width:1540px) and (min-width:1420px){.hub .header-actions .socials{display:flex}}
@media (max-width:1300px) and (min-width:1201px){.hub .nav a{padding:10px 8px;font-size:11.5px;letter-spacing:.08em}.hub .nav a::after{left:8px;right:8px}}

.hub-h3{font-size:clamp(20px,1.9vw,26px);margin:0 0 8px}
.hub-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.hub-sub .hub-h3{margin:0}
.section-head p a,.answer p a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}

/* six-step guide: three across, two down, never a half-empty row */
.hub-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);height:auto}
.hub-steps .step{flex:none;height:100%;flex-direction:column;gap:12px;padding:clamp(20px,2vw,26px)}
.hub-steps .step h3{margin-bottom:6px}
.hub-steps .step p{margin:0;color:var(--muted);font-size:15.5px;overflow-wrap:anywhere}

/* safety checklist beside the swap */
.hub-check{display:flex;flex-direction:column;justify-content:center}
.hub-check ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.hub-check li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(3,14,34,.9);font-size:15.5px;color:var(--text);transition:border-color .3s,transform .3s}
.hub-check li:hover{border-color:var(--line2);transform:translateX(4px)}
.hub-check li svg{flex:0 0 22px;width:22px;height:22px;color:var(--cyan);margin-top:1px}
.hub-check code{font-family:var(--f-mono);color:#fff}

/* clickable cards */
a.card{display:flex;flex-direction:column;color:inherit}
a.card .ico .ico-mask{width:26px;height:26px;color:#fff}
.hub-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-family:var(--f-display);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.hub-go svg{width:15px;height:15px;transition:transform .3s}
a.card:hover .hub-go svg{transform:translate(3px,-3px)}
a.card:hover{border-color:var(--line2);box-shadow:var(--glow)}

/* official links: rows always fill edge to edge */
.olinks{display:flex;flex-wrap:wrap;gap:12px}
.olink{flex:1 1 calc(25% - 12px);min-width:min(250px,100%);display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(3,14,34,.9);color:var(--chrome2);transition:border-color .3s,box-shadow .3s,transform .3s}
.olinks.c3 .olink{flex-basis:calc(33.333% - 12px)}
.olink:hover{border-color:var(--cyan);box-shadow:var(--glow);transform:translateY(-3px)}
.ol-ico{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,168,240,.35),rgba(0,48,120,.35));border:1px solid var(--line2)}
.ol-ico svg,.ol-ico .ico-mask{width:22px;height:22px;color:#fff}
.ol-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ol-body b{font-family:var(--f-display);font-size:14px;letter-spacing:.06em;color:#fff}
.ol-body span{font-family:var(--f-mono);font-size:13px;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olink>svg{flex:0 0 16px;width:16px;height:16px;color:var(--steel);transition:transform .3s,color .3s}
.olink:hover>svg{transform:translate(3px,-3px);color:var(--cyan)}

@media (max-width:1180px){.hub-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .hub-steps{grid-template-columns:1fr}
  .hub-steps .step{flex-direction:row}
  .hub-sub{justify-content:center;text-align:center}
  .olink,.olinks.c3 .olink{flex-basis:100%}
}