/* Products are planned tools: each live concept explains a practical workflow. */
.sp-products{width:86%;max-width:1640px;margin:0 auto;padding:90px 0 75px;scroll-margin-top:105px}
.sp-products p,.sp-products h2,.sp-products h3{margin:0}
.sp-section-top{border-top:1px solid #dcdcdc;padding-top:22px;display:flex;justify-content:space-between;gap:24px;font-size:13px;font-weight:700}
.sp-section-top>span{font-weight:400;color:#717171}
.sp-introduction{display:grid;grid-template-columns:1.08fr 1fr;gap:10%;align-items:end;margin:50px 0 64px}
.sp-introduction h2{font-size:clamp(46px,5.8vw,84px);letter-spacing:-.055em;font-weight:800;line-height:1.01}
.sp-introduction h2>span{color:var(--accent)}
.sp-introduction>p{font-size:clamp(18px,1.7vw,25px);line-height:1.4;letter-spacing:-.015em;max-width:550px;padding-bottom:4px}
.sp-product{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:6%;align-items:center;padding:52px 0;border-top:1px solid #dedede}
.sp-product-copy{padding:9px 0}
.sp-product-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#626262;margin-bottom:24px}
.sp-development{display:flex;align-items:center;gap:7px;white-space:nowrap}
.sp-development::before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%}
.sp-product-copy h3{font-size:clamp(33px,3.45vw,54px);line-height:1.02;font-weight:800;letter-spacing:-.05em;margin-bottom:21px}
.sp-product-copy>p{font-size:17px;line-height:1.48;color:#676767;max-width:500px}
.sp-product-copy .sp-planned-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:24px;color:#7a7a7a}
.sp-product-features{padding:0;margin:10px 0 23px;list-style:none;font-size:14px;line-height:1.7}
.sp-product-features li{display:flex;gap:10px;align-items:baseline}
.sp-product-features li::before{content:'+';color:var(--accent);font-size:15px}
.sp-price{display:flex;align-items:center;gap:19px;border-top:1px solid #e5e5e5;padding-top:20px;margin-bottom:22px}
.sp-price>strong{font-size:43px;line-height:1;font-weight:800;letter-spacing:-.055em;white-space:nowrap}
.sp-price>strong>span{font-size:11px;letter-spacing:0;font-weight:500;color:#666;margin-left:3px}
.sp-price>span{font-size:13px;line-height:1.4}
.sp-price small{display:block;font-size:10px;color:#888;margin-top:4px}
.sp-product-link{display:inline-flex;align-items:center;gap:26px;font-size:14px;font-weight:700;border-bottom:1px solid #111;padding-bottom:7px}
.sp-product-link span{font-size:21px;line-height:1;transition:transform .25s,color .25s}
.sp-product-link:hover span{transform:translate(3px,-3px);color:var(--accent)}
.sp-product-note{padding-top:23px;border-top:1px solid #dedede;max-width:100%;font-size:12px;line-height:1.55;color:#777}
.sp-demo{min-width:0;border-radius:26px;background:#f1f1f2;overflow:hidden;position:relative;border:1px solid #e6e6e7}
.sp-demo-top{display:flex;justify-content:space-between;align-items:center;padding:23px 25px 17px;gap:15px}
.sp-demo-top strong{font-size:16px;font-weight:800;letter-spacing:-.03em}
.sp-demo-top>span{font-size:9px;color:#858585}
.sp-signage-workspace,.sp-leads-workspace{height:330px;position:relative;margin:0 25px;isolation:isolate}
.sp-demo-bottom{padding:0 25px 22px}
.sp-demo-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;border-top:1px solid #d7d7d9}
.sp-demo-steps button{position:relative;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;justify-content:flex-start;padding:16px 0 10px;white-space:nowrap;color:#878787}
.sp-demo-steps button::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sp-demo-steps button>span{font-size:9px;color:#aaa;font-weight:500}
.sp-demo-steps button[aria-pressed=true]{color:#111}
.sp-demo-steps button[aria-pressed=true]>span{color:var(--accent)}
.sp-demo-steps button[aria-pressed=true]::before{transform:scaleX(1)}
.sp-demo-description{font-size:11px;line-height:1.5;color:#747474;min-height:33px}
.sp-playlist{position:absolute;left:0;top:46px;width:43%;padding:16px;background:white;border:1px solid #ddd;border-radius:12px;z-index:2;transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sp-workspace-label{font-size:10px;display:flex;justify-content:space-between;color:#666;margin-bottom:15px}
.sp-workspace-label>span{font-size:9px;color:#999}
.sp-content-item{display:flex;align-items:center;gap:9px;margin:0 0 13px}
.sp-content-thumb{width:32px;height:32px;border-radius:5px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:-.06em}
.sp-thumb-one{background:#171717;color:white}.sp-thumb-two{background:#eee;color:#111}.sp-thumb-three{background:#e5332a;color:white}
.sp-content-item>span:nth-child(2){font-size:10px;font-weight:700;line-height:1.4;min-width:0}
.sp-content-item small{display:block;font-weight:400;color:#888;font-size:8px}
.sp-content-item>i{font-style:normal;font-size:9px;margin-left:auto;color:#999}
.sp-upload-status{display:flex;align-items:center;gap:6px;font-size:8px;color:#999;border-top:1px solid #eee;padding-top:11px}
.sp-upload-status>i{height:5px;width:5px;background:#111;border-radius:50%}
.sp-screen-group{position:absolute;right:0;top:68px;width:53%;height:218px;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sp-display{padding:5px;background:#111;border-radius:7px;position:absolute;box-shadow:0 12px 18px rgb(0 0 0 / .08)}
.sp-display-main{left:0;top:15px;width:85%;aspect-ratio:16/10}
.sp-display-main::after{content:'';position:absolute;left:35%;right:35%;height:18px;top:100%;border-bottom:4px solid #111;background:linear-gradient(90deg,transparent 45%,#111 45% 55%,transparent 55%)}
.sp-display-portrait{right:-1%;bottom:24px;width:34%;aspect-ratio:9/16;border-radius:7px;transform:rotate(4deg);transition:transform .8s}
.sp-screen-art{height:100%;position:relative;overflow:hidden;color:white;background:#1e1e1e;padding:12%;display:flex;align-items:center;opacity:.5;transition:opacity .9s,background .9s}
.sp-screen-art>span{position:relative;z-index:1;font-size:clamp(15px,1.8vw,29px);line-height:.95;letter-spacing:-.065em;font-weight:900}
.sp-screen-art .sp-art-period{color:var(--accent)}
.sp-screen-art>small{position:absolute;bottom:8%;left:12%;font-size:4px;letter-spacing:.08em;z-index:2}
.sp-screen-arc{width:76%;aspect-ratio:1;position:absolute;border:16px solid #4a4a4a;border-radius:50%;right:-27%;bottom:-25%;transform:rotate(0) scale(.9);transition:transform 1.4s, border-color .8s}
.sp-display-portrait .sp-screen-art>span{font-size:clamp(14px,1.3vw,21px)}
.sp-display-portrait .sp-screen-art>small{font-size:4px;bottom:8%}
.sp-display-portrait .sp-screen-arc{border-width:10px;bottom:-9%;width:100%}
.sp-device-caption{position:absolute;top:100%;left:0;width:100%;font-size:8px;color:#888;display:flex;align-items:center;gap:5px}
.sp-device-dot{width:4px;height:4px;background:#a5a5a5;border-radius:50%;transition:background .6s}
.sp-schedule-popover{position:absolute;left:17%;top:25px;width:54%;padding:20px;background:white;border:1px solid #d2d2d2;border-radius:12px;z-index:3;box-shadow:0 20px 40px rgb(0 0 0 / .1);opacity:0;visibility:hidden;transform:translateY(30px) scale(.92);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1),visibility .6s}
.sp-schedule-popover>strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:19px}
.sp-schedule-popover>div{display:flex;justify-content:space-between;font-size:10px;margin-top:12px}
.sp-schedule-popover>div>span{color:#999}.sp-schedule-popover b{font-weight:500}
.sp-schedule-confirm{margin-top:18px;border-top:1px solid #eee;padding-top:11px;font-size:9px;display:flex;justify-content:space-between}.sp-schedule-confirm>i{font-style:normal;color:var(--accent)}
.sp-publish-path{position:absolute;left:43%;top:147px;width:17%;height:1px;background:#ddd;transform-origin:left;opacity:0;transition:opacity .7s}
.sp-publish-path>i{position:absolute;left:0;top:-3px;width:7px;height:7px;background:var(--accent);border-radius:50%;animation:spPacket 1.8s ease-in-out infinite}
.sp-publish-badge{position:absolute;top:18px;right:5px;border:1px solid #ddd;padding:8px 11px;background:white;font-size:8px;border-radius:15px;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.sp-publish-badge>span{color:var(--accent);margin-left:12px}
.sp-signage[data-step="1"] .sp-playlist{opacity:.35;transform:translateX(-3px)}
.sp-signage[data-step="1"] .sp-schedule-popover{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sp-signage[data-step="1"] .sp-screen-group{transform:translateX(5px)}
.sp-signage[data-step="2"] .sp-screen-art{opacity:1;background:#111}
.sp-signage[data-step="2"] .sp-screen-arc{transform:rotate(15deg) scale(1.25);border-color:#e5332a}
.sp-signage[data-step="2"] .sp-display-portrait{transform:rotate(0deg) translateY(-4px)}
.sp-signage[data-step="2"] .sp-publish-path{opacity:1}
.sp-signage[data-step="2"] .sp-publish-badge{opacity:1;transform:translateY(0)}
.sp-signage[data-step="2"] .sp-device-dot{background:var(--accent)}
.sp-pipeline-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px}
.sp-pipeline-top>strong{font-size:20px;font-weight:800;letter-spacing:-.04em}.sp-pipeline-top>span{font-size:8px;color:#999}
.sp-pipeline-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sp-pipeline-columns>div{background:#e7e7e9;border:1px solid #e0e0e2;border-radius:8px;padding:12px 10px;height:212px}
.sp-column-label{display:flex;align-items:center;gap:5px;font-size:9px;color:#777;white-space:nowrap}
.sp-column-label>i{width:4px;height:4px;flex:none;background:#b9b9b9;border-radius:50%}
.sp-empty-lead{margin-top:12px;padding:13px 10px;background:#ededee;border:1px dashed #d5d5d7;border-radius:6px;height:142px}
.sp-empty-lead>i{display:block;height:3px;background:#e0e0e2;margin-top:8px;width:76%;border-radius:4px}.sp-empty-lead>i:nth-child(2){width:50%}.sp-empty-lead>i:nth-child(3){width:66%;margin-top:30px}
.sp-moving-lead{position:absolute;top:100px;left:2.1%;width:28%;height:148px;padding:12px;background:white;border:1px solid #ccc;border-radius:8px;box-shadow:0 6px 12px rgb(0 0 0 / .04);z-index:2;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.sp-lead-avatar{width:23px;height:23px;border-radius:50%;background:#111;color:white;display:grid;place-items:center;font-size:8px;margin-bottom:10px}
.sp-sample-label{position:absolute;right:10px;top:18px;font-size:6px;color:#999}
.sp-moving-lead>strong{font-size:14px;font-weight:800;letter-spacing:-.035em;display:block;line-height:1.05}
.sp-moving-lead>span:not(.sp-sample-label){display:block;font-size:8px;color:#999;margin-top:4px}
.sp-lead-divider{height:1px;background:#ececec;margin-top:11px}
.sp-lead-owner{display:flex;align-items:center;gap:5px;margin-top:9px;opacity:0;transform:translateY(4px);transition:opacity .5s .3s,transform .5s .3s}
.sp-lead-owner>i{width:15px;height:15px;font-size:5px;font-style:normal;background:#ededed;border-radius:50%;display:grid;place-items:center;flex:none}
.sp-lead-owner>span{font-size:6px;color:#777}
.sp-followup-time{font-size:7px;display:flex;justify-content:space-between;color:#555;margin-top:9px;opacity:0;transform:translateY(4px);transition:opacity .5s .6s,transform .5s .6s}
.sp-followup-time>b{color:var(--accent)}
.sp-lead-event{position:absolute;left:0;right:0;bottom:17px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(9px);transition:opacity .6s,transform .7s}
.sp-lead-event>span{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:#111;color:#fff;font-size:12px}
.sp-lead-event>div>strong{font-size:11px;font-weight:700;display:block;margin-bottom:3px}.sp-lead-event small{display:block;font-size:9px;color:#888}
.sp-leads[data-step="0"] .sp-event-capture,.sp-leads[data-step="1"] .sp-event-assign,.sp-leads[data-step="2"] .sp-event-followup{opacity:1;transform:translateY(0)}
.sp-leads[data-step="1"] .sp-moving-lead{transform:translateX(120%)}
.sp-leads[data-step="2"] .sp-moving-lead{transform:translateX(240%)}
.sp-leads[data-step="1"] .sp-lead-owner,.sp-leads[data-step="2"] .sp-lead-owner,.sp-leads[data-step="2"] .sp-followup-time{opacity:1;transform:translateY(0)}
.sp-leads[data-step="0"] .sp-pipeline-columns>div:nth-child(1) .sp-column-label>i,.sp-leads[data-step="1"] .sp-pipeline-columns>div:nth-child(2) .sp-column-label>i,.sp-leads[data-step="2"] .sp-pipeline-columns>div:nth-child(3) .sp-column-label>i{background:var(--accent)}
@keyframes spPacket{0%,10%{transform:translateX(0);opacity:0}25%{opacity:1}85%{opacity:1}100%{transform:translateX(var(--sp-packet-travel,0px));opacity:0}}
.sp-demo[data-product-visible=false] *,body[data-motion-paused=true] .sp-demo *{animation-play-state:paused!important}
@media(min-width:1800px){.sp-demo-top{padding-top:29px}.sp-signage-workspace,.sp-leads-workspace{height:390px;margin-left:32px;margin-right:32px}.sp-demo-bottom{padding:0 32px 28px}.sp-signage-workspace{padding-top:20px}.sp-screen-group{top:85px;height:250px}.sp-playlist{top:57px;padding:22px}.sp-content-item{margin-bottom:20px}.sp-content-item>span:nth-child(2){font-size:12px}.sp-content-item small{font-size:9px}.sp-content-thumb{width:36px;height:36px}.sp-publish-path{top:180px}.sp-pipeline-top{padding-top:27px;padding-bottom:25px}.sp-pipeline-columns>div{height:248px}.sp-moving-lead{top:123px;height:165px;padding:16px}.sp-empty-lead{height:165px}.sp-lead-event{bottom:22px}.sp-schedule-popover{top:54px}.sp-demo-description{font-size:12px}.sp-demo-steps button{font-size:14px}}
@media(max-width:1100px){.sp-products{padding-top:70px}.sp-product{gap:4%;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.sp-product-copy>p{font-size:15px}.sp-product-copy h3{font-size:36px}.sp-product-features{font-size:12px}.sp-product-meta{font-size:9px;gap:6px}.sp-demo-top{padding-left:18px;padding-right:18px}.sp-signage-workspace,.sp-leads-workspace{margin:0 18px;height:310px}.sp-demo-bottom{padding-left:18px;padding-right:18px}.sp-content-item{gap:6px}.sp-playlist{width:45%;padding:12px}.sp-content-item>span:nth-child(2){font-size:8px}.sp-content-item small{font-size:6px}.sp-content-thumb{width:25px;height:25px}.sp-screen-group{width:52%;top:82px;height:181px}.sp-device-caption{font-size:6px}.sp-screen-art>span{font-size:19px}.sp-display-portrait .sp-screen-art>span{font-size:14px}.sp-demo-steps button{font-size:10px;gap:5px}.sp-demo-steps button>span{font-size:8px}.sp-demo-description{font-size:10px}.sp-schedule-popover{padding:16px;width:60%;left:14%}.sp-schedule-popover>strong{font-size:21px}.sp-pipeline-top>strong{font-size:17px}.sp-pipeline-top>span{font-size:7px}.sp-pipeline-columns{gap:7px}.sp-pipeline-columns>div{padding:11px 7px;height:198px}.sp-column-label{font-size:7px}.sp-moving-lead{top:93px;padding:10px 8px;height:140px}.sp-moving-lead>strong{font-size:12px}.sp-sample-label{font-size:5px;right:6px}.sp-lead-owner>span{font-size:5px}.sp-followup-time{font-size:6px}.sp-lead-event{bottom:17px}.sp-lead-event small{font-size:8px}.sp-empty-lead{padding:10px 7px;height:140px}.sp-price>strong{font-size:37px}.sp-price{gap:13px}.sp-price>span{font-size:11px}}
@media(max-width:767px){.sp-products{width:88%;padding:60px 0;scroll-margin-top:85px}.sp-section-top{font-size:11px;padding-top:18px;gap:16px}.sp-section-top>span{text-align:right;font-size:10px}.sp-introduction{grid-template-columns:1fr;gap:24px;margin:35px 0 40px}.sp-introduction h2{font-size:clamp(42px,9vw,64px)}.sp-introduction>p{font-size:19px;max-width:100%;padding:0}.sp-product{grid-template-columns:1fr;gap:28px;padding:34px 0}.sp-product-copy{padding:0}.sp-product-copy h3{font-size:39px}.sp-product-copy>p{font-size:16px}.sp-product-meta{font-size:10px;margin-bottom:20px}.sp-product-features{font-size:14px;margin-bottom:22px}.sp-product-copy .sp-planned-label{margin-top:20px}.sp-price>strong{font-size:43px}.sp-price>span{font-size:13px}.sp-price small{font-size:10px}.sp-product-link{font-size:14px}.sp-product-note{font-size:11px;line-height:1.55}.sp-demo{border-radius:20px}.sp-demo-top{padding:20px 16px 11px}.sp-demo-top strong{font-size:15px}.sp-demo-top>span{font-size:8px}.sp-signage-workspace,.sp-leads-workspace{height:305px;margin:0 16px}.sp-demo-bottom{padding:0 16px 16px}.sp-demo-description{min-height:30px;line-height:1.45}.sp-demo-steps button{font-size:11px}.sp-playlist{top:48px;width:47%;padding:12px 10px}.sp-content-item>span:nth-child(2){font-size:8px}.sp-content-item small{font-size:6px}.sp-content-item>i{display:none}.sp-screen-group{top:89px;width:49%;height:176px}.sp-display{padding:4px}.sp-display-main{width:91%}.sp-display-portrait{width:40%;bottom:32px}.sp-screen-art>span{font-size:19px}.sp-display-portrait .sp-screen-art>span{font-size:14px}.sp-screen-arc{border-width:12px}.sp-display-portrait .sp-screen-arc{border-width:8px}.sp-device-caption{font-size:6px;top:94%}.sp-schedule-popover{top:34px;left:15%;width:67%;padding:19px}.sp-schedule-popover>strong{font-size:24px}.sp-publish-badge{top:22px;font-size:7px}.sp-publish-path{left:45%;width:15%;top:151px}.sp-pipeline-top{padding:17px 0 18px}.sp-pipeline-top>strong{font-size:18px}.sp-pipeline-top>span{font-size:7px}.sp-pipeline-columns{gap:7px}.sp-pipeline-columns>div{padding:10px 6px;height:200px}.sp-column-label{font-size:7px;gap:4px}.sp-moving-lead{top:92px;width:28%;padding:10px 7px;height:141px}.sp-moving-lead>strong{font-size:12px}.sp-moving-lead>span:not(.sp-sample-label){font-size:7px}.sp-sample-label{font-size:4.5px;right:5px;top:15px}.sp-lead-avatar{width:20px;height:20px;font-size:7px}.sp-lead-owner{gap:3px;margin-top:8px}.sp-lead-owner>i{width:12px;height:12px;font-size:4px}.sp-lead-owner>span{font-size:5px;line-height:1.2}.sp-followup-time{font-size:6px}.sp-lead-event{bottom:14px;gap:8px}.sp-lead-event>div>strong{font-size:10px}.sp-lead-event small{font-size:8px}}
@media(max-width:380px){.sp-demo-top strong{font-size:14px}.sp-demo-top>span{font-size:7px}.sp-pipeline-top>strong{font-size:16px}.sp-pipeline-top>span{font-size:6px}.sp-column-label{font-size:6px;gap:3px}.sp-moving-lead>strong{font-size:10px}.sp-sample-label{display:none}.sp-lead-owner>span{font-size:4.5px}.sp-followup-time{font-size:5px}.sp-screen-art>span{font-size:16px}.sp-display-portrait .sp-screen-art>span{font-size:12px}.sp-content-item>span:nth-child(2){font-size:7px}.sp-content-item small{font-size:5px}.sp-product-copy h3{font-size:35px}.sp-demo-steps button{font-size:10px}.sp-publish-badge{font-size:6px}.sp-device-caption{font-size:5px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .sp-demo *,html:not(.motion-enabled) .sp-demo *::before{animation:none!important;transition:none!important}}

/* Contrast for real product copy and controls, outside the illustrative workspaces. */
.sp-product-copy .sp-planned-label,.sp-price small,.sp-product-note{color:#6f6f6f}
.sp-demo-top>span,.sp-demo-steps button,.sp-demo-steps button>span,.sp-demo-description{color:#666}
.sp-demo-steps button[aria-pressed=true]{color:#111}
.sp-demo-steps button[aria-pressed=true]>span{color:#c42b23}
