
  .cs-band, .cs-band * { box-sizing:border-box; }  /* the references assume a global border-box reset the page does not have */
  .cs-band { position:relative; overflow:hidden; padding:104px 48px; border-bottom:1px solid #e7e4f0; background:#f7f7fb; }
  .cs-glow { position:absolute; top:40px; right:-120px; width:640px; height:420px; background:radial-gradient(circle, rgba(163,78,240,.09), transparent 70%); pointer-events:none; z-index:0; }
  .cs-wrap { position:relative; z-index:1; }
  .cs-head { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
  .cs-head-text { flex:1; min-width:280px; }
  .cs-tc { flex:none; width:230px; background:#ffffff; border:1px solid #e7e4f0; border-radius:14px; padding:18px 18px 20px; margin-top:4px; transition:opacity .6s ease, transform .6s ease; }
  .cs-js .cs-tc { opacity:0; transform:translateY(10px); }
  .cs-js .cs-tc.cs-in { opacity:1; transform:translateY(0); }
  .cs-tc-label { font:500 10.5px 'IBM Plex Mono',monospace; letter-spacing:.08em; color:#8f8ba6; margin-bottom:14px; text-transform:uppercase; }
  .cs-tc-row { display:flex; align-items:center; justify-content:center; gap:8px; }
  .cs-stack { display:flex; flex-direction:column; gap:5px; }
  .cs-mini { width:22px; height:22px; border-radius:6px; background:#f5f5fa; border:1px solid #e7e4f0; display:flex; align-items:center; justify-content:center; }
  .cs-mini svg { width:11px; height:11px; color:#8f8ba6; }
  .cs-tc-arrow { color:#d8d3e6; flex:none; display:flex; }
  .cs-hub { width:40px; height:40px; border-radius:10px; background:#f5ecfd; display:flex; align-items:center; justify-content:center; flex:none; }
  .cs-hub svg { width:20px; height:20px; color:#a34ef0; }
  .cs-tc-cap { font:400 11px 'IBM Plex Mono',monospace; color:#686386; text-align:center; margin-top:14px; }
  .cs-tc-cap strong { color:#a34ef0; font-weight:500; }
  .cs-rail { position:relative; height:2px; background:#e7e4f0; border-radius:2px; margin-left:calc(12.5% - 1px); margin-right:calc(12.5% - 1px); }
  .cs-fill { position:absolute; top:0; left:0; height:100%; width:0%; background:#a34ef0; border-radius:2px; transition:width 1.1s cubic-bezier(.22,.9,.3,1); }
  .cs-dots { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; }
  .cs-dot { width:11px; height:11px; border-radius:50%; background:#ffffff; border:2px solid #d8d3e6; transform:translateY(-1px);
    transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; }
  .cs-dot.cs-lit { background:#a34ef0; border-color:#a34ef0; box-shadow:0 0 0 5px rgba(163,78,240,.15); transform:translateY(-1px) scale(1.15); }
  .cs-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px; }
  .cs-card { background:#ffffff; border:1px solid #e7e4f0; border-radius:12px; padding:22px 20px 24px;
    transition:opacity .55s ease, transform .55s ease, border-color .4s ease, box-shadow .4s ease; }
  .cs-js .cs-card { opacity:0; transform:translateY(18px); }
  .cs-js .cs-card.cs-rev { opacity:1; transform:translateY(0); }
  .cs-card.cs-lit { border-color:rgba(163,78,240,.4); box-shadow:0 14px 28px rgba(163,78,240,.1); }
  .cs-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .cs-num { font:400 11px 'IBM Plex Mono',monospace; color:#8f8ba6; transition:color .3s ease; }
  .cs-card.cs-lit .cs-num { color:#a34ef0; }
  .cs-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
  .cs-icon svg { width:16px; height:16px; }
  .cs-c0 .cs-icon { background:#fdf3e3; color:#d97706; }
  .cs-c1 .cs-icon { background:rgba(51,189,252,.12); color:#0a95dc; }
  .cs-c2 .cs-icon { background:#e9f7ef; color:#16a34a; }
  .cs-c3 .cs-icon { background:#f5ecfd; color:#a34ef0; }
  .cs-label { font:500 12px 'IBM Plex Mono',monospace; letter-spacing:.05em; color:#686386; margin-bottom:12px; transition:color .3s ease; }
  .cs-card.cs-lit .cs-label { color:#a34ef0; }
  .cs-body { font-size:14.5px; line-height:1.55; color:#454160; margin-bottom:16px; }
  .cs-accent { min-height:34px; }
  .cs-frag { display:flex; align-items:center; gap:5px; }
  .cs-node { width:24px; height:24px; border-radius:6px; background:#f5f5fa; border:1px solid #e7e4f0; display:flex; align-items:center; justify-content:center; flex:none; }
  .cs-node svg { width:12px; height:12px; color:#8f8ba6; }
  .cs-gap { width:16px; height:1.5px; position:relative; flex:none; background:repeating-linear-gradient(90deg, #d8d3e6 0 3px, transparent 3px 6px); }
  .cs-gap::after { content:"✕"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:8px; color:#dc2626; background:#ffffff; padding:0 2px; }
  .cs-phase { display:flex; flex-direction:column; gap:8px; }
  .cs-seg { display:flex; align-items:center; gap:8px; }
  .cs-seg i { width:16px; height:16px; border-radius:50%; background:#0a95dc; flex:none; display:flex; align-items:center; justify-content:center; }
  .cs-seg i svg { width:9px; height:9px; color:#ffffff; }
  .cs-seg span { font-size:12px; color:#686386; font-weight:600; }
  .cs-stat { display:flex; align-items:baseline; gap:6px; }
  .cs-stat strong { font:700 22px 'Sora',sans-serif; color:#1d1b33; }
  .cs-stat span { font:400 11.5px 'IBM Plex Mono',monospace; color:#686386; }
  .cs-bars { display:flex; align-items:flex-end; gap:3px; height:16px; margin-top:8px; }
  .cs-bars i { width:5px; border-radius:2px 2px 0 0; background:rgba(22,163,74,.35); display:block; }
  .cs-bars i.cs-on { background:#16a34a; }
  .cs-pill { display:inline-flex; align-items:center; gap:7px; background:#f5ecfd; border:1px solid rgba(163,78,240,.3); color:#a34ef0; border-radius:8px; padding:8px 12px;
    font:500 12px 'IBM Plex Mono',monospace; }
  .cs-pill svg { width:13px; height:13px; }
  .cs-foot { font:400 11px 'IBM Plex Mono',monospace; letter-spacing:.02em; color:#8f8ba6; margin-top:24px; }
  @media (max-width:900px) {
    .cs-cards { grid-template-columns:1fr; gap:14px; }
    .cs-rail { display:none; }
  }
  @media (max-width:760px) { .cs-tc { display:none; } }
