/* Solution Overview — deck-specific styles */
@import url('core.css');

.so-node { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 22px; font-weight: 700; line-height: 1.2; background: var(--panel-solid); border: 2px solid var(--c); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.so-node .pi { color: var(--c); }
.so-ghost { display: grid; place-items: center; color: var(--ink-4); }
.so-ghost-x { position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); }

.so-benefit { font-size: 28px; line-height: 1.3; color: var(--ink); font-weight: 600; margin-top: 18px; }
.so-tagrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.so-tagrow .p2-tag { font-size: 17px; }

/* adoption meter */
.so-meter { display: flex; gap: 22px; }
.so-sq { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: var(--ink-4); background: rgba(148,163,184,.12); border: 1.5px solid var(--line-2); transition: all .5s var(--ease); }
.so-sq.so-on { color: var(--green-2); background: rgba(16,185,129,.2); border-color: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.so-legend { display: flex; align-items: center; gap: 12px; font-size: 22px; color: var(--ink-3); }
.so-key { width: 22px; height: 22px; border-radius: 6px; background: rgba(148,163,184,.18); border: 1.5px solid var(--line-2); margin-left: 18px; }
.so-key:first-child { margin-left: 0; }
.so-key-on { background: rgba(16,185,129,.3); border-color: var(--green); }

/* comparison columns */
.so-col h3 .p2-chip { width: 58px; height: 58px; border-radius: 15px; }
.so-row { display: flex; align-items: flex-start; gap: 20px; margin-top: 26px; }
.so-row .p2-chip { width: 56px; height: 56px; border-radius: 14px; }
.so-row-t { font-size: 32px; font-weight: 700; line-height: 1.15; }
.so-row-s { font-size: 24px; color: var(--ink-3); margin-top: 4px; }
.so-col.p2-active { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 26%, transparent); }
.so-col { transition: border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .7s var(--ease), transform .8s var(--ease); }
.so-vs { border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #fff; background: var(--brand); box-shadow: 0 12px 30px rgba(0,0,0,.4); z-index: 3; }

/* MAPs */
.so-svc { list-style: none; margin: 4px 0 0; padding: 0; }
.so-svc li { display: flex; align-items: center; gap: 14px; font-size: 26px; color: var(--ink); padding: 8px 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.so-svc li:last-child { border-bottom: 0; }
.so-svc li .pi { color: var(--violet-2); flex: none; }
.so-mini { display: flex; align-items: center; gap: 14px; font-size: 26px; color: var(--ink); padding: 8px 0; }
.so-mini i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.p2-card-sub.so-ok { color: var(--green-2); }

/* calls to action */
.so-cta { display: flex; align-items: center; gap: 22px; text-decoration: none; color: #fff; }
.so-cta small { display: block; font-size: 22px; color: var(--ink-3); margin-top: 6px; }
.p2-card .so-mark { position: absolute; right: 22px; bottom: 18px; color: var(--c); opacity: .14; pointer-events: none; }
.so-ghost { border-radius: 50%; background: var(--panel-solid); border: 2px dashed rgba(239,68,68,.6); z-index: 3; }