/* DCS Sprint — Mobile apps and SaaS & CRM pages. Colours come from theme.css. */
section.band{padding:110px 0;position:relative}
.sv-dark{background:linear-gradient(180deg,rgba(var(--hi-rgb),.015),rgba(var(--hi-rgb),.035))}
.sv-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.sv-facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--ln2)}
.sv-facts b{display:block;font:400 30px/1 'Instrument Serif',Georgia,serif;color:var(--t1)}
.sv-facts span{display:block;margin-top:6px;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}

/* what ships */
.sv-incl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:54px;max-width:1100px}
.sv-i{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:16px;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.06),transparent 45%),var(--s2);border:1px solid var(--ln);transition:transform .2s,border-color .2s,box-shadow .2s}
.sv-i:hover{transform:translateY(-3px);border-color:var(--ln2);box-shadow:0 24px 50px -24px rgba(var(--sh-rgb),.5)}
.sv-i .ck{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--acc);color:var(--on-acc)}
.sv-i .ck svg{width:15px;height:15px}
.sv-i b{display:block;font-size:16px;color:var(--t1);letter-spacing:-.01em}
.sv-i span{font-size:14px;color:var(--t3);line-height:1.55}

/* galleries: phones and dashboards drifting sideways */
.sv-rail{margin-top:54px;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sv-track{display:flex;gap:26px;width:max-content;padding:20px var(--gutter) 40px;animation:svmarq 70s linear infinite}
.sv-rail:hover .sv-track{animation-play-state:paused}
@keyframes svmarq{to{transform:translateX(-50%)}}
.sv-ph,.sv-db{flex:none;text-decoration:none;color:inherit;display:block}
.sv-ph{width:220px}
.sv-db{width:420px}
.sv-ph .fr{border-radius:34px;padding:7px;background:linear-gradient(180deg,#2E3136,#17191C);box-shadow:0 0 0 1px rgba(var(--hi-rgb),.12),0 40px 60px -26px rgba(var(--sh-rgb),.7);transition:transform .6s var(--ease),box-shadow .6s}
.sv-ph .fr img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:50% 0;border-radius:28px;background:#111}
.sv-db .fr{border-radius:12px;overflow:hidden;background:var(--s2);border:1px solid var(--ln);box-shadow:0 40px 60px -26px rgba(var(--sh-rgb),.6);transition:transform .6s var(--ease),box-shadow .6s}
.sv-db .fr .bar{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--ln)}
.sv-db .fr .bar i{width:8px;height:8px;border-radius:50%;background:var(--ln2)}
.sv-db .fr img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0}
.sv-ph:hover .fr,.sv-db:hover .fr{transform:translateY(-10px) rotateX(4deg);box-shadow:0 0 0 1px rgba(var(--hi-rgb),.18),0 60px 80px -30px rgba(var(--sh-rgb),.8)}
.sv-ph b,.sv-db b{display:block;margin-top:16px;font-size:16px;color:var(--t1)}
.sv-ph small,.sv-db small{display:inline-block;margin-top:4px;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.sv-ph span,.sv-db span{display:block;margin-top:6px;font-size:13px;color:var(--t3);line-height:1.5}

/* tiers, add-ons, free */
.sv-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}
.sv-tier{position:relative;padding:34px 30px;border-radius:20px;background:var(--s2);border:1px solid var(--ln);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.sv-tier:hover{transform:translateY(-5px);box-shadow:0 30px 60px -28px rgba(var(--sh-rgb),.6)}
.sv-tier.feat{border-color:var(--t1);box-shadow:0 0 0 1px var(--t1)}
.sv-tier .tag{align-self:flex-start;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);border:1px solid var(--ln2);border-radius:99px;padding:4px 10px;margin-bottom:22px}
.sv-tier.feat .tag{background:var(--acc);color:var(--on-acc);border-color:transparent}
.sv-tier .nm{font-size:24px;font-weight:800;color:var(--t1);letter-spacing:-.02em}
.sv-tier .pr{font:400 44px/1.05 'Instrument Serif',Georgia,serif;color:var(--t1);margin:6px 0 10px}
.sv-tier p{color:var(--t3);font-size:15px;flex:1;margin-bottom:24px}
.sv-tier .btn{justify-content:center}
.sv-sub{margin:56px 0 0;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.sv-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:18px}
.sv-a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-radius:14px;border:1px dashed var(--ln2);background:rgba(var(--hi-rgb),.02)}
.sv-a b{display:block;color:var(--t1);font-size:15px}
.sv-a span{font-size:13px;color:var(--t3)}
.sv-a em{font:600 13px 'JetBrains Mono',monospace;font-style:normal;color:var(--t1);white-space:nowrap}
.sv-free{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.sv-f{padding:24px;border-radius:16px;background:var(--s2);border:1px solid var(--ln)}
.sv-f .ft{display:inline-block;font:600 10.5px 'JetBrains Mono',monospace;border:1px solid var(--ln2);border-radius:20px;padding:3px 10px;margin-bottom:12px;color:var(--t2)}
.sv-f h4{font-size:18px;color:var(--t1);margin-bottom:6px}
.sv-f p{font-size:14px;color:var(--t3)}

/* the clock */
.sv-clock{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:60px}
.sv-clock:before{content:"";position:absolute;left:6%;right:6%;top:27px;height:2px;background:linear-gradient(90deg,var(--ln2),var(--t1),var(--ln2));background-size:200% 100%;animation:svline 4s linear infinite}
@keyframes svline{to{background-position:-200% 0}}
.sv-st{position:relative;text-align:center;padding:0 10px}
.sv-st .n{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:var(--s2);border:1.5px solid var(--t1);font:600 14px 'JetBrains Mono',monospace;color:var(--t1);box-shadow:0 0 0 8px var(--s1)}
.sv-st:last-child .n{background:var(--acc);color:var(--on-acc)}
.sv-st b{display:block;font-size:18px;color:var(--t1);margin-bottom:6px}
.sv-st span{font-size:14px;color:var(--t3);line-height:1.55}
.sv-note{margin-top:34px;text-align:center;font:500 12.5px 'JetBrains Mono',monospace;color:var(--t3)}

@media(max-width:900px){
  .sv-incl,.sv-tiers,.sv-free{grid-template-columns:1fr}
  .sv-clock{grid-template-columns:1fr 1fr;row-gap:34px}.sv-clock:before{display:none}
  section.band{padding:70px 0}
  .sv-db{width:300px}.sv-ph{width:170px}
}
@media(max-width:560px){.sv-clock{grid-template-columns:1fr}.sv-facts{gap:22px}.sv-cta .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.sv-track,.sv-clock:before{animation:none}}

/* features page */
.sv-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:54px}
.sv-ft{position:relative;padding:24px;border-radius:16px;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.06),transparent 45%),var(--s2);border:1px solid var(--ln);display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .2s;scroll-margin-top:110px}
.sv-ft:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(var(--sh-rgb),.5)}
.sv-ft .live{align-self:flex-start;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#2FA36B;background:rgba(47,163,107,.12);border-radius:20px;padding:3px 9px;margin-bottom:6px}
.sv-ft b{font-size:17px;color:var(--t1)}
.sv-ft .d{font-size:14px;color:var(--t3)}
.sv-ft em{margin-top:10px;font:600 12px 'JetBrains Mono',monospace;font-style:normal;color:var(--t2)}
.sv-note a{color:var(--t1);font-weight:700}
@media(max-width:900px){.sv-feats{grid-template-columns:1fr}}

/* launch offer: standard price struck out next to today's price */
.launch{display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;padding:6px 14px 6px 6px;border-radius:99px;border:1px solid var(--ln2);background:var(--s2);font-size:13.5px;color:var(--t2)}
.launch b{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:var(--on-acc);border-radius:99px;padding:5px 10px}
.sv-add,.sv-feats{margin-top:16px}
.sv-a em s,.sv-ft em s{font-weight:400;color:var(--t4);margin-right:6px}
.sv-a em{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.launch b{white-space:nowrap;flex:none}