/* basketballapi.net: /support (preview 319). The kit inside keeps its own look; this styles only the frame round it. */
.sup .btn.line { box-shadow: inset 0 0 0 1px #475467; color: #fff; background: transparent; }
.sup .btn.line:hover { background: rgba(255,255,255,.07); }
.sup .btn.dark { background: var(--ink); color: #fff; }
.sup .btn.dark:hover { background: var(--ink-2); }

/* the hero: a faint grid and the logo's cells drifting, the keyword small, the line large, a desk answering by itself */
.s-hero { position: relative; overflow: hidden; background: radial-gradient(900px 380px at 80% 0%, #1B2438 0%, var(--ink) 60%, var(--ink-0) 100%); color: #fff; }
.s-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); }
.s-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-hero .wrap { position: relative; padding-top: 54px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.s-hero h1 { margin: 0 0 12px; font: 600 13px "IBM Plex Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-soft); }
.s-title { display: block; font: 800 44px/1.08 "Sora", sans-serif; letter-spacing: -0.04em; margin-bottom: 14px; }
.s-hero p { margin: 0; color: #C9D2E3; font-size: 16.5px; max-width: 50ch; }
.s-acts { display: grid; grid-template-columns: repeat(3, 160px); gap: 10px; margin-top: 26px; }
.s-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px; font-size: 13.5px; color: #98A2B3; }
.s-st { display: inline-flex; align-items: center; gap: 8px; }
.s-st::before, .sline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #98A2B3; }
.s-st[data-state="up"]::before, .sline[data-state="up"]::before { background: var(--good); box-shadow: 0 0 0 4px rgba(18,183,106,.18); }
.s-st[data-state="degraded"]::before, .sline[data-state="degraded"]::before { background: #F79009; box-shadow: 0 0 0 4px rgba(247,144,9,.18); }
.s-st[data-state="down"]::before, .sline[data-state="down"]::before { background: #F04438; box-shadow: 0 0 0 4px rgba(240,68,56,.18); }

.desk { background: #fff; color: var(--text); border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); overflow: hidden; }
.d-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #F2F4F7; font-size: 13px; color: var(--muted); }
.d-top b { color: var(--text); font-weight: 600; }
.d-body { padding: 18px 18px 20px; min-height: 248px; display: flex; flex-direction: column; gap: 12px; }
.bub { max-width: 88%; border-radius: 12px; padding: 10px 13px; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.bub.on { opacity: 1; transform: none; }
.bub.q { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.bub.a { align-self: flex-start; background: #F2F4F7; color: #344054; border-bottom-left-radius: 4px; }
.bub.a kbd { font: 500 12px "IBM Plex Mono", monospace; background: #fff; border-radius: 4px; padding: 0 4px; }
.bub.a b { font-weight: 600; color: var(--text); }
.bub small { display: block; margin-top: 6px; font-size: 12px; color: var(--orange-deep); font-weight: 600; }
.typing { align-self: flex-start; display: none; gap: 4px; padding: 12px 14px; background: #F2F4F7; border-radius: 12px; }
.typing.on { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #98A2B3; animation: s-blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes s-blink { 50% { opacity: .3; } }
.d-dots { display: flex; gap: 6px; padding: 0 18px 16px; }
.d-dots i { flex: 1; height: 3px; border-radius: 2px; background: #EAECF0; overflow: hidden; }
.d-dots i.on::after { content: ""; display: block; height: 100%; background: var(--orange); animation: s-fill 6s linear forwards; }
@keyframes s-fill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bub { transition: none; } .d-dots i.on::after { animation: none; width: 100%; } }

/* four routes over the hero's edge */
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: -30px; position: relative; z-index: 2; }
.route { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 12px 30px -24px rgba(16,24,40,.5); transition: border-color .15s, transform .15s; }
.route:hover { border-color: var(--orange-soft); transform: translateY(-2px); }
.route .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: #FFF4EB; color: var(--orange-deep); display: grid; place-items: center; }
.route svg { width: 19px; height: 19px; }
.route b { display: block; font: 700 15.5px "Sora", sans-serif; letter-spacing: -0.01em; }
.route span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.route:focus-visible, .sup .card a:focus-visible { outline: 3px solid var(--orange-soft); outline-offset: 2px; }

/* the kit beside a side column that stays in view */
.s-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding-top: 40px; padding-bottom: 80px; }
.kit { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; min-width: 0; }
.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }
.sup .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.sup .card h2 { font: 700 15.5px "Sora", sans-serif; letter-spacing: -0.01em; margin: 0 0 10px; }
.sup .card p { margin: 0 0 12px; color: #475467; font-size: 14px; }
.sup .card .btn { width: 100%; margin-top: 4px; }
.times { width: 100%; border-collapse: collapse; font-size: 14px; }
.times td { padding: 8px 0; border-top: 1px solid #F2F4F7; }
.times tr:first-child td { border-top: 0; }
.times td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.times tr.you td { color: var(--orange-deep); }
.times small { font-size: 11.5px; font-weight: 600; background: #FFF4EB; border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.check { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #344054; }
.check li { display: flex; gap: 9px; }
.check li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: #ECFDF3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23067647' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.check kbd { font: 500 12px "IBM Plex Mono", monospace; background: #F2F4F7; border-radius: 4px; padding: 0 4px; }
.sline { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 8px; }
.sup .card .lk { display: inline-flex; font-weight: 600; color: var(--orange-deep); font-size: 14px; }
.l-title a { color: inherit; }

@media (max-width: 1100px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-body { grid-template-columns: minmax(0, 1fr); } .side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .s-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 640px) { .s-title { font-size: 32px; } .s-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .routes, .side { grid-template-columns: minmax(0, 1fr); } .kit { padding: 18px 16px; } }