/* ===============================================================
   v8b - readability and the demo section's own ground
   ===============================================================*/

/* --- the small orange labels were unreadable at 12px mono --- */
.kicker{
  font-family:'Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.spk .rl{
  font-family:'Assistant',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.08em;text-transform:none;color:var(--orange);
}
.agents .n{font-family:var(--mono);font-size:14px;letter-spacing:.14em;color:var(--slate)}
.agents .mod{font-size:12px;letter-spacing:.12em;padding:7px 15px}
.agents .he{font-size:18px}
.more{font-family:'Assistant',sans-serif;font-size:16px;letter-spacing:.01em;font-weight:600}
.offer .note{font-family:'Assistant',sans-serif;font-size:14px;letter-spacing:.06em;
  font-weight:700;text-transform:none;color:var(--slate)}
.fig small{font-size:12.5px;letter-spacing:.12em}
.clients .kicker{font-size:13px;letter-spacing:.16em;color:var(--slate)}
.facts dt{font-size:11.5px;letter-spacing:.16em}
.reg .fine{font-family:'Assistant',sans-serif;font-size:14px;letter-spacing:0;font-weight:600}
.tools figcaption{font-size:14px}
.bar .meta span{font-size:13.5px}
.closing .fineprint{font-family:'Assistant',sans-serif;font-size:14px;
  letter-spacing:.04em;text-transform:none;font-weight:600}
.erplw footer{font-family:'Assistant',sans-serif;font-size:14px;letter-spacing:.02em}

/* --- the live-demo section gets a ground of its own --- */
.sec.demo{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#EDF1F9 0%,#F6F7FB 62%,#EFF2F9 100%);
}
.sec.demo::before{
  content:'';position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,34 C1220,92 980,110 720,88 C460,66 220,10 0,54 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,34 C1220,92 980,110 720,88 C460,66 220,10 0,54 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sec.demo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C240,10 520,0 780,30 C1040,60 1240,116 1440,86 L1440,130 L0,130 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C240,10 520,0 780,30 C1040,60 1240,116 1440,86 L1440,130 L0,130 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* the flowing hairlines from the invite, drifting slowly */
.sec.demo .streams{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
.sec.demo .streams span{
  position:absolute;left:-8%;right:-8%;height:420px;
  background-repeat:no-repeat;background-size:100% 100%;
}
.sec.demo .streams span:nth-child(1){top:6%;
  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='.16' stroke-width='2'/%3E%3Cpath d='M0,330 C300,150 700,120 1000,210 C1250,284 1420,370 1600,330' fill='none' stroke='%23249EA8' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E");
  animation:sway 30s ease-in-out infinite alternate}
.sec.demo .streams span:nth-child(2){bottom: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='.14' stroke-width='2'/%3E%3Cpath d='M0,110 C260,290 640,330 980,240 C1240,172 1430,80 1600,120' fill='none' stroke='%23F47822' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");
  animation:sway2 38s ease-in-out infinite alternate}
@keyframes sway{to{transform:translate3d(-3%,14px,0)}}
@keyframes sway2{to{transform:translate3d(3%,-16px,0)}}
@media (prefers-reduced-motion:reduce){.sec.demo .streams span{animation:none}}

.sec.demo .wrap{position:relative;z-index:3}
.sec.demo{padding:150px 0 160px}
.sec.demo + .sec{border-top:0}

@media (max-width:1000px){.sec.demo{padding:120px 0 130px}}