/* Streetwise Software Online (SWSO) — "Our Software Services" page. Same control-panel look as the home page
   (panel.css tokens, tiles and switches); each web app gets one large tile with two button switches. */
.plate-gap{display:block}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.svc{position:relative;display:flex;flex-direction:column;height:100%;padding:22px 22px 20px;border-radius:18px;color:var(--paper);
  background:linear-gradient(180deg,#18223a,#0f1626);border:1px solid #273349;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 0 #03050a;transition:border-color .18s ease}
.svc:hover,.svc:focus-within{border-color:var(--cyan)}
.svc .led{position:absolute;top:20px;right:20px;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px rgba(63,208,255,.85)}
.svc .led.off{background:#5b6880;box-shadow:none}
.svc-top{display:flex;align-items:center;gap:16px;margin-bottom:12px;padding-right:20px}
.svc-top .art{width:72px;height:72px;border-radius:16px;background:#0b111e;flex:none}
.svc h2{margin:0;font:700 clamp(1.25rem,2.2vw,1.6rem)/1.2 var(--display)}
.svc .by{margin:4px 0 0;color:var(--steel);font-size:13px;font-weight:700;letter-spacing:.04em}
.svc .desc{margin:0 0 14px;color:#c9d2e0;font-size:15.5px;line-height:1.5}
.svc-plans{display:grid;gap:6px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:#0a0f1b;border:1px solid #1f2a3d;list-style:none}
.svc-plans li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:15px;color:#c9d2e0}
.svc-plans b{min-width:74px;color:var(--cyan);font-weight:800}
.svc-plans span{font-weight:800;color:var(--paper);font-variant-numeric:tabular-nums}
.svc-plans .or{font-weight:600;color:#c9d2e0}
.svc-trial{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 16px;color:#c9d2e0;font-size:14px;font-weight:700}
.svc-trial .state{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);border:1px solid #2a3650;border-radius:999px;padding:2px 9px}
.svc-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.svc-actions .switch{font-size:16px;padding:12px 18px 12px 14px}
.svc-open.c{border-color:#2f6f86;background:linear-gradient(180deg,#173246,#0f1f2e)}
.svc-open.c:hover,.svc-open.c:focus-visible{border-color:var(--cyan)}
.svc-open.is-off{opacity:.6;cursor:default}
.svc-open.is-off i{background:#5b6880;box-shadow:none}
.svc-open.is-off:hover{transform:none;border-color:#2a3650}
.svc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:s}
.svc-steps li{counter-increment:s;padding:14px 16px;border-radius:14px;background:#0a0f1b;border:1px solid #1f2a3d;color:#c9d2e0;font-size:15px;line-height:1.5}
.svc-steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;margin-bottom:8px;border-radius:50%;
  background:#111827;border:1px solid #2a3650;font:800 14px var(--display);color:var(--amber)}
.svc-steps b{color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){
  .svc-grid,.svc-steps{grid-template-columns:minmax(0,1fr)}
  .plate-gap{display:none}
}
@media (max-width:600px){
  .svc{padding:16px}
  .svc .led{top:16px;right:16px}
  .svc-top .art{width:56px;height:56px;border-radius:13px}
  .svc-actions .switch{flex:1 1 auto;justify-content:center;white-space:nowrap;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.svc{transition:none}}