/* ===============================================================
   v8c - the assistant marks earn their place, and the demo band
   actually reads as a coloured ground.
   ===============================================================*/

/* --- the tool lockups sit on their own chips so they read on blue --- */
.tools{
  margin-top:40px;padding-top:0;border-top:0;
  display:flex;align-items:center;gap:12px;direction:ltr;
  justify-content:flex-end;flex-wrap:wrap;
}
.tools figure{
  margin:0;display:flex;align-items:center;gap:11px;opacity:1;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:9px 18px 9px 14px;backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.tools figure:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
  transform:translateY(-2px)}
.tools img{height:26px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tools figcaption{
  font-family:'Assistant',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.01em;color:#fff;
}

/* --- the live-demo band gets real colour --- */
.sec.demo{
  background:linear-gradient(178deg,#DCE6F7 0%,#E8EEFA 40%,#E2EAF7 72%,#DAE4F5 100%);
}
.sec.demo::before,.sec.demo::after{background:var(--paper)}
.sec.demo .streams{opacity:1}
.sec.demo .streams span:nth-child(1){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0,300 C300,120 700,90 1000,180 C1250,254 1420,340 1600,300' fill='none' stroke='%232A5CC0' stroke-opacity='.34' stroke-width='2.5'/%3E%3Cpath d='M0,336 C300,156 700,126 1000,216 C1250,290 1420,376 1600,336' fill='none' stroke='%23249EA8' stroke-opacity='.3' stroke-width='2.5'/%3E%3Cpath d='M0,372 C300,192 700,162 1000,252 C1250,326 1420,412 1600,372' fill='none' stroke='%23F47822' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E");
}
.sec.demo .streams span:nth-child(2){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cpath d='M0,140 C260,320 640,360 980,270 C1240,202 1430,110 1600,150' fill='none' stroke='%232A5CC0' stroke-opacity='.3' stroke-width='2.5'/%3E%3Cpath d='M0,104 C260,284 640,324 980,234 C1240,166 1430,74 1600,114' fill='none' stroke='%23249EA8' stroke-opacity='.26' stroke-width='2.5'/%3E%3Cpath d='M0,68 C260,248 640,288 980,198 C1240,130 1430,38 1600,78' fill='none' stroke='%23F47822' stroke-opacity='.2' stroke-width='2'/%3E%3C/svg%3E");
}

/* the panels lift off that ground */
.sec.demo .agents li{box-shadow:0 18px 40px -28px rgba(15,25,70,.45)}
.sec.demo .agents li:hover{box-shadow:0 30px 60px -30px rgba(15,25,70,.55)}

@media (max-width:640px){
  .tools{gap:10px}
  .tools figure{padding:8px 14px 8px 11px;gap:9px}
  .tools img{height:22px}
  .tools figcaption{font-size:14px}
}