.connected-demo *{box-sizing:border-box}
.connected-demo{
  --ok-fg:#166b46;--ok-bg:#e5f4ec;--ok-dot:#1f8a5b;
  --warn-fg:#92510a;--warn-bg:#fdf0e0;--warn-dot:#d97706;
  --err-fg:#a51f1f;--err-bg:#fdeaea;--err-dot:#dc2626;
  --info-fg:#1d4fb8;--info-bg:#e8effc;--info-dot:#2563eb;
  --off-fg:#5c636b;--off-bg:#eef0f2;--off-dot:#8a919a;
  background:#f4f5f7;color:#16191d;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  border-radius:24px;border:1px solid #e3e6ea;overflow:hidden;
}
.connected-demo a{color:#2563eb}
.connected-demo a:hover{color:#1d4fb8}
.connected-demo .wrap{max-width:1180px;margin:0 auto;padding:36px 20px 72px}

/* header */
.connected-demo .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:#6a727c}
.connected-demo .head h1{margin:10px 0 0;font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4.5vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.connected-demo .sub{margin:10px 0 0;max-width:640px;font-size:15px;line-height:1.55;color:#4a515a}

/* stage */
.connected-demo .stage{display:flex;align-items:stretch;margin-top:30px}
.connected-demo .card{background:#fff;border:1px solid #e3e6ea;border-radius:16px;box-shadow:0 1px 2px rgba(22,25,29,.05);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;flex:1 1 0}
.connected-demo .card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.connected-demo .card-heading{display:flex;align-items:center;gap:12px;min-width:0}
.connected-demo .card-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #e3e6ea;background:#f2f4f7}
.connected-demo .card-icon svg{width:22px;height:22px}
.connected-demo .card-icon--device{color:#2563eb;background:#e8effc;border-color:#d4e2f7}
.connected-demo .card-icon--app{color:#0f766e;background:#e6f7f4;border-color:#c7ebe4}
.connected-demo .card-icon--cloud{color:#5b21b6;background:#f0ebfc;border-color:#ddd0f7}
.connected-demo .card-name{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600}
.connected-demo .card-kind{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#8a919a;margin-top:2px}
.connected-demo .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.connected-demo .badge .dot{width:7px;height:7px;border-radius:50%}
.connected-demo .rule{height:1px;background:#eceef1}
.connected-demo .rows{display:flex;flex-direction:column;gap:8px;font-size:13px}
.connected-demo .row{display:flex;justify-content:space-between;gap:10px}
.connected-demo .row span{color:#6a727c}
.connected-demo .row b{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500}
.connected-demo .meter{height:4px;border-radius:2px;background:#edeff2;overflow:hidden}
.connected-demo .meter i{display:block;height:100%;border-radius:2px;width:90%;background:#1f8a5b;transition:width .35s ease,background .35s ease}
.connected-demo .msg{background:#f2f4f7;border:1px solid #e3e6ea;border-radius:10px;padding:10px 12px;min-height:56px}
.connected-demo .msg-lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:#8a919a;margin-bottom:4px}
.connected-demo .msg #appMsg{font-size:12.5px;line-height:1.45;color:#33383f}
.connected-demo .app-action{min-height:44px;border-radius:10px;font-size:13.5px;font-weight:600;border:none;background:#2563eb;color:#fff;cursor:pointer;width:100%;font-family:inherit}
.connected-demo .app-action:disabled{opacity:.4;cursor:not-allowed}

/* links */
.connected-demo .link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:0 0 138px;padding:0 10px}
.connected-demo .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #e3e6ea;font-size:11.5px;font-weight:600;white-space:nowrap}
.connected-demo .chip .dot{width:7px;height:7px;border-radius:50%}
.connected-demo .line-box{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:20px}
.connected-demo .line{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px}
.connected-demo .brk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid #dc2626;color:#dc2626;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.connected-demo .brk[hidden]{display:none}
.connected-demo .link-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#8a919a}

@keyframes lineFlowX{to{background-position:36px 0}}
@keyframes lineFlowY{to{background-position:0 36px}}
@keyframes linePulse{0%,100%{opacity:1}50%{opacity:.3}}

/* diagnostics */
.connected-demo .diag{margin-top:16px;background:#16191d;border-radius:16px;padding:18px 20px;color:#e8eaed}
.connected-demo .diag-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.connected-demo .diag-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600}
.connected-demo .diag-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#8a919a}
.connected-demo .diag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 24px;font-size:12.5px}
.connected-demo .drow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #2a2f36;padding:5px 0}
.connected-demo .drow span{color:#9aa1aa}
.connected-demo .drow b{font-family:'JetBrains Mono',monospace;font-weight:500}

/* toggles */
.connected-demo .toggles{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.connected-demo .tgl{min-height:36px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid #dde0e5;background:#fff;color:#5c636b;font-family:inherit}
.connected-demo .tgl.reset{margin-left:auto}
.connected-demo .tgl.active-prob{background:#8a2f22;border-color:#8a2f22;color:#fff}
.connected-demo .tgl.active-sol{background:#175a3c;border-color:#175a3c;color:#fff}
.connected-demo .note{margin-top:10px;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.5;background:#e9f5ee;color:#175a3c;border:1px solid #cbe6d6}
.connected-demo .note.problem{background:#fdf0ee;color:#8a2f22;border-color:#f3cfc9}
.connected-demo .note-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;font-weight:600;margin-right:8px}

/* scenarios */
.connected-demo .scenarios{margin-top:26px}
.connected-demo .scenarios-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin-bottom:12px}
.connected-demo .sgroup{margin-bottom:14px}
.connected-demo .sgroup-name{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:#8a919a;margin-bottom:8px}
.connected-demo .sgroup-btns{display:flex;flex-wrap:wrap;gap:8px}
.connected-demo .sbtn{min-height:44px;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid #dde0e5;background:#fff;color:#33383f;font-family:inherit}
.connected-demo .sbtn.active{background:#16191d;color:#fff;border-color:#16191d}

/* explanation */
.connected-demo .explain{margin-top:14px;background:#fff;border:1px solid #e3e6ea;border-radius:16px;box-shadow:0 1px 2px rgba(22,25,29,.05);padding:22px}
.connected-demo .explain-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:4px 0 16px}
.connected-demo .explain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 24px}
.connected-demo .ex-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#6a727c;margin-bottom:6px}
.connected-demo .ex-lbl.bad{color:#b0421f}
.connected-demo .ex-lbl.good{color:#166b46}
.connected-demo .explain-grid div div:last-child{font-size:13.5px;line-height:1.55;color:#33383f}
.connected-demo .takeaway{margin-top:18px;background:#16191d;border-radius:12px;padding:14px 16px}
.connected-demo .take-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#8fd9b6;margin-bottom:5px}
.connected-demo .takeaway div:last-child{font-size:14px;line-height:1.5;color:#f2f4f6;font-weight:500}

/* cta */
.connected-demo .cta{margin-top:32px;background:#fff;border:1px solid #e3e6ea;border-radius:16px;padding:28px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.connected-demo .cta-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em}
.connected-demo .cta-sub{font-size:14px;line-height:1.55;color:#4a515a;margin-top:6px;max-width:560px}
.connected-demo .cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;background:#2563eb;color:#fff;font-size:14.5px;font-weight:600;text-decoration:none}
.connected-demo .cta-btn:hover{background:#1d4fb8;color:#fff}

/* checklist lead magnet */
.connected-demo .checklist{margin-top:24px;background:#fff;border:1px solid #e3e6ea;border-radius:16px;padding:28px 24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:24px;align-items:start}
.connected-demo .checklist-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.01em;margin:6px 0 10px}
.connected-demo .checklist-sub,.connected-demo .checklist-legal,.connected-demo .checklist-prefs{font-size:13.5px;line-height:1.55;color:#4a515a}
.connected-demo .checklist-prefs{margin-top:10px}
.connected-demo .checklist-prefs a{color:#2563eb;font-weight:600}
.connected-demo .checklist-form{display:flex;flex-direction:column;gap:12px}
.connected-demo .checklist-inline-alert{padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5}
.connected-demo .checklist-inline-alert.is-success{background:#e9f5ee;border:1px solid #cbe6d6;color:#175a3c}
.connected-demo .checklist-inline-alert.is-error{background:#fdf0ee;border:1px solid #f3cfc9;color:#8a2f22}
.connected-demo .checklist-input{min-height:48px;border:1px solid #dde0e5;border-radius:12px;padding:0 14px;font-size:14px;font-family:inherit}
.connected-demo .checklist-consent{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:#4a515a}
.connected-demo .checklist-consent input{margin-top:3px;flex-shrink:0}
.connected-demo .checklist-consent a{color:#2563eb}
.connected-demo .checklist-btn{min-height:48px;border:none;border-radius:12px;background:#16191d;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.connected-demo .checklist-btn:hover{background:#000}
.connected-demo .checklist-legal{margin:0;font-size:11.5px;color:#8a919a}
.connected-demo .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.connected-demo .foot{margin-top:28px;font-size:12px;color:#8a919a;line-height:1.6}

/* responsive */
@media (max-width:880px){
  .connected-demo .stage{flex-direction:column}
  .connected-demo .card{flex:0 0 auto}
  .connected-demo .link{flex:0 0 auto;padding:12px 0}
  .connected-demo .line-box{width:20px;height:48px}
  .connected-demo .line{left:8px;top:0;bottom:0;right:auto;width:4px;height:auto}
  .connected-demo .cta{flex-direction:column;align-items:flex-start}
  .connected-demo .checklist{grid-template-columns:1fr}
}