/* Subsonic — dark console: near-black, acid-green signal, mono labels, hairline grids. */
.theme-subsonic {
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ok: #39ff88; --ok-soft: rgba(57, 255, 136, .12);
  --warn: #ffc857; --warn-soft: rgba(255, 200, 87, .12);
  --bad: #ff6b6b; --bad-soft: rgba(255, 107, 107, .12);
  --info: #5cc8ff; --info-soft: rgba(92, 200, 255, .12);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 12px 30px -18px rgba(0, 0, 0, .8);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .9);
  --glow: 0 0 0 1px rgba(57, 255, 136, .35), 0 0 28px -6px rgba(57, 255, 136, .45);
  color-scheme: dark;
}
.theme-subsonic h1, .theme-subsonic h2, .theme-subsonic h3 { font-weight: 650; letter-spacing: -.025em; }
.theme-subsonic .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .04em; text-transform: none; }
.theme-subsonic .lead { color: #a7b3c2; }
.theme-subsonic .site-header { background: rgba(10, 15, 20, .86); border-bottom-color: #1a2533; }
.theme-subsonic .main-nav a { font-weight: 500; }
.theme-subsonic .main-nav a:hover { background: #142030; }
.theme-subsonic .btn { border-radius: 6px; font-weight: 600; }
.theme-subsonic .btn-primary { box-shadow: 0 0 24px -8px rgba(57, 255, 136, .7); }
.theme-subsonic .btn-primary:hover { background: #6bffa6; }
.theme-subsonic .btn-secondary { background: transparent; border-color: #2c3d52; }
.theme-subsonic .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.theme-subsonic .btn-ghost:hover { background: #142030; }
.theme-subsonic .section-alt { background: #0c121a; border-color: #1a2533; }
.theme-subsonic .card { background: linear-gradient(180deg, #111a25, #0e151e); }
.theme-subsonic a.card:hover { border-color: rgba(57, 255, 136, .55); box-shadow: var(--glow); }
.theme-subsonic .card-icon { background: rgba(57, 255, 136, .1); color: var(--primary); border: 1px solid rgba(57, 255, 136, .25); border-radius: 6px; }
.theme-subsonic .price-card { background: #0f1620; }
.theme-subsonic .price-card.featured { box-shadow: var(--glow); }
.theme-subsonic .price { font-family: var(--font-mono); font-weight: 600; font-size: 1.75rem; letter-spacing: -.04em; }
.theme-subsonic .steps li::before { border-radius: 4px; font-family: var(--font-mono); font-size: .85rem; }
.theme-subsonic .callout { background: rgba(57, 255, 136, .06); border-left-color: var(--primary); }
.theme-subsonic .cta-band { background: #0f1620; color: var(--text); border: 1px solid rgba(57, 255, 136, .4); box-shadow: var(--glow); }
.theme-subsonic .cta-band .btn-secondary { background: var(--primary); color: var(--primary-ink); }
.theme-subsonic code, .theme-subsonic kbd { background: #142030; color: var(--primary); }
.theme-subsonic input[type=file] { background: #142030; }
.theme-subsonic .table th { background: #121b26; }
.theme-subsonic .site-footer { background: #070b0f; border-top-color: #1a2533; }
.theme-subsonic .pay-chip { background: #0f1620; }
/* Core alerts and badges use light backgrounds; restyle them for the dark theme. */
.theme-subsonic .alert-success { background: var(--ok-soft); color: #c9ffe0; }
.theme-subsonic .alert-error { background: var(--bad-soft); color: #ffd4d4; }
.theme-subsonic .alert-warning { background: var(--warn-soft); color: #ffe9b8; }
.theme-subsonic .alert-info { background: var(--info-soft); color: #d2efff; }
.theme-subsonic .alert a { color: inherit; }
.theme-subsonic .test-banner { background: #1d1a0d; color: #ffe08a; border-bottom-color: #3a3214; }
.theme-subsonic .svc-compare .is-featured { background: rgba(57, 255, 136, .06); }
.theme-subsonic #rules, .theme-subsonic #lifecycle { scroll-margin-top: 70px; }

/* Hero */
.ss-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(48px, 7vw, 88px); border-bottom: 1px solid #1a2533; }
.ss-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(57, 255, 136, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 136, .06) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 70% 40%, #000 0, transparent 70%); pointer-events: none; }
.ss-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ss-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.04; }
.ss-hero h1 span { color: var(--primary); display: block; }
.ss-hero .lead { max-width: 44ch; }
.ss-term { margin: 0; background: #060a0e; border: 1px solid #22324a; border-radius: 10px; box-shadow: 0 30px 70px -30px rgba(57, 255, 136, .35); overflow: hidden; }
.ss-term-bar { display: flex; gap: 7px; align-items: center; padding: 10px 14px; background: #0d141d; border-bottom: 1px solid #1a2533; }
.ss-term-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2b3a4d; }
.ss-term-bar span:first-child { background: #ff6b6b; }
.ss-term-bar small { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: #6f7d8f; }
.ss-term-body { margin: 0; padding: 20px 20px 22px; font-family: var(--font-mono); font-size: .76rem; line-height: 1.85; color: #c9d4e0; white-space: pre-wrap; overflow-x: auto; }
.ss-term-body .p { color: var(--accent); }
.ss-term-body .ok { color: var(--primary); }
.ss-term-body .no { color: #ff8f8f; }
.ss-caret { display: inline-block; width: .6em; height: 1.1em; background: var(--primary); vertical-align: -.2em; margin-left: 4px; animation: ss-blink 1.1s steps(1) infinite; }
@keyframes ss-blink { 50% { opacity: 0; } }

/* Rules of engagement */
.ss-rules { padding: 56px 0; background: linear-gradient(180deg, rgba(57, 255, 136, .05), transparent); border-bottom: 1px solid #1a2533; }
.ss-rules-head h2 { margin-bottom: 24px; }
.ss-rules-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #22324a; border-radius: 8px; overflow: hidden; }
.ss-rules-list li { padding: 22px; border-right: 1px solid #22324a; background: #0c131b; }
.ss-rules-list li:last-child { border-right: 0; }
.ss-rules-list span { font-family: var(--font-mono); color: var(--primary); font-size: .8rem; display: block; margin-bottom: 10px; }
.ss-rules-list h3 { font-size: 1.05rem; }
.ss-rules-list p { color: var(--muted); font-size: .9rem; margin: 0; }

/* Featured */
.ss-featured .svc-card .card-icon { margin-bottom: 18px; }

/* Pipeline */
.ss-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.ss-pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: linear-gradient(90deg, var(--primary), rgba(57, 255, 136, .15)); }
.ss-pipe li { position: relative; padding: 34px 16px 0 0; }
.ss-pipe li::before { content: ""; position: absolute; top: 7px; left: 0; width: 13px; height: 13px; border-radius: 3px; background: var(--bg); border: 2px solid var(--primary); }
.ss-pipe li:nth-child(2)::before { background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.ss-pipe code { background: none; padding: 0; font-size: .72rem; color: var(--primary); }
.ss-pipe h3 { font-size: 1.02rem; margin: .5em 0 .3em; }
.ss-pipe p { color: var(--muted); font-size: .88rem; margin: 0; }

/* Will / won't */
.ss-col { border: 1px solid #22324a; border-radius: 8px; padding: 28px; background: #0f1620; }
.ss-col h2 { font-size: 1.5rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: -.04em; }
.ss-col ul { list-style: none; padding: 0; margin: 0; }
.ss-col li { padding: 10px 0 10px 30px; border-top: 1px solid #1a2533; position: relative; color: #c3cdd9; }
.ss-col li::before { position: absolute; left: 0; top: 10px; font-family: var(--font-mono); font-weight: 700; }
.ss-col-yes { border-color: rgba(57, 255, 136, .35); }
.ss-col-yes h2 { color: var(--primary); }
.ss-col-yes li::before { content: "+"; color: var(--primary); }
.ss-col-no { border-color: rgba(255, 107, 107, .35); }
.ss-col-no h2 { color: #ff8f8f; }
.ss-col-no li::before { content: "×"; color: #ff8f8f; }

/* Why — config block */
.ss-config-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: start; }
.ss-config { margin: 0; background: #060a0e; border: 1px solid #22324a; border-radius: 8px; padding: 10px 0; font-size: .92rem; }
.ss-config > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 20px; }
.ss-config > div:hover { background: #0c131b; }
.ss-config dt { font-family: var(--font-mono); color: var(--accent); font-size: .8rem; padding-top: 2px; }
.ss-config dt::after { content: ":"; color: #6f7d8f; }
.ss-config dd { margin: 0; color: #c9d4e0; }

@media (max-width: 980px) {
  .ss-hero-grid, .ss-config-wrap { grid-template-columns: 1fr; }
  .ss-rules-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-rules-list li:nth-child(2) { border-right: 0; }
  .ss-rules-list li:nth-child(-n + 2) { border-bottom: 1px solid #22324a; }
  .ss-pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .ss-pipe::before { display: none; }
}
@media (max-width: 640px) {
  .ss-rules-list, .ss-pipe { grid-template-columns: 1fr; }
  .ss-rules-list li { border-right: 0; border-bottom: 1px solid #22324a; }
  .ss-config > div { grid-template-columns: 1fr; gap: 2px; }
  .ss-term-body { font-size: .64rem; padding: 16px; }
}

/* Keep .sr-only labels inside scrolling tables (module compare table) from widening the page on phones. */
.table-wrap { position: relative; }