/* Spectrum: Signal's bones in the NovaVantix logo palette. No phones; the product is shown as flat interface cards. */
.spec{--paper:#F8F6FF;--ink:#0F0A1F;--ink-2:#4A4560;--ink-3:#8C889E;--purple:#7A2BE0;--indigo:#5B55E6;--blue:#2F6CF6;--sky:#1E9BF2;--cyan:#55DDEE;--magenta:#F03A8C;--coral:#EE4A52;--orange:#FFAE46;--grad:linear-gradient(90deg,#7A2BE0 0%,#2F6CF6 16%,#1E9BF2 31%,#55DDEE 44%,#5B55E6 56%,#8A1560 66%,#EE4A52 81%,#FFAE46 100%);--line:2.5px solid var(--ink);--sh:0 8px 0 var(--ink);--sh-s:0 5px 0 var(--ink)}
.spec .btn{background:var(--orange)}.spec .btn .wa-g{color:inherit}.spec .btn--ink{background:var(--ink);color:#fff}.spec .btn--light{background:#fff;color:var(--ink)}
.spec .eyebrow{background:var(--ink);color:var(--cyan)}.spec .tag{background:var(--orange);color:var(--ink)}.spec .pill{background:var(--cyan)}
.spec .strip{background:var(--ink)}
.spec .top{background:rgba(248,246,255,.86)}

/* hero: the logo's purple to sky, and the product as cards */
.spec .hero-t{background:linear-gradient(165deg,#7A2BE0 0%,#5B55E6 48%,#2F6CF6 100%);color:#fff}
.spec .hero h1{color:#fff}.spec .sub{color:rgba(255,255,255,.88)}
.spec .lnk{color:#fff;border-bottom-color:#fff}
.spec .trust li{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7);color:#fff}
.spec .hero-v{background:linear-gradient(165deg,#2F6CF6 0%,#1E9BF2 55%,#55DDEE 100%);height:760px;overflow:hidden}
.spec .hero-v::before{display:none}
.spec .route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.spec .route path{fill:none;stroke-linecap:round}.spec .r1{stroke:rgba(255,255,255,.4);stroke-width:3;stroke-dasharray:3 12}.spec .r2{stroke:#fff;stroke-width:4;stroke-dasharray:var(--len,900);stroke-dashoffset:0}
.is-live .spec .r2,.spec.is-live .r2{animation:draw 4s cubic-bezier(.2,.8,.2,1) infinite}@keyframes draw{0%{stroke-dashoffset:var(--len,900)}55%,100%{stroke-dashoffset:0}}
.spec .rdot{fill:var(--orange);stroke:var(--ink);stroke-width:3}
.spec .hv-ad{position:absolute;left:6%;top:56px;width:360px;transform:rotate(-4deg);z-index:2}
.spec .hv-chat{position:absolute;right:6%;top:40px;width:400px;transform:rotate(3deg);z-index:2}
.spec .hv-lead{position:absolute;left:50%;bottom:44px;transform:translateX(-50%) rotate(-2deg);z-index:3}
.spec .hv-lead .lead{border:var(--line);box-shadow:var(--sh);border-radius:22px}
.spec .cap{position:relative;display:inline-block;margin:0 0 12px;left:auto;right:auto;bottom:auto;background:var(--ink);color:#fff}
.spec .hv-ad .post{border:var(--line);border-radius:22px;box-shadow:var(--sh)}
.spec .stk{border:var(--line)}.spec .stk1{left:5%;bottom:34px;top:auto;background:var(--orange)}.spec .stk2{right:5%;bottom:56px;top:auto;background:var(--cyan)}

/* flat interface cards */
.cc{width:100%;max-width:400px;background:#fff;border:var(--line);border-radius:26px;box-shadow:var(--sh);overflow:hidden;font-family:-apple-system,var(--sans);color:#111B21}
.cc-h{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 10px}.cc-h b{font:800 30px/1 var(--sans);letter-spacing:-.03em}.cc-h span{display:flex;gap:14px}.cc-h svg{width:22px;height:22px}.cc-h svg:last-child{color:#25D366}
.cc-s{margin:0 16px 12px;height:40px;border-radius:12px;background:#F0F2F1;display:flex;gap:8px;align-items:center;padding:0 12px;color:#8A8F93;font-size:15px}.cc-s svg{width:16px;height:16px}
.cc .wa-chips{padding:0 16px 10px}.cc-l{padding-bottom:6px}
.bb{width:100%;max-width:420px;background:var(--chat);border:var(--line);border-radius:26px;box-shadow:var(--sh);padding:18px 14px 16px;display:flex;flex-direction:column;gap:8px}
.notis{width:100%;max-width:420px;display:grid;gap:12px}
.noti{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:rgba(255,255,255,.94);border:var(--line);border-radius:20px;padding:14px 16px;box-shadow:var(--sh-s)}
.noti .app{width:44px;height:44px;border-radius:11px;background:#25D366;display:grid;place-items:center}.noti .app svg{width:26px;height:26px;color:#fff}
.noti b{display:block;font:800 15px/1.2 var(--sans)}.noti span{display:block;font:500 14px/1.3 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.noti time{font:600 12px/1 var(--sans);color:var(--ink-3);align-self:start;white-space:nowrap}
.noti:nth-child(2){transform:scale(.96);opacity:.92}.noti:nth-child(3){transform:scale(.92);opacity:.84}
.tapc{position:relative;width:min(340px,100%)}.tapc .post{border:var(--line);border-radius:22px;box-shadow:var(--sh)}
.tapc .ring{position:absolute;right:26px;bottom:22px;width:72px;height:72px;border-radius:50%;background:rgba(15,10,31,.16);box-shadow:0 0 0 14px rgba(15,10,31,.08);z-index:3}
.spec.is-live .tapc .ring{animation:pulse2 2.2s cubic-bezier(.2,.8,.2,1) infinite}@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(15,10,31,.3)}70%,100%{box-shadow:0 0 0 28px rgba(15,10,31,0)}}
.pointer{position:absolute;right:30px;bottom:-6px;width:46px;height:auto;z-index:4}

/* colour tiles */
.spec .stat--cyan{background:var(--cyan)}.spec .stat--orange{background:var(--orange)}.spec .stat--purple{background:var(--purple);color:#fff}.spec .stat--coral{background:var(--coral);color:#fff}
.spec .stat--purple i,.spec .stat--coral i{background:#fff;color:var(--ink)}

/* bento */
.spec .step .n{color:var(--cyan)}
.spec .step-v{padding:36px 30px;display:grid;place-items:center}
.spec .step--studio{background:var(--cyan)}.spec .step--studio .step-v{padding:30px 30px 0;align-items:end}
.spec .step--tap .step-v{background:var(--orange)}
.spec .step--ask .step-v{background:var(--purple)}
.spec .step--land .step-v{background:var(--sky)}
.spec .step--console{background:var(--ink);color:#fff}.spec .step--console .n{background:var(--cyan);color:var(--ink)}.spec .step--console .step-t p:last-child{color:rgba(255,255,255,.72)}
.spec .step--report .step-v{background:var(--coral)}
.spec .win-h{background:var(--paper)}.spec .dots i:nth-child(2){background:var(--orange)}.spec .dots i:nth-child(3){background:var(--cyan)}
.spec .rail{background:var(--paper)}.spec .rail em{color:var(--blue)}.spec .canvas{background:repeating-conic-gradient(#EFECF8 0 25%,#F8F6FF 0 50%) 0 0/18px 18px}
.spec .appr{background:var(--cyan)}.spec .appr .wa-g{color:var(--ink)}
.spec .con-k .g{color:var(--cyan)}.spec .cb i{background:var(--cyan)}.spec .cb.over i{background:var(--coral)}.spec .log .ok em{color:var(--cyan)}.spec .log .warn em{color:#FF9A94}.spec .log .new em{color:var(--orange)}

/* languages, difference, proof */
.spec .adc--orange{background:var(--orange)}.spec .adc--cyan{background:var(--cyan)}.spec .adc--purple{background:var(--purple);color:#fff}
.spec .vs-b .eyebrow{background:var(--cyan);color:var(--ink)}
.spec .vs-cc{position:absolute;left:50%;bottom:-80px;width:400px;margin-left:-200px;transform:rotate(-3deg)}
.spec .vs-cc .cc{box-shadow:0 8px 0 #fff}
.spec .tq--big{background:var(--cyan)}.spec .tq-m{background:var(--cyan)}.spec .tq--big .tq-m{background:#fff}
.spec .proof .lede .sample{background:#FFE7A3;color:#7A4B00}

/* maths, price, compare, faq, end */
.spec .sl-f{background:var(--sky)}.spec .sl-h{background:var(--orange)}
.spec .calc-out .eyebrow{background:var(--cyan);color:var(--ink)}.spec .co-big{color:var(--cyan)}.spec .co-bars div+div i{background:var(--cyan)}.spec .co-rows .tot,.spec .co-rows .tot output{color:var(--cyan)}
.spec .pc{background:var(--purple);color:#fff}.spec .pc .inc{border-top-color:rgba(255,255,255,.5)}.spec .pc .inc svg{color:#fff}
.spec .days .rec{background:var(--cyan)}
.spec .cmp .us{background:var(--cyan)}
.spec .q summary i{background:var(--cyan)}
.spec .end .tag{background:var(--orange)}.spec .next i{background:var(--cyan)}
.spec .inp:focus{box-shadow:0 0 0 3px var(--cyan)}
.spec .tk-l{background:var(--cyan)}.spec .tk-t i{background:var(--orange)}
.spec .idea u{text-decoration-color:var(--purple)}
.spec .word{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2.5px var(--ink)}

@media (max-width:1100px){
  .spec .hero-v{height:auto;padding:40px 0 30px}
  .spec .route,.spec .stk{display:none}
  .spec .hv-ad,.spec .hv-chat,.spec .hv-lead{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:min(400px,90%);margin:0 auto 22px;z-index:2}
  .spec .hv-ad{transform:rotate(-2deg)}.spec .hv-chat{transform:rotate(1.5deg)}
  .spec .hv-lead .lead{width:100%}
  .spec .vs-cc{position:relative;left:auto;bottom:auto;width:min(400px,100%);margin:30px auto -70px;transform:rotate(-2deg)}
}
@media (max-width:700px){
  .spec .hero-v{padding:26px 0 20px}
  .spec .hv-ad,.spec .hv-chat,.spec .hv-lead{width:min(360px,92%);margin-bottom:16px}
  .spec .step-v{padding:24px 16px}.spec .step--studio .step-v{padding:18px 14px 0}
  .spec .noti span{max-width:170px}
  .spec .word{-webkit-text-stroke:1.5px var(--ink)}
}
/* one continuous gradient across the whole hero card */
.spec .hero{margin:18px 14px 0;padding:0;border:var(--line);border-radius:var(--r);overflow:hidden;background:linear-gradient(168deg,#7A2BE0 0%,#5B55E6 26%,#2F6CF6 52%,#1E9BF2 78%,#55DDEE 100%)}
.spec .hero-t,.spec .hero-v{background:transparent;border:0;border-radius:0;max-width:none}
.spec .hero-t{padding-top:clamp(56px,6.6vw,100px)}
.spec .stk1{left:33%;top:18px;bottom:auto;transform:rotate(-9deg)}.spec .stk2{right:33%;top:56px;bottom:auto;left:auto;transform:rotate(7deg)}
@media (max-width:700px){.spec .hero{margin:10px 8px 0;border-radius:22px}}
@media (max-width:1100px){.spec .step-v{aspect-ratio:auto;min-height:0}.spec .step--studio .step-v,.spec .step--console .step-v{min-height:0}}
@media (max-width:700px){.spec .step--studio,.spec .step--console{grid-column:auto}}