/* ============================================================
   SkillDelivery visuals — shared styles for sd- (home) and so-
   (offerings) namespaces. Loaded once per page. Variables map
   to the site's own brand palette (see index.html :root).
   ============================================================ */

/* ---------------- sd- namespace (home-page visuals) ---------------- */
.sd-vis {
  --sd-ink: #0D2233;
  --sd-muted: #546E7A;
  --sd-card: #FFFFFF;
  --sd-bg: #F0FAFB;
  --sd-line: #E0F7FA;
  --sd-blue: #00838F;        /* AA-safe darker cyan (4.52:1 vs white) */
  --sd-blue-soft: #E8F4F8;
  --sd-green: #00897B;
  --sd-green-soft: #E0F2EF;
  --sd-orange: #F28C28;
  --sd-orange-soft: #FDF0E3;
  --sd-gray: #78909C;
  color: var(--sd-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 16px;
  box-sizing: border-box;
}
.sd-vis *, .sd-vis *::before, .sd-vis *::after { box-sizing: border-box; }
.sd-sec { margin-bottom: 88px; }
.sd-sec:last-child { margin-bottom: 0; }
.sd-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-blue); margin: 0 0 8px; }
.sd-title { font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0 0 10px; }
.sd-sub { font-size: 17px; line-height: 1.5; color: var(--sd-muted); margin: 0 0 32px; max-width: 660px; }
.sd-card { background: var(--sd-card); border: 1px solid var(--sd-line); border-radius: 12px; padding: 28px;
           box-shadow: 0 8px 40px rgba(0,188,212,0.10); }
.sd-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.sd-svg { width: 100%; height: auto; display: block; font-family: inherit; }

/* 0. Stats strip */
.sd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sd-stat { background: var(--sd-card); border: 1px solid var(--sd-line); border-radius: 8px; padding: 22px 18px; text-align: center;
           box-shadow: 0 8px 40px rgba(0,188,212,0.10);
           opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.sd-in .sd-stat { opacity: 1; transform: none; }
.sd-in .sd-stat:nth-child(2) { transition-delay: .12s; }
.sd-in .sd-stat:nth-child(3) { transition-delay: .24s; }
.sd-in .sd-stat:nth-child(4) { transition-delay: .36s; }
.sd-stat b { display: block; font-size: clamp(30px, 5vw, 44px); font-weight: 800; line-height: 1.1; color: var(--sd-blue); font-variant-numeric: tabular-nums; }
.sd-stat span { font-size: 14px; color: var(--sd-muted); }

/* 1. Speed race */
.sd-race-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.sd-badge { font-size: clamp(36px, 7vw, 56px); font-weight: 800; color: var(--sd-green); line-height: 1;
            transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s; }
.sd-badge small { font-size: 16px; font-weight: 600; color: var(--sd-ink); margin-left: 8px; }
.sd-badge.on { transform: scale(1); opacity: 1; }
/* .sd-btn — matches the site's button idiom: 4px squared, outline-style */
.sd-btn { font: inherit; font-size: 14px; font-weight: 600; border: 1.5px solid var(--sd-blue); background: var(--sd-card);
          color: var(--sd-blue); border-radius: 4px; padding: 10px 20px; cursor: pointer; transition: all .2s; }
.sd-btn:hover { background: var(--sd-bg); }
.sd-lane { margin-bottom: 20px; }
.sd-lane-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-bottom: 8px; }
.sd-lane-top b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-track { height: 38px; background: #eef1f5; border-radius: 10px; overflow: hidden; position: relative; }
.sd-fill { height: 100%; width: 0; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 18px; }
.sd-fill.slow { background: linear-gradient(90deg, #f7b26b, var(--sd-orange)); }
.sd-fill.fast { background: linear-gradient(90deg, #52b788, var(--sd-green)); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sd-chip { font-size: 14px; background: var(--sd-green-soft); color: var(--sd-green); border-radius: 999px; padding: 6px 12px; font-weight: 600; }

/* 2. SEAL loop (circle) */
.sd-ring { fill: none; stroke: #c9d6f2; stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.sd-arc { fill: none; stroke: var(--sd-blue); stroke-width: 3; }
.sd-node rect { fill: var(--sd-card); stroke: var(--sd-line); stroke-width: 2; }
.sd-node .sd-n { fill: var(--sd-blue); }
.sd-node .sd-nt { fill: #fff; font-size: 13px; font-weight: 700; }
.sd-node .sd-lbl { fill: var(--sd-ink); font-size: 13px; font-weight: 700; }
.sd-node .sd-lbl2 { fill: var(--sd-muted); font-size: 10px; }
.sd-node { animation: sd-glow 4s infinite; }
.sd-node:nth-of-type(2) { animation-delay: 1s; }
.sd-node:nth-of-type(3) { animation-delay: 2s; }
.sd-node:nth-of-type(4) { animation-delay: 3s; }
@keyframes sd-glow {
  0%, 22% { filter: drop-shadow(0 0 8px rgba(0,131,143,.55)); }
  30%, 100% { filter: none; }
}
.sd-core { fill: var(--sd-blue-soft); }
.sd-core-t { fill: var(--sd-blue); font-size: 26px; font-weight: 800; }
.sd-core-s { fill: var(--sd-muted); font-size: 12px; }
.sd-dot { fill: var(--sd-orange); }
.sd-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sd-steps li { counter-increment: s; position: relative; padding: 0 0 18px 46px; font-size: 15px; line-height: 1.5; color: var(--sd-muted); }
.sd-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
                       background: var(--sd-blue); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.sd-steps li b { display: block; color: var(--sd-ink); font-size: 16px; }

/* 3. Decision flowchart */
.sd-flowwrap { max-width: 480px; margin: 0 auto; }
.sd-flow { fill: none; stroke: var(--sd-blue); stroke-width: 2.2; stroke-dasharray: 7 6; animation: sd-dash 1.2s linear infinite; }
.sd-flow.plain { stroke-dasharray: none; animation: none; }
.sd-flow.back { stroke: var(--sd-gray); stroke-dasharray: 4 6; }
@keyframes sd-dash { to { stroke-dashoffset: -26; } }
.sd-box { fill: var(--sd-card); stroke: var(--sd-line); stroke-width: 2; }
.sd-start { fill: var(--sd-blue); }
.sd-dia { fill: var(--sd-blue-soft); stroke: var(--sd-blue); stroke-width: 2; }
.sd-ok { fill: var(--sd-green-soft); stroke: var(--sd-green); stroke-width: 2; }
.sd-g1 { fill: var(--sd-green); } .sd-g2 { fill: var(--sd-orange); } .sd-g3 { fill: var(--sd-gray); }
.sd-t { font-size: 13px; font-weight: 700; fill: var(--sd-ink); }
.sd-tw { font-size: 13px; font-weight: 700; fill: #fff; }
.sd-ts { font-size: 10.5px; fill: #fff; }
.sd-tsd { font-size: 10.5px; fill: var(--sd-muted); }
.sd-yn { font-size: 11px; font-weight: 700; fill: var(--sd-blue); }

/* 4. xConnect network */
.sd-link { stroke: #c9d6f2; stroke-width: 2.5; }
.sd-cross { fill: none; stroke: #e3e7ee; stroke-width: 1.5; stroke-dasharray: 4 5; }
.sd-hub { fill: var(--sd-blue); }
/* Ripple ring: lighter decorative cyan, per authorised exception */
.sd-hub-ring { fill: none; stroke: #00BCD4; stroke-width: 2; opacity: .5; transform-origin: 200px 150px; animation: sd-ripple 2.4s ease-out infinite; }
@keyframes sd-ripple { from { transform: scale(1); opacity: .5; } to { transform: scale(1.6); opacity: 0; } }
.sd-ent { fill: var(--sd-card); stroke: var(--sd-blue); stroke-width: 2; }
.sd-emo { font-size: 22px; }
.sd-entl { font-size: 11px; font-weight: 700; fill: var(--sd-ink); }
.sd-pdot { fill: var(--sd-orange); }
.sd-ticker { margin-top: 18px; background: var(--sd-bg); border-radius: 8px; padding: 16px 18px; min-height: 92px; transition: opacity .4s; }
.sd-ticker .who { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sd-blue); }
.sd-ticker .goal { font-size: 16px; font-weight: 600; margin: 4px 0; }
.sd-ticker .res { font-size: 14px; color: var(--sd-green); font-weight: 600; }

/* 5. Channels */
.sd-src { margin: 0 auto; max-width: 300px; text-align: center; background: var(--sd-blue); color: #fff; border-radius: 8px; padding: 14px; font-weight: 700; }
.sd-fan { display: block; width: 100%; height: 60px; }
.sd-chgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sd-ch { background: var(--sd-card); border: 1px solid var(--sd-line); border-radius: 12px; padding: 18px; text-align: center;
         box-shadow: 0 8px 40px rgba(0,188,212,0.10);
         animation: sd-light 4s infinite; }
.sd-ch:nth-child(2) { animation-delay: 1s; } .sd-ch:nth-child(3) { animation-delay: 2s; } .sd-ch:nth-child(4) { animation-delay: 3s; }
@keyframes sd-light { 0%, 20% { border-color: var(--sd-blue); box-shadow: 0 6px 22px rgba(0,131,143,.18); transform: translateY(-3px); }
                      30%, 100% { border-color: var(--sd-line); box-shadow: 0 8px 40px rgba(0,188,212,0.10); transform: none; } }
.sd-ch .ic { font-size: 30px; }
.sd-ch h4 { margin: 8px 0 4px; font-size: 16px; }
.sd-ch p { margin: 0 0 10px; font-size: 13px; color: var(--sd-muted); }
.sd-live { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sd-green-soft); color: var(--sd-green); }
.sd-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sd-green); margin-right: 6px; animation: sd-blink 1.4s infinite; }
.sd-ready { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sd-blue-soft); color: var(--sd-blue); }
@keyframes sd-blink { 50% { opacity: .2; } }

/* 6. Putaway layouts */
.sd-lay { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.sd-lay h4 { margin: 0 0 4px; font-size: 16px; }
.sd-lay p { margin: 0 0 12px; font-size: 13px; color: var(--sd-muted); }
.sd-wall { fill: #fafbfd; stroke: #b9c2d3; stroke-width: 2; }
.sd-rack { fill: #d6dceb; }
.sd-dock { fill: var(--sd-blue); }
.sd-dockt { font-size: 9px; font-weight: 700; fill: #fff; }
.sd-path { fill: none; stroke: var(--sd-orange); stroke-width: 2.5; stroke-dasharray: 5 5; animation: sd-dash 1s linear infinite; }
.sd-picker { fill: var(--sd-orange); stroke: #fff; stroke-width: 2; }
.sd-link-a { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--sd-blue); text-decoration: none; }
.sd-link-a:hover { text-decoration: underline; }

/* sd- phone layout */
@media (max-width: 760px) {
  .sd-card { padding: 20px; }
  .sd-two { grid-template-columns: 1fr; gap: 24px; }
  .sd-stats, .sd-chgrid { grid-template-columns: 1fr 1fr; }
  .sd-lay { grid-template-columns: 1fr; }
  .sd-fan { display: none; }
  .sd-src { margin-bottom: 14px; }
}

/* ---------------- so- namespace (offering-page visuals) ---------------- */
.so-vis {
  --so-ink: #0D2233; --so-muted: #546E7A; --so-card: #FFFFFF; --so-bg: #F0FAFB; --so-line: #E0F7FA;
  --so-blue: #00838F; --so-blue-soft: #E8F4F8; --so-green: #00897B; --so-green-soft: #E0F2EF;
  --so-orange: #F28C28; --so-orange-soft: #FDF0E3; --so-red: #C0392B; --so-gray: #78909C;
  color: var(--so-ink); max-width: 1200px; margin: 0 auto; padding: 48px 16px 8px; box-sizing: border-box;
}
.so-vis *, .so-vis *::before, .so-vis *::after { box-sizing: border-box; }
.so-sec { margin-bottom: 88px; }
.so-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--so-blue); margin: 0 0 8px; }
.so-title { font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0 0 10px; }
.so-sub { font-size: 17px; line-height: 1.5; color: var(--so-muted); margin: 0 0 28px; max-width: 680px; }
.so-h3 { font-size: 18px; margin: 0 0 18px; }
.so-card { background: var(--so-card); border: 1px solid var(--so-line); border-radius: 12px; padding: 28px;
           box-shadow: 0 8px 40px rgba(0,188,212,0.10); }
.so-card + .so-card { margin-top: 18px; }
.so-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.so-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.so-svg.cap { max-width: 640px; margin: 0 auto; }
.so-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
          background: var(--so-bg); color: var(--so-muted); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px; }
.so-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; background: var(--so-orange-soft);
           border-left: 4px solid var(--so-orange); border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.so-note.good { background: var(--so-green-soft); border-color: var(--so-green); }
.so-note .ic { font-size: 22px; line-height: 1; }
.so-list { list-style: none; margin: 0; padding: 0; }
.so-list li { padding: 10px 0; border-bottom: 1px solid var(--so-line); font-size: 15px; color: var(--so-muted); line-height: 1.45; }
.so-list li:last-child { border-bottom: none; }
.so-list b { color: var(--so-ink); display: block; font-size: 15px; }

/* Animated process flow */
.so-proc { --n: 5; --p: 0; list-style: none; margin: 0; padding: 0; position: relative;
           display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.so-proc::before, .so-proc::after { content: ""; position: absolute; top: 26px; height: 4px; border-radius: 2px;
           left: calc(50% / var(--n)); right: calc(50% / var(--n)); }
.so-proc::before { background: var(--so-line); }
.so-proc::after { background: var(--so-blue); transform-origin: left center; transform: scaleX(var(--p)); transition: transform .9s ease; }
.so-proc li { text-align: center; position: relative; z-index: 1; }
.so-ic { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; background: var(--so-card); border: 2px solid var(--so-line);
         display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all .45s ease; }
.so-proc li.on .so-ic { border-color: var(--so-blue); background: var(--so-blue-soft); }
.so-proc li.cur .so-ic { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(0,131,143,.14); }
.so-proc li.warn.on .so-ic { border-color: var(--so-orange); background: var(--so-orange-soft); }
.so-proc li.warn.cur .so-ic { box-shadow: 0 0 0 6px rgba(242,140,40,.2); }
.so-proc li.done.on .so-ic { border-color: var(--so-green); background: var(--so-green-soft); }
.so-proc b { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
.so-proc p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--so-muted); }

/* Domain depth bars */
.so-bars { display: grid; gap: 16px; }
.so-brow { display: grid; grid-template-columns: 170px 1fr 110px; gap: 14px; align-items: center; }
.so-brow .lbl { font-weight: 700; font-size: 15px; }
.so-brow .lbl small { display: block; font-weight: 400; font-size: 12px; color: var(--so-muted); }
.so-btrack { height: 26px; background: #eef1f5; border-radius: 8px; overflow: hidden; }
.so-bfill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #4FB3BD, var(--so-blue)); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.so-bfill.new { background: linear-gradient(90deg, #8fd0ad, var(--so-green)); }
.so-brow .val { font-weight: 800; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.so-brow .val.new { font-size: 13px; color: var(--so-green); }

/* Shared SVG bits */
.so-dash { fill: none; stroke: var(--so-blue); stroke-width: 2.2; stroke-dasharray: 7 6; animation: so-dash 1.2s linear infinite; }
.so-dash.or { stroke: var(--so-orange); }
.so-dash.gr { stroke: #c9d0dc; animation: none; }
@keyframes so-dash { to { stroke-dashoffset: -26; } }
.so-t { font-size: 13px; font-weight: 700; fill: var(--so-ink); }
.so-ts { font-size: 10.5px; fill: var(--so-muted); }
.so-tw { font-size: 13px; font-weight: 700; fill: #fff; }
.so-tws { font-size: 10.5px; fill: #fff; opacity: .9; }

/* Staircase (iSeries) */
.so-step { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.so-in .so-step { transform: none; }
.so-in .so-step:nth-of-type(2) { transition-delay: .15s; } .so-in .so-step:nth-of-type(3) { transition-delay: .3s; }
.so-in .so-step:nth-of-type(4) { transition-delay: .45s; } .so-in .so-step:nth-of-type(5) { transition-delay: .6s; }
.so-s1 { fill: #B2DFDB; } .so-s2 { fill: #80CBC4; } .so-s3 { fill: #4DB6AC; } .so-s4 { fill: #26A69A; } .so-s5 { fill: var(--so-blue); }
.so-stxt { opacity: 0; transition: opacity .5s 1s; } .so-in .so-stxt { opacity: 1; }
.so-climber { fill: var(--so-orange); stroke: #fff; stroke-width: 3; }

/* Code graph (SkillCode) */
.so-node rect { fill: var(--so-card); stroke: #c9d0dc; stroke-width: 2; }
.so-node.tgt rect { fill: var(--so-blue); stroke: var(--so-blue); }
.so-node.hit rect { animation: so-hit 4s infinite; }
.so-node.hit:nth-of-type(2) rect { animation-delay: .4s; } .so-node.hit:nth-of-type(3) rect { animation-delay: .8s; }
@keyframes so-hit { 0%, 15% { fill: var(--so-card); stroke: #c9d0dc; } 25%, 80% { fill: var(--so-orange-soft); stroke: var(--so-orange); } 100% { fill: var(--so-card); stroke: #c9d0dc; } }
.so-ring { fill: none; stroke: var(--so-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: so-ripple 2s ease-out infinite; }
@keyframes so-ripple { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
.so-risk { fill: var(--so-orange); }

/* ERPNext fan-in */
.so-app rect { fill: var(--so-card); stroke: #c9d0dc; stroke-width: 1.5; stroke-dasharray: 4 3; }
.so-hub { fill: var(--so-green); }
.so-hubring { fill: none; stroke: var(--so-green); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: so-ripple 2.4s ease-out infinite; }
.so-out rect { fill: var(--so-green-soft); stroke: var(--so-green); stroke-width: 1.5; }
.so-fdot { fill: var(--so-orange); }

/* EVM / Cricket chart */
.so-axis { stroke: #b9c2d3; stroke-width: 1.5; }
.so-grid { stroke: #eef1f5; stroke-width: 1; }
.so-curve { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease; }
.so-in .so-curve { stroke-dashoffset: 0; }
.so-in .so-curve.ev { transition-delay: .5s; } .so-in .so-curve.ac { transition-delay: 1s; }
.so-curve.pv { stroke: #9aa3b5; stroke-dasharray: 1; }
.so-curve.ev { stroke: var(--so-blue); } .so-curve.ac { stroke: var(--so-orange); }
.so-today { stroke: var(--so-ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.so-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.so-score div { border-radius: 8px; padding: 14px 16px; background: var(--so-bg); }
.so-score b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.so-score span { font-size: 13px; color: var(--so-muted); line-height: 1.4; display: block; }
.so-score .warn b { color: var(--so-orange); } .so-score .bad b { color: var(--so-red); }
.so-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--so-muted); margin-bottom: 8px; }
.so-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Role pyramid */
.so-layer { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.so-in .so-layer { opacity: 1; transform: none; }
.so-in .so-layer:nth-of-type(2) { transition-delay: .2s; } .so-in .so-layer:nth-of-type(3) { transition-delay: .4s; } .so-in .so-layer:nth-of-type(4) { transition-delay: .6s; }
.so-l1 { fill: #004D40; } .so-l2 { fill: var(--so-blue); } .so-l3 { fill: #4FB3BD; } .so-l4 { fill: #80DEEA; }

/* Tabs (greenfield / brownfield) */
.so-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--so-bg); border-radius: 999px; padding: 4px; margin-bottom: 10px; }
.so-tabs button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--so-muted);
                  padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.so-tabs button.on { background: var(--so-card); color: var(--so-blue); box-shadow: 0 1px 4px rgba(13,34,51,.12); }
.so-tabdesc { font-size: 14px; color: var(--so-muted); margin: 0 0 22px; min-height: 21px; }
.so-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; }
.so-head .so-h3 { margin-bottom: 8px; }
.so-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--so-blue-soft); color: var(--so-blue); }

/* Merge into shared run phase (WMS) */
.so-mlanes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: center; font-size: 13px; font-weight: 700; color: var(--so-blue); margin-top: 18px; }
.so-mlanes span { display: block; padding: 4px; animation: so-bob 1.6s ease-in-out infinite; }
.so-mlanes span:nth-child(2) { animation-delay: .3s; }
@keyframes so-bob { 50% { transform: translateY(5px); } }
.so-mbox { margin-top: 6px; border: 2px solid var(--so-blue); border-radius: 12px; padding: 20px; background: var(--so-blue-soft); }
.so-mbox > b { display: block; font-size: 17px; margin-bottom: 14px; text-align: center; }
.so-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.so-mtile { background: var(--so-card); border: 2px solid transparent; border-radius: 8px; padding: 16px; text-align: center; animation: so-tile 3.3s infinite; }
.so-mtile:nth-child(2) { animation-delay: 1.1s; } .so-mtile:nth-child(3) { animation-delay: 2.2s; }
@keyframes so-tile { 0%, 25% { border-color: var(--so-blue); transform: translateY(-3px); } 33%, 100% { border-color: transparent; transform: none; } }
.so-mtile .ic { font-size: 26px; }
.so-mtile b { display: block; margin: 6px 0 4px; font-size: 15px; }
.so-mtile p { margin: 0; font-size: 13px; color: var(--so-muted); line-height: 1.4; }

/* Cards grid (Showcase, R&D) */
.so-show { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.so-show.two { grid-template-columns: 1fr 1fr; }
.so-sc { background: var(--so-card); border: 1px solid var(--so-line); border-radius: 12px; padding: 20px;
         box-shadow: 0 8px 40px rgba(0,188,212,0.10);
         opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.so-in .so-sc { opacity: 1; transform: none; }
.so-in .so-sc:nth-child(2) { transition-delay: .15s; } .so-in .so-sc:nth-child(3) { transition-delay: .3s; } .so-in .so-sc:nth-child(4) { transition-delay: .45s; }
.so-sc .ic { font-size: 30px; }
.so-sc h4 { margin: 8px 0 10px; font-size: 16px; }
.so-sc ul { list-style: none; margin: 0; padding: 0; }
.so-sc li { font-size: 13.5px; color: var(--so-muted); padding: 4px 0 4px 22px; position: relative; line-height: 1.4; }
.so-sc li::before { content: "✓"; position: absolute; left: 0; color: var(--so-green); font-weight: 700; }
.so-sc .big { font-size: 30px; font-weight: 800; color: var(--so-blue); }
.so-st { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.so-st.live { background: var(--so-green-soft); color: var(--so-green); }
.so-st.prog { background: var(--so-orange-soft); color: #b8620f; }
.so-st.ready { background: var(--so-blue-soft); color: var(--so-blue); }

/* Capture chips (Connect) */
.so-cap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.so-cap span { font-size: 14px; font-weight: 600; background: var(--so-blue-soft); color: var(--so-blue); border-radius: 999px; padding: 8px 14px; animation: so-pop 6s infinite; }
.so-cap span:nth-child(2) { animation-delay: 1s; } .so-cap span:nth-child(3) { animation-delay: 2s; }
.so-cap span:nth-child(4) { animation-delay: 3s; } .so-cap span:nth-child(5) { animation-delay: 4s; } .so-cap span:nth-child(6) { animation-delay: 5s; }
@keyframes so-pop { 0%, 12% { background: var(--so-blue); color: #fff; transform: scale(1.06); } 18%, 100% { background: var(--so-blue-soft); color: var(--so-blue); transform: none; } }

/* Agent hub */
.so-spoke { stroke: #c9d6f2; stroke-width: 2.5; }
.so-pers rect { fill: var(--so-card); stroke: var(--so-blue); stroke-width: 2; }
.so-pers.you rect { fill: var(--so-green-soft); stroke: var(--so-green); }
.so-ahub { fill: var(--so-blue); }

/* Prompt atoms */
.so-compose { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 12px; align-items: center; }
.so-atoms { display: grid; gap: 8px; }
.so-atom { font-size: 14px; font-weight: 600; background: var(--so-blue-soft); color: var(--so-blue); border-radius: 10px; padding: 9px 12px;
           opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .4s; }
.so-atom small { display: block; font-weight: 400; color: var(--so-muted); font-size: 12px; }
.so-in .so-atom { opacity: 1; transform: none; }
.so-in .so-atom:nth-child(2) { transition-delay: .2s; } .so-in .so-atom:nth-child(3) { transition-delay: .4s; }
.so-in .so-atom:nth-child(4) { transition-delay: .6s; } .so-in .so-atom:nth-child(5) { transition-delay: .8s; } .so-in .so-atom:nth-child(6) { transition-delay: 1s; }
.so-arrow { font-size: 30px; color: var(--so-blue); text-align: center; animation: so-nudge 1.4s ease-in-out infinite; }
@keyframes so-nudge { 50% { transform: translateX(6px); } }
.so-out2 { border: 2px solid var(--so-blue); border-radius: 12px; padding: 18px; background: var(--so-card); }
.so-out2 b { display: block; margin-bottom: 12px; }
.so-line { height: 9px; border-radius: 5px; background: #dfe7f7; margin-bottom: 8px; transform-origin: left; transform: scaleX(0); transition: transform .6s; }
.so-in .so-line { transform: scaleX(1); }
.so-in .so-line:nth-of-type(1) { transition-delay: 1.2s; } .so-in .so-line:nth-of-type(2) { transition-delay: 1.35s; width: 85%; }
.so-in .so-line:nth-of-type(3) { transition-delay: 1.5s; width: 92%; } .so-in .so-line:nth-of-type(4) { transition-delay: 1.65s; width: 60%; }
.so-ready { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--so-green); opacity: 0; transition: opacity .4s 2s; }
.so-in .so-ready { opacity: 1; }

/* Persona answers */
.so-q { max-width: 520px; margin: 0 auto 18px; text-align: center; background: var(--so-blue); color: #fff; border-radius: 12px 12px 12px 4px; padding: 14px 18px; font-weight: 600; }
.so-sc .ans { font-size: 14px; color: var(--so-ink); line-height: 1.45; margin: 0; }

/* Community feed */
.so-feed { display: grid; gap: 10px; }
.so-post { display: flex; gap: 12px; align-items: flex-start; background: var(--so-bg); border-radius: 8px; padding: 12px 14px;
           opacity: 0; animation: so-feedin 9s infinite; }
.so-post:nth-child(2) { animation-delay: 1s; } .so-post:nth-child(3) { animation-delay: 2s; } .so-post:nth-child(4) { animation-delay: 3s; }
@keyframes so-feedin { 0% { opacity: 0; transform: translateY(10px); } 6%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.so-av { width: 36px; height: 36px; border-radius: 50%; background: var(--so-blue-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.so-post b { display: block; font-size: 14px; line-height: 1.35; }
.so-post span { font-size: 12px; color: var(--so-muted); }
.so-dt { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--so-blue-soft); color: var(--so-blue); margin-right: 6px; }

/* Network map */
.so-nn rect { fill: var(--so-card); stroke: #80DEEA; stroke-width: 2; }
.so-nn.li rect { stroke: var(--so-gray); stroke-dasharray: 5 4; }
.so-nn.me rect { fill: var(--so-green); stroke: var(--so-green); }
.so-nn.tg rect { fill: var(--so-orange-soft); stroke: var(--so-orange); }
.so-ne { stroke: #B2EBF2; stroke-width: 2; }
.so-ne.li { stroke: #c4c9d3; stroke-dasharray: 5 4; }

/* so- phone layout */
@media (max-width: 760px) {
  .so-card { padding: 20px; }
  .so-two { grid-template-columns: 1fr; gap: 24px; }
  .so-proc { grid-template-columns: 1fr; gap: 18px; }
  .so-proc::before, .so-proc::after { top: 28px; bottom: 28px; left: 26px; right: auto; width: 4px; height: auto; }
  .so-proc::after { transform-origin: center top; transform: scaleY(var(--p)); }
  .so-proc li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; text-align: left; }
  .so-ic { margin: 0; }
  .so-brow { grid-template-columns: 1fr 90px; }
  .so-brow .so-btrack { grid-column: 1 / -1; grid-row: 2; }
  .so-score { grid-template-columns: 1fr; }
  .so-mgrid, .so-show, .so-show.two { grid-template-columns: 1fr; }
  .so-mlanes { font-size: 12px; }
  .so-compose { grid-template-columns: 1fr; }
  .so-arrow { transform: rotate(90deg); animation: none; }
}

/* Universal reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sd-vis *, .so-vis * { animation: none !important; transition: none !important; }
}