/*
  /preview/solutions/ campaign layer (Binary Systems, Inc.)
  PREVIEW. Loaded after the five live stylesheets and the live Services layer
  (/Services/assets/services.css), exactly like the /Products/ page, so the header,
  menu bar, buttons, cards and footer match. Every rule here is scoped to .so-*.
  (assets/site.css in this folder belongs to the older Quawk subpages; this page does not load it.)
*/
.so-hero .sv-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.so-hero .sv-index a { padding: 9px 4px; }
.so-hero .sv-index small { display: block; color: #8d96a3; font-weight: normal; font-size: 12px; letter-spacing: 0; margin-top: 2px; }
.so-hero .sv-index a:hover small { color: #c9ced6; }

/* Problem bands */
.so-band { padding: 64px 0 52px; color: #c9ced6; border-top: 1px solid #000; position: relative;
  background: linear-gradient(180deg, #16181c 0%, #000 100%); }
.so-band h2, .so-band h3 { color: #fff; }
.so-band a { color: var(--sv-sky); }
.so-band a:hover { color: #fff; }
.so-band .sv-lede { color: #dfe4ea; }
.so-band .sv-btn-glass { color: #fff !important; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.so-band .sv-btn-glass:hover { background: rgba(255,255,255,.14); }
.so-band .sv-eyebrow { color: var(--so-accent, var(--sv-fiber)); }
.so-band h2 .l2 { display: block; color: var(--so-accent2, var(--sv-sky)); }
.so-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 44px; align-items: start; }
.so-q { font-size: 15px; letter-spacing: .02em; color: #8d96a3; font-style: italic; margin: 0 0 6px !important; }
.so-facts { margin: 16px 0 4px !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.so-facts li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.so-facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--so-accent, var(--sv-aqua)); }
.so-facts b { color: #fff; }
.so-side { border-radius: 12px; padding: 18px 18px 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(157,206,248,.18); border-top: 3px solid var(--so-accent, var(--sv-aqua)); }
.so-side p { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #8d96a3; margin-bottom: 6px !important; font-weight: bold; }
.so-side li { border-top: 1px solid rgba(255,255,255,.08); }
.so-side a { display: block; padding: 10px 2px; font-weight: bold; text-decoration: none; }
.so-side a small { display: block; font-weight: normal; color: #8d96a3; font-size: 12.5px; }
.so-side img { display: block; width: 120px; height: auto; margin: 4px auto 14px; }

/* Per-problem accents */
.so-carrier { --so-accent: #ff6b5e; --so-accent2: #ff9a90; border-top: 3px solid #8a1c18;
  background: radial-gradient(ellipse 50% 70% at 12% 30%, rgba(224,50,43,.18), transparent 70%), linear-gradient(180deg, #16181c 0%, #000 100%); }
.so-own { --so-accent: var(--sv-sky); --so-accent2: #9dcef8; border-top: 3px solid var(--sv-aqua);
  background: radial-gradient(ellipse 60% 70% at 90% 10%, rgba(45,120,200,.45), transparent 70%), linear-gradient(180deg, #08315c 0%, #061e39 60%, #000 100%); }
.so-secure { --so-accent: var(--sv-fiber); --so-accent2: #a8e6c7; border-top: 3px solid #2f8a5f;
  background: radial-gradient(ellipse 50% 70% at 88% 20%, rgba(111,206,159,.16), transparent 70%), linear-gradient(180deg, #121a17 0%, #000 100%); }
.so-virt { --so-accent: var(--sv-teal); --so-accent2: #9fdcd9; border-top: 3px solid var(--sv-teal);
  background: radial-gradient(ellipse 50% 70% at 12% 20%, rgba(83,176,172,.18), transparent 70%), linear-gradient(180deg, #13191a 0%, #000 100%); }
.so-legacy { --so-accent: #ffb300; --so-accent2: #ffd27a; border-top: 3px solid #ffb300;
  background: radial-gradient(ellipse 50% 70% at 88% 20%, rgba(255,179,0,.14), transparent 70%), linear-gradient(180deg, #1c1e22 0%, #000 100%); }
.so-eng { --so-accent: #c9ced6; --so-accent2: #e8e8e8; border-top: 3px solid #8d96a3;
  background: linear-gradient(180deg, #2a2c30 0%, #0a0b0d 55%, #000 100%); }

/* 02 network diagram (VoxBox sX + Quawk). Wide SVG above 860px, portrait SVG at 860px and below. */
.so-fig { margin: 34px 0 6px; }
.so-fig picture, .so-fig img { display: block; width: 100%; height: auto; }
.so-fig img { border-radius: 14px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); }
.so-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.55; color: #c9ced6; }
.so-fig figcaption b { color: #fff; }
.so-fig .so-fig-note { color: #8d96a3; font-size: 12.5px; }
.so-fig .sv-sx { color: #ff6b5e; }
@media screen and (max-width: 860px) {
  .so-fig picture { max-width: 520px; margin: 0 auto; }
}

/* Engagement + people bands (light) */
.so-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 26px 0 10px; counter-reset: so; }
.so-steps li { padding: 20px 20px 8px; border-radius: 12px; background: #fff; border: 1px solid #d9e3ee; border-top: 3px solid var(--sv-aqua); counter-increment: so; }
.so-steps li h3::before { content: "0" counter(so) "  "; color: var(--sv-aqua); font-size: 13px; letter-spacing: .1em; }
.so-people .sv-card a { font-weight: bold; }

@media screen and (max-width: 999px) {
  .so-hero .sv-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .so-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 30px; }
  .so-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 720px) {
  .so-band { padding: 46px 0 34px; }
  .so-hero .sv-hero-grid { grid-template-columns: 1fr; }
  .so-grid { grid-template-columns: 1fr; gap: 20px; }
  .so-facts { grid-template-columns: 1fr; }
}
@media screen and (max-width: 560px) {
  .so-steps { grid-template-columns: 1fr; }
}