/* badmintonapi.com: /support. The hero, four routes, the answers (the site's own), and around them Uni's support kit
   for opening and following tickets (its .us-* classes are left as the kit draws them). */

/* 1. hero: small keyword h1, the big line, the answer search, and the service state read live */
.sp-hero { position: relative; overflow: hidden; color: #fff; border-bottom: 1px solid var(--gold);
  background: radial-gradient(50% 90% at 88% 0%, rgba(34,150,112,.42) 0%, rgba(34,150,112,0) 70%), radial-gradient(40% 70% at 0% 100%, rgba(226,199,127,.12) 0%, rgba(226,199,127,0) 70%), linear-gradient(170deg, #0B4A3E 0%, #072E27 100%); }
.sp-bg { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.sp-grid { position: absolute; inset: -44px; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; animation: sp-drift 30s linear infinite; }
@keyframes sp-drift { to { transform: translate(44px, 44px); } }
.sp-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-bg path { fill: none; stroke: var(--gold-lt); stroke-width: 1.2; stroke-dasharray: 6 10; opacity: .5; animation: sp-fly 9s linear infinite; }
.sp-bg path + path { animation-duration: 13s; opacity: .3; }
@keyframes sp-fly { to { stroke-dashoffset: -320; } }
.sp-hero-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 52px 24px 64px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.sp-kw { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 500 12px "Zen Kaku Gothic New", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lt); }
.sp-kw::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.sp-title { display: block; margin: 14px 0 0; font: 700 40px/1.15 "Shippori Mincho", serif; letter-spacing: -.01em; }
.sp-hero p { margin: 12px 0 0; max-width: 540px; font-size: 15.5px; color: rgba(255,255,255,.74); }
.sp-find { margin-top: 26px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; max-width: 540px; background: #fff; border-radius: 10px; color: var(--ink); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); cursor: text; }
.sp-find svg { color: var(--muted); }
.sp-find input { flex: 1; min-width: 0; border: 0; outline: 0; font: 15px "Zen Kaku Gothic New", sans-serif; color: var(--ink); background: transparent; }
.sp-find kbd { font: 500 11px "IBM Plex Mono", monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.sp-cta { display: flex; gap: 12px; margin-top: 16px; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 156px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: 500 14px "Zen Kaku Gothic New", sans-serif; color: var(--ink); white-space: nowrap; cursor: pointer; }
.sp-btn-g { background: var(--gold); border-color: var(--gold); color: var(--deeper); }
.sp-btn-d { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.sp-btn-j { background: var(--jade); border-color: var(--jade); color: #fff; }
.sp-btn:hover { filter: brightness(1.06); }

.sp-st { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 18px 18px 8px; }
.sp-st-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px; white-space: nowrap; }
.sp-st-h span:last-child { letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--gold-lt); }
.sp-st-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 40px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.sp-st-row:first-of-type { border-top: 0; }
.sp-st-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-st-row em { font: 500 12px "IBM Plex Mono", monospace; font-style: normal; color: rgba(255,255,255,.55); white-space: nowrap; }
.sp-d { width: 8px; height: 8px; border-radius: 50%; background: #3FAE7A; animation: sp-pulse 2.4s ease-out infinite; }
.sp-d.delayed { background: var(--gold); animation: none; }
.sp-d.failing { background: #D0663A; animation: none; }
.sp-d.waiting { background: rgba(255,255,255,.35); animation: none; }
.sp-st-row:nth-of-type(2) .sp-d { animation-delay: .4s; } .sp-st-row:nth-of-type(3) .sp-d { animation-delay: .8s; } .sp-st-row:nth-of-type(4) .sp-d { animation-delay: 1.2s; }
.sp-st-row:nth-of-type(5) .sp-d { animation-delay: 1.6s; } .sp-st-row:nth-of-type(6) .sp-d { animation-delay: 2s; }
@keyframes sp-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,174,122,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(63,174,122,0); } }
.sp-st-f { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 6px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: rgba(255,255,255,.55); white-space: nowrap; }
.sp-st-f a { color: var(--gold-lt); }

/* a ticket page: a short band instead of the hero */
.sp-band { color: #fff; border-bottom: 1px solid var(--gold); background: linear-gradient(170deg, #0B4A3E 0%, #072E27 100%); }
.sp-band-in { max-width: 1200px; margin: 0 auto; padding: 28px 24px 44px; }
.sp-band .sp-title { font-size: 30px; margin-top: 10px; }

/* 2. four routes */
.sp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px 72px; }
.sp-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -28px; position: relative; }
.sp-rt { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px -24px rgba(10,63,53,.5); transition: transform .15s, border-color .15s; }
.sp-rt:hover { transform: translateY(-2px); border-color: var(--gold); }
.sp-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #F1F6F3; color: var(--jade); }
.sp-rt strong { font-weight: 500; font-size: 16px; color: var(--deep); margin-top: 6px; }
.sp-rt p { margin: 0; font-size: 13.5px; color: var(--muted); }
.sp-rt span { font-size: 13px; color: var(--jade); white-space: nowrap; }

/* 3. the desk: answers (or the kit on a ticket page) beside a side column */
.sp-desk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-top: 40px; align-items: start; }
.sp-band + .sp-wrap .sp-desk { margin-top: -24px; }
.sp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sp-h h2 { margin: 0; font: 700 24px/1.2 "Shippori Mincho", serif; color: var(--deep); }
.sp-h small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.sp-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 22px 22px; }
.sp-band + .sp-wrap .sp-panel { padding-top: 18px; }
.sp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.sp-tabs a { display: flex; align-items: center; justify-content: center; min-width: 150px; height: 46px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.sp-tabs a.on { color: var(--jade); border-color: var(--jade); }
.sp-tabs a:hover { color: var(--jade); }
.sp-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.sp-chip { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; font: 13px "Zen Kaku Gothic New", sans-serif; color: var(--muted); background: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; }
.sp-chip.on { background: var(--jade); border-color: var(--jade); color: #fff; }
.sp-grp { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.sp-q { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fff; scroll-margin-top: 90px; }
.sp-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 15px; color: var(--ink); }
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.sp-q[open] { border-color: #CFE0D8; background: #FBFDFC; }
.sp-q[open] summary::after { content: "\2212"; }
.sp-q div { padding: 0 16px 14px; font-size: 14.5px; color: #3D4743; }
.sp-q code, .sp-card code { font: 500 12.5px "IBM Plex Mono", monospace; background: #F3F0E7; border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.sp-q a, .sp-none a { color: var(--jade); text-decoration: underline; text-underline-offset: 2px; }
.sp-none { padding: 18px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; }
.sp-none[hidden] { display: none; }

.sp-side { display: grid; gap: 16px; }
.sp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.sp-card h3 { margin: 0 0 10px; font: 500 15px "Zen Kaku Gothic New", sans-serif; color: var(--deep); display: flex; align-items: center; gap: 10px; }
.sp-card h3 svg { color: var(--jade); }
.sp-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13.5px; color: #3D4743; }
.sp-card li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.sp-card li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--gold); }
.sp-card p { margin: 0; font-size: 13.5px; color: #3D4743; }
.sp-card .sp-btn { width: 100%; margin-top: 14px; }
.sp-card.dark { background: linear-gradient(170deg, #0B4A3E, #072E27); color: #fff; border-color: transparent; }
.sp-card.dark h3, .sp-card.dark h3 svg { color: var(--gold-lt); }
.sp-card.dark p { color: rgba(255,255,255,.74); }

/* 4. how a ticket runs */
.sp-flow { margin-top: 48px; }
.sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: sp; }
.sp-step { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.sp-step::before { counter-increment: sp; content: counter(sp); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--jade); font: 500 13px "IBM Plex Mono", monospace; margin-bottom: 10px; }
.sp-step strong { display: block; font-weight: 500; color: var(--deep); }
.sp-step p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .sp-grid, .sp-bg path, .sp-d { animation: none; } }
@media (max-width: 980px) {
  .sp-hero-in, .sp-desk { grid-template-columns: minmax(0, 1fr); }
  .sp-routes, .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sp-hero-in { padding: 36px 16px 52px; }
  .sp-band-in { padding: 24px 16px 40px; }
  .sp-title { font-size: 30px; }
  .sp-band .sp-title { font-size: 26px; }
  .sp-cta .sp-btn { flex: 1; min-width: 0; }
  .sp-wrap { padding: 0 16px 56px; }
  .sp-routes, .sp-steps { grid-template-columns: minmax(0, 1fr); }
  .sp-tabs a { min-width: 0; flex: 1; }
  .sp-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-panel { padding: 4px 14px 16px; }
}