/* hero-story.css */
/* JotLink hero story (home page). Tokens map to the theme's --j3-* palette. */
.j3-story{--ink:var(--j3-ink);--muted:var(--j3-muted);--paper:var(--j3-paper);--line:var(--j3-line);--sage:var(--j3-sage);--white:var(--j3-white);--brand:var(--j3-accent);--peach:var(--j3-peach,#ffd5c5);--navy:#2c2f48;--navy-2:#3a3e5c;--violet:#6b4fbb;--violet-soft:#ece6fb;--green:#2fae84;--green-soft:#dff5ec;--amber:#f2a531;--amber-soft:#fff0d6;--card-bg:rgba(255,255,255,.94);--card-shadow:0 24px 60px rgba(13,13,26,.16);--phone-frame:#1a1a2a;--screen-bg:#f7f7fa;--scene-len:2600ms;display:block;width:100%;max-width:640px;margin:0 auto;font-family:var(--j3-font,Nunito,Arial,sans-serif);color:var(--ink);line-height:1.5;font-size:16px;text-align:left}
html[data-theme=dark] .j3-story{--violet-soft:#2a2547;--green-soft:#16332a;--amber-soft:#3a2d14;--peach:#3a2218;--card-bg:rgba(28,28,46,.94);--card-shadow:0 24px 60px rgba(0,0,0,.5);--phone-frame:#2a2a3a;--screen-bg:#14141f}
.j3-story *{box-sizing:border-box}
.j3-story h5,.j3-story p{font-family:inherit}
.j3-story .art{position:relative;height:600px;perspective:1500px;overflow:visible}
.j3-story .scene{position:absolute;left:50%;top:50%;width:100%;max-width:640px;height:600px;transform:translate(-50%,-50%) scale(var(--jhs-scale,1));transform-origin:center center}
@media (max-width:520px){.j3-story .scene{height:540px}}@media (max-width:520px){.j3-story .art{height:540px}}.j3-story .phone{position:absolute;left:50%;top:50%;width:304px;height:584px;transform:translate(-50%,-50%);border-radius:46px;background:var(--phone-frame);box-shadow:0 44px 90px rgba(13,13,26,.35),inset 0 0 0 3px #3b3b4d,inset 0 0 0 9px #07070c;z-index:5}@keyframes jhs-hover{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-51.5%)}}.j3-story .island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:26px;border-radius:14px;background:#000;z-index:4}.j3-story .screen{position:absolute;inset:11px;border-radius:38px;background:var(--screen-bg);overflow:hidden}.j3-story .sbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:20px 26px 0;font-size:12px;font-weight:800;z-index:3}.j3-story .sbar b{font-weight:700;color:var(--muted)}.j3-story .home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:2px;background:var(--ink);opacity:.6;z-index:3}.j3-story .scr{position:absolute;inset:0;padding:58px 16px 20px;display:flex;flex-direction:column;opacity:0;transform:translateX(40px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}.j3-story .scr.on{opacity:1;transform:none}.j3-story .scr.off{opacity:0;transform:translateX(-40px)}.j3-story .aphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:800;font-size:15px}.j3-story .aphead .pill{font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--violet);color:#fff;border-radius:6px;padding:3px 7px}.j3-story .tile{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-size:12px;margin-bottom:8px}.j3-story .tile .lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.j3-story .tile .big{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}.j3-story .kv{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--line);color:var(--muted);font-weight:600}.j3-story .kv:first-child{border-top:0}.j3-story .kv b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}.j3-story .tabs{display:flex;background:var(--sage);border-radius:10px;padding:3px;margin:4px 0 10px}.j3-story .tabs span{flex:1;text-align:center;font-size:11px;font-weight:800;padding:6px 0;border-radius:8px;color:var(--muted)}.j3-story .tabs span.on{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}.j3-story .row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.j3-story .row:first-of-type{border-top:0}.j3-story .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none}.j3-story .row b{display:block;font-weight:800}.j3-story .row small{color:var(--muted);font-weight:600}.j3-story .row .amt{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}.j3-story .cta-in{margin-top:auto;background:var(--ink);color:var(--paper);border-radius:12px;text-align:center;font-weight:800;font-size:13px;padding:12px}.j3-story .s1{background:linear-gradient(180deg,#1b1d33,#2c2f48);color:#fff;align-items:center;text-align:center}.j3-story .s1 .tag{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-top:6px}.j3-story .s1 .who{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:8px}.j3-story .s1 .num{font-size:12px;opacity:.7;font-weight:600}.j3-story .s1 .ava{width:96px;height:96px;border-radius:50%;margin-top:30px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;font-size:30px;font-weight:800;position:relative}.j3-story .ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand);opacity:0}.j3-story .on .ring{animation:jhs-ring 1.6s ease-out infinite}.j3-story .on .ring.r2{animation-delay:.55s}@keyframes jhs-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.7);opacity:0}}.j3-story .s1 .esim{margin-top:22px;font-size:11px;font-weight:700;background:rgba(255,255,255,.1);border-radius:999px;padding:5px 11px}.j3-story .s1 .esim i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}.j3-story .s1 .acts{margin-top:auto;display:flex;gap:44px}.j3-story .s1 .act{width:60px;height:60px;border-radius:50%;display:grid;place-items:center}.j3-story .act.no{background:#e5484d}.j3-story .act.yes{background:var(--green)}.j3-story .on .act.yes{animation:jhs-bump 1.1s ease-in-out infinite}@keyframes jhs-bump{50%{transform:scale(1.1)}}.j3-story .act svg{width:26px;height:26px;fill:#fff}.j3-story .s2 .call{background:var(--navy);color:#fff;border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:10px}.j3-story .s2 .call b{display:block;font-weight:800}.j3-story .s2 .call small{opacity:.7;font-weight:600}.j3-story .wave{display:flex;align-items:center;gap:2px;height:22px;margin-left:auto}.j3-story .wave i{width:3px;border-radius:2px;background:var(--brand);height:30%}.j3-story .on .wave i{animation:jhs-wave .8s ease-in-out infinite}.j3-story .wave i:nth-child(2){animation-delay:.1s}.j3-story .wave i:nth-child(3){animation-delay:.2s}.j3-story .wave i:nth-child(4){animation-delay:.3s}.j3-story .wave i:nth-child(5){animation-delay:.15s}.j3-story .wave i:nth-child(6){animation-delay:.25s}.j3-story .wave i:nth-child(7){animation-delay:.05s}@keyframes jhs-wave{0%,100%{height:25%}50%{height:100%}}.j3-story .note{background:var(--violet-soft);border-radius:12px;padding:10px 12px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.45;opacity:0;transform:translateY(8px);transition:.5s}.j3-story .note .lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:4px;display:flex;align-items:center;gap:6px}.j3-story .note .lbl i{width:6px;height:6px;border-radius:50%;background:var(--violet)}.j3-story .on .note{opacity:1;transform:none}.j3-story .on .note:nth-of-type(2){transition-delay:.9s}.j3-story .on .note:nth-of-type(3){transition-delay:1.8s}.j3-story .note+.note{margin-top:8px}.j3-story .cursor{display:inline-block;width:2px;height:12px;background:var(--violet);vertical-align:-2px;margin-left:2px}.j3-story .on .cursor{animation:jhs-blink .8s steps(1) infinite}@keyframes jhs-blink{50%{opacity:0}}.j3-story .prog{height:8px;border-radius:4px;background:var(--sage);overflow:hidden;margin-top:8px}.j3-story .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--brand));border-radius:4px;transition:width 2.4s cubic-bezier(.2,.8,.2,1)}.j3-story .on .prog i{width:100%}.j3-story .done{position:absolute;left:0;right:0;bottom:0;background:var(--white);border-radius:26px 26px 0 0;padding:20px 16px 26px;text-align:center;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.9,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.15)}.j3-story .done.up{transform:none}.j3-story .done .badge{width:74px;height:74px;border-radius:50%;margin:0 auto 12px;background:var(--green-soft);display:grid;place-items:center}.j3-story .done .badge svg{width:34px;height:34px;fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s ease .5s}.j3-story .done.up .badge svg{stroke-dashoffset:0}.j3-story .done h5{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.02em}.j3-story .done p{margin:0 0 14px;font-size:12px;color:var(--muted);font-weight:600}.j3-story .done .cta-in{margin:0}.j3-story .fc{position:absolute;background:var(--card-bg);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--card-shadow);font-size:13px;width:240px;opacity:0;transform:translate(0,24px) scale(.94);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.2,1);z-index:6;font-weight:600}.j3-story .fc.show{opacity:1;transform:var(--tilt,none)}.j3-story .fc .k{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.j3-story .fc .k .ic{width:24px;height:24px;border-radius:8px;display:grid;place-items:center}.j3-story .fc .k .ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.j3-story .ic.brand{background:var(--peach);color:var(--brand)}.j3-story .ic.violet{background:var(--violet-soft);color:var(--violet)}.j3-story .ic.green{background:var(--green-soft);color:var(--green)}.j3-story .ic.amber{background:var(--amber-soft);color:var(--amber)}.j3-story .fc .kv{font-size:12.5px}.j3-story .tag{display:inline-block;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.j3-story .tag.amber{background:var(--amber-soft);color:var(--amber)}.j3-story .tag.green{background:var(--green-soft);color:var(--green)}.j3-story .bub{background:var(--sage);border-radius:12px;padding:9px 11px;line-height:1.4;display:flex;gap:9px;align-items:flex-start}.j3-story .bub+.bub{margin-top:6px}.j3-story .bub b{font-weight:800}.j3-story .bub.me{background:var(--violet);color:#fff}.j3-story .num{font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}.j3-story .num small{font-size:12px;color:var(--muted);font-weight:700;margin-left:4px}.j3-story .bars{display:flex;align-items:flex-end;gap:4px;height:36px;margin-top:8px}.j3-story .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--peach);transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.j3-story .bars i:nth-child(even){background:var(--brand)}.j3-story .fc.show .bars i{transform:scaleY(1)}.j3-story .bars i:nth-child(2){transition-delay:.05s}.j3-story .bars i:nth-child(3){transition-delay:.1s}.j3-story .bars i:nth-child(4){transition-delay:.15s}.j3-story .bars i:nth-child(5){transition-delay:.2s}.j3-story .bars i:nth-child(6){transition-delay:.25s}.j3-story .bars i:nth-child(7){transition-delay:.3s}.j3-story .task{display:flex;align-items:center;gap:9px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.j3-story .chk{width:18px;height:18px;border-radius:6px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) .7s}.j3-story .fc.show .chk{transform:none}.j3-story .fc.crm{left:-22px;top:52px;--tilt:rotateY(18deg) rotateZ(-6deg)}.j3-story .fc.crm2{right:-18px;top:330px;width:216px;--tilt:rotateY(-14deg) rotateZ(4deg);transition-delay:.35s}.j3-story .fc.chat{right:-26px;top:150px;width:230px;--tilt:rotateY(-14deg) rotateZ(3deg)}.j3-story .fc.notes{left:-4px;bottom:90px;width:224px;--tilt:rotateZ(-3deg);transition-delay:.5s}.j3-story .fc.sum{left:-26px;top:60px;width:250px;--tilt:rotateZ(-2.5deg)}.j3-story .fc.stat{right:-22px;top:90px;width:190px;--tilt:rotateY(-12deg) rotateZ(3deg);transition-delay:.3s}.j3-story .fc.todo{right:0;bottom:80px;width:236px;--tilt:rotateZ(2deg);transition-delay:.7s}@media (max-width:520px){.j3-story .phone{width:252px;height:500px}.j3-story .fc{width:200px;font-size:12px}.j3-story .fc.crm{left:-8px;top:14px}.j3-story .fc.crm2{display:none}.j3-story .fc.chat{right:-8px;top:120px;width:200px}.j3-story .fc.notes{bottom:20px}.j3-story .fc.sum{top:16px;width:210px}.j3-story .fc.stat{display:none}.j3-story .fc.todo{bottom:16px;width:200px}
  }.j3-story .sp{position:absolute;width:18px;height:18px;opacity:0;z-index:4;color:var(--brand)}.j3-story .sp.v{color:var(--violet)}.j3-story .sp svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15))}.j3-story .sp.go{animation:jhs-sparkle 2.2s ease-in-out forwards}@keyframes jhs-sparkle{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1;transform:scale(1.1) rotate(25deg)}70%{opacity:.8;transform:scale(.9) rotate(60deg)}100%{opacity:0;transform:scale(.3) rotate(90deg)}}.j3-story .conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}.j3-story .conf i{position:absolute;width:8px;height:14px;border-radius:2px;top:-20px;opacity:0}.j3-story .conf.go i{animation:jhs-fall 2.6s cubic-bezier(.3,.6,.4,1) forwards}@keyframes jhs-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(640px) rotate(540deg)}}.j3-story .steps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.j3-story .steps span{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--muted);padding:6px 12px;border-radius:999px;border:1px solid var(--line);transition:.4s}.j3-story .steps span.on{color:var(--ink);border-color:var(--brand);background:var(--peach)}.j3-story .steps i{width:6px;height:6px;border-radius:50%;background:currentColor}@media (prefers-reduced-motion:reduce){.j3-story .phone,.j3-story .on .ring,.j3-story .on .act.yes,.j3-story .on .wave i,.j3-story .on .cursor,.j3-story .sp.go,.j3-story .conf.go i{animation:none!important}.j3-story .fc,.j3-story .scr,.j3-story .note,.j3-story .prog i,.j3-story .done,.j3-story .chk,.j3-story .bars i{transition:none!important}
  }
  
/* The hero stays one screen tall (the strip below appears on scroll); the scene is scaled by JS to fit both the column width and the remaining height. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero:has(.j3-hero-art-story){min-height:100vh;min-height:100svh;max-height:100vh;max-height:100svh;overflow:hidden}
@media (max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero:has(.j3-hero-art-story){min-height:0;max-height:none;overflow:visible}}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art.j3-hero-art-story{max-height:none;width:100%;max-width:none;overflow:visible;display:block}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-frame:has(.j3-hero-art-story){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
@media (max-width:900px){body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-frame:has(.j3-hero-art-story){grid-template-columns:1fr}}
.j3-story{max-width:none}
.j3-story.jhs-compact .steps{display:none}

/* product-story.css */
/* Home-page product stories (messenger, telephony, crm, esim/fmc). Shares the .j3-story vocabulary from hero-story.css. */
.j3-product-story{position:relative;width:100%;max-width:none;--jps-scale:1}
.j3-product-story .art{position:relative;height:520px;overflow:visible}
.j3-product-story .scene{--jps-h:520px}
.j3-product-story[data-h="470"] .scene{--jps-h:470px}
.j3-product-story[data-h="560"] .scene{--jps-h:560px}
.j3-product-story[data-h="600"] .scene{--jps-h:600px}
.j3-product-story .scene{position:absolute;left:50%;top:50%;width:640px;height:var(--jps-h);transform:translate(-50%,-50%) scale(var(--jps-scale));transform-origin:center center}
.j3-product-story .steps{position:absolute;left:0;right:0;bottom:0;margin:0}
.j3-product-story .fc{width:236px;font-size:12.5px}
.j3-product-story .fc .k{margin-bottom:6px}
.j3-product-story .fc .kv{font-size:12px}
.j3-product-story .fc .num{margin-top:2px}
.j3-product-story .fc .num small{display:block;margin:2px 0 0;font-size:11px}
.j3-product-story .fc .task{margin-top:6px;padding-top:6px}
.j3-product-story .fc .note{margin-top:4px;font-size:11.5px;padding:8px 10px}
.j3-product-story .fc.show .note{opacity:1;transform:none}
.j3-product-story .fc.show .note{transition-delay:.3s}
.j3-product-story .fc.show .note+.note{transition-delay:1.1s}
.j3-product-story .fc.show .note+.note+.note{transition-delay:1.9s}
.j3-product-story .fc.show .cursor{animation:jhs-blink .8s steps(1) infinite}
.j3-product-story .fc .row{padding:6px 0;font-size:11.5px}
.j3-product-story .fc .row .av svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.j3-product-story .fc .bars{height:30px}
.j3-product-story .fc .quote{font-style:italic;color:var(--ink);margin:0 0 8px;line-height:1.4}
.j3-product-story .fc .opts{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.j3-product-story .fc .opts span{padding:5px 8px;border-radius:8px;background:var(--sage);color:var(--muted);font-weight:700;font-size:11.5px}
.j3-product-story .fc .opts span.on{background:var(--peach);color:var(--brand)}
.j3-product-story .fc .ttl{display:block;font-size:13.5px;margin:2px 0}
.j3-product-story .fc p{margin:0 0 4px;color:var(--muted);font-size:11.5px;line-height:1.45}
.j3-product-story .fc .k .wave{margin-left:auto;height:16px}
.j3-product-story .fc.show .wave i{animation:jhs-wave .8s ease-in-out infinite}
.j3-product-story .ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.j3-product-story .chk-in{display:inline-block;vertical-align:-2px;margin-left:4px}
.j3-product-story .chk-in svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* generic screen (scene panel) inside a device */
.j3-product-story .scr{padding:0;transform:translateX(24px)}
.j3-product-story .scr.on{transform:none}
.j3-product-story .scr.off{transform:translateX(-24px)}

/* ---------- messenger: laptop ---------- */
.j3-product-story .laptop{position:absolute;right:20px;top:26px;width:474px;height:334px;border-radius:16px 16px 6px 6px;background:var(--phone-frame);box-shadow:0 30px 70px rgba(13,13,26,.35),inset 0 0 0 3px #3b3b4d;z-index:5;padding:12px}
.j3-product-story .lbase{position:absolute;right:-6px;top:360px;width:526px;height:16px;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#3b3b4d,#1b1d33);box-shadow:0 20px 40px rgba(13,13,26,.35);z-index:4}
.j3-product-story .lbase::after{content:'';position:absolute;left:50%;top:0;width:90px;height:5px;transform:translateX(-50%);border-radius:0 0 5px 5px;background:#55556a}
.j3-product-story .lscreen{position:relative;height:100%;border-radius:8px;background:var(--screen-bg);overflow:hidden;display:flex;font-size:11px}
.j3-product-story .side{width:130px;flex:none;background:var(--sage);border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column}
.j3-product-story .side-h{font-weight:800;font-size:12px;margin-bottom:8px}
.j3-product-story .side-t{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.j3-product-story .side .row{border:0;padding:5px 6px;border-radius:8px;font-size:10.5px;gap:7px}
.j3-product-story .side .row.on{background:var(--white)}
.j3-product-story .side .row b{font-size:10.5px}.j3-product-story .side .row small{font-size:9.5px}
.j3-product-story .side .av{width:22px;height:22px;font-size:8px}
.j3-product-story .side-f{margin-top:auto;font-size:9.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:5px}
.j3-product-story .side-f i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.j3-product-story .chat{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.j3-product-story .chat-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.j3-product-story .chat-h b{display:block;font-size:12px}
.j3-product-story .chat-h small{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px;font-size:10px}
.j3-product-story .chat-h small i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.j3-product-story .chat-h .av{width:24px;height:24px;font-size:9px}
.j3-product-story .chat-ico{margin-left:auto;color:var(--muted)}
.j3-product-story .chat-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.j3-product-story .chat-b{position:relative;flex:1;min-height:0}
.j3-product-story .chat-b .scr{padding:10px 12px;gap:6px}
.j3-product-story .chat-b .day{text-align:center;color:var(--muted);font-size:9.5px;font-weight:700}
.j3-product-story .chat-b .bub{display:block;max-width:82%;font-size:11px;padding:7px 10px}
.j3-product-story .chat-b .bub.me{margin-left:auto}
.j3-product-story .chat-b .bub.tr{background:var(--violet-soft);color:var(--ink)}
.j3-product-story .chat-b .bub .tag{display:block;width:max-content;font-size:9px;margin-bottom:4px;padding:1px 6px}
.j3-product-story .tag.violet{background:var(--violet);color:#fff}
.j3-product-story .chat-b .note{font-size:11px;padding:8px 10px}
.j3-product-story .chat-b .file{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:11px}
.j3-product-story .chat-b .file svg{width:18px;height:18px;fill:none;stroke:var(--brand);stroke-width:2;flex:none}
.j3-product-story .chat-b .file b{display:block}.j3-product-story .chat-b .file small{color:var(--muted);font-weight:600;font-size:9.5px}
.j3-product-story .chat-b .task{margin-top:2px;padding:6px 0 0;font-size:11px;border-top:0}
.j3-product-story .chat-f{display:flex;align-items:center;justify-content:space-between;margin:0 10px 8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:600}
.j3-product-story .chat-f b{width:18px;height:18px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:11px}
.j3-product-story .fc.c-tr{left:0;top:70px;--tilt:rotateY(14deg) rotateZ(-3deg)}
.j3-product-story .fc.c-ai{left:0;top:150px;--tilt:rotateY(14deg) rotateZ(-3deg)}
.j3-product-story .fc.c-task{left:0;top:210px;--tilt:rotateY(12deg) rotateZ(-2.5deg)}

/* ---------- telephony: desk phone ---------- */
.j3-product-story .desk{position:absolute;left:40px;top:60px;width:330px;height:330px;border-radius:26px;background:linear-gradient(160deg,#2c2f48,#1b1d33);box-shadow:0 34px 70px rgba(13,13,26,.4),inset 0 0 0 3px #3b3b4d;z-index:5;transform:perspective(900px) rotateY(10deg) rotateX(4deg)}
.j3-product-story .handset{position:absolute;left:18px;top:24px;width:42px;height:280px;border-radius:22px;background:linear-gradient(180deg,#3b3b4d,#25273a);box-shadow:inset 0 0 0 2px #4a4a5e}
.j3-product-story .handset::before,.j3-product-story .handset::after{content:'';position:absolute;left:6px;width:30px;height:38px;border-radius:14px;background:#1b1d33}
.j3-product-story .handset::before{top:8px}.j3-product-story .handset::after{bottom:8px}
.j3-product-story .disp{position:absolute;left:76px;top:26px;width:226px;height:92px;border-radius:12px;background:var(--screen-bg);overflow:hidden}
.j3-product-story .disp .scr{padding:12px 14px;gap:2px;justify-content:center}
.j3-product-story .disp small{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.j3-product-story .disp b{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.j3-product-story .disp b.blink{animation:jps-ring-text 1.1s ease-in-out infinite}
@keyframes jps-ring-text{50%{opacity:.55}}
.j3-product-story .disp span{font-size:11px;color:var(--muted);font-weight:600}
.j3-product-story .keys{position:absolute;left:76px;top:132px;width:226px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.j3-product-story .keys span{height:34px;border-radius:9px;background:#3b3b4d;color:#e6e6f0;display:grid;place-items:center;font-weight:800;font-size:13px;box-shadow:inset 0 -2px 0 #2a2a3a}
.j3-product-story .keys span.hot{background:var(--brand);color:#fff}
.j3-product-story .led{position:absolute;right:16px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:jps-led 1.6s ease-in-out infinite}
@keyframes jps-led{50%{opacity:.3}}
.j3-product-story .fc.c-ivr{right:4px;top:46px;width:250px;--tilt:rotateY(-14deg) rotateZ(3deg)}
.j3-product-story .fc.c-queue{right:14px;top:290px;width:190px;--tilt:rotateZ(2deg);transition-delay:.35s}
.j3-product-story .fc.c-live{left:36px;top:400px;width:320px;--tilt:rotateZ(-2deg)}
.j3-product-story .fc.c-notes{right:4px;top:70px;width:250px;--tilt:rotateY(-14deg) rotateZ(3deg);transition-delay:.3s}
.j3-product-story .fc.c-after{right:4px;top:46px;width:250px;--tilt:rotateY(-14deg) rotateZ(3deg)}
.j3-product-story .fc.c-res{right:8px;top:240px;width:220px;--tilt:rotateY(-12deg) rotateZ(3deg);transition-delay:.35s}

/* ---------- crm: pipeline board ---------- */
.j3-product-story .board{position:absolute;right:0;top:40px;width:400px;height:380px;border-radius:20px;background:var(--white);border:1px solid var(--line);box-shadow:0 30px 70px rgba(13,13,26,.22);z-index:5;padding:14px;transform:perspective(1000px) rotateY(-8deg)}
.j3-product-story .board-h{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;margin-bottom:12px}
.j3-product-story .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:calc(100% - 34px)}
.j3-product-story .col{background:var(--sage);border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;gap:6px;min-width:0}
.j3-product-story .col.won{background:var(--green-soft)}
.j3-product-story .col-t{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;text-align:center}
.j3-product-story .gcard,.j3-product-story .lead{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:7px;font-size:10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.25}
.j3-product-story .gcard .av,.j3-product-story .lead .av{width:20px;height:20px;font-size:7.5px}
.j3-product-story .gcard b{font-weight:800;font-size:10px}
.j3-product-story .lead{border-color:var(--brand);box-shadow:0 8px 20px rgba(255,107,53,.18);opacity:0;transform:translateY(10px) scale(.94);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.2,1)}
.j3-product-story .lead.show{opacity:1;transform:none}
.j3-product-story .lead b{display:block;font-size:10.5px;font-weight:800}.j3-product-story .lead small{display:block;color:var(--muted);font-weight:600;font-size:9px}
.j3-product-story .lead .tag{font-size:9px;padding:1px 6px}
.j3-product-story .fc.c-src{left:0;top:56px;--tilt:rotateY(12deg) rotateZ(-3deg)}
.j3-product-story .fc.c-hist{left:0;top:40px;width:236px;--tilt:rotateY(12deg) rotateZ(-3deg)}
.j3-product-story .fc.c-stat{left:10px;top:270px;width:200px;--tilt:rotateZ(-2deg);transition-delay:.35s}
.j3-product-story .fc.c-won{left:0;top:50px;width:236px;--tilt:rotateY(12deg) rotateZ(-3deg)}
.j3-product-story .fc.c-fu{left:0;top:230px;width:230px;--tilt:rotateZ(2deg);transition-delay:.4s}

/* ---------- esim / fmc: phone + globe ---------- */
.j3-product-story .phone{width:224px;height:452px;left:auto;top:auto;transform:none;border-radius:36px;box-shadow:0 34px 70px rgba(13,13,26,.35),inset 0 0 0 3px #3b3b4d,inset 0 0 0 8px #07070c}
.j3-product-story .phone.ph-r{right:56px;top:16px}
.j3-product-story .phone.ph-c{left:186px;top:16px}
.j3-product-story .phone .island{top:14px;width:64px;height:20px}
.j3-product-story .phone .screen{inset:9px;border-radius:29px}
.j3-product-story .phone .sbar{padding:14px 20px 0;font-size:10px}
.j3-product-story .phone .home{width:84px;bottom:6px}
.j3-product-story .phone .scr{padding:44px 12px 16px;gap:8px}
.j3-product-story .phone .aphead{font-size:13px;margin-bottom:4px}
.j3-product-story .phone .tile{font-size:11px}
.j3-product-story .phone .tile .big{font-size:15px;display:flex;align-items:center;gap:6px}
.j3-product-story .phone .tile .big.ok{color:var(--green)}
.j3-product-story .phone .tile small{display:block;color:var(--muted);font-weight:600;font-size:10px;margin-top:4px}
.j3-product-story .phone .tile .prog{margin-top:8px}
.j3-product-story .phone .chk{width:16px;height:16px;font-size:10px;transform:none}
.j3-product-story .scr.on .prog i{width:100%}
.j3-product-story .phone .orb{width:84px;height:84px;border-radius:50%;margin:8px auto 2px;background:radial-gradient(circle at 35% 30%,#cfd6f0,#6b7bb3);box-shadow:0 0 0 8px rgba(107,79,187,.12);animation:jps-orb 2.4s ease-in-out infinite}
@keyframes jps-orb{50%{box-shadow:0 0 0 16px rgba(107,79,187,.06)}}
.j3-product-story .phone .big.c{font-size:20px;font-weight:800;letter-spacing:-.02em;text-align:center}
.j3-product-story .phone small.c{display:block;text-align:center;color:var(--muted);font-weight:600;font-size:10.5px;margin-bottom:6px}
.j3-product-story .phone .kv{font-size:11px}
.j3-product-story .phone .cta-in{font-size:12px;padding:10px}
.j3-product-story .phone .scr.dark{background:linear-gradient(180deg,#1b1d33,#2c2f48);color:#fff;align-items:center;text-align:center}
.j3-product-story .phone .tag2{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-top:4px}
.j3-product-story .phone .who{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.j3-product-story .phone .numl{font-size:11px;opacity:.7;font-weight:600}
.j3-product-story .phone .ava{width:76px;height:76px;border-radius:50%;margin-top:18px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;font-size:24px;font-weight:800;position:relative}
.j3-product-story .phone .esim{margin-top:16px;font-size:10px;font-weight:700;background:rgba(255,255,255,.1);border-radius:999px;padding:4px 10px}
.j3-product-story .phone .esim i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px}
.j3-product-story .phone .acts{margin-top:auto;display:flex;gap:34px}
.j3-product-story .phone .act{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}
.j3-product-story .phone .act svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.j3-product-story .phone .act.no::before{content:'';width:20px;height:6px;border-radius:3px;background:#fff;transform:rotate(-8deg)}
.j3-product-story .phone .call{background:var(--navy);color:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:8px;font-size:11px}
.j3-product-story .phone .call b{display:block;font-weight:800}.j3-product-story .phone .call small{opacity:.7;font-weight:600;font-variant-numeric:tabular-nums}
.j3-product-story .phone .call .av{width:26px;height:26px;font-size:9px}
.j3-product-story .phone .scr.on .wave i{animation:jhs-wave .8s ease-in-out infinite}
.j3-product-story .phone .task{font-size:11px}
.j3-product-story .globe{position:absolute;left:28px;top:96px;width:262px;height:262px;z-index:3;filter:drop-shadow(0 30px 40px rgba(13,13,26,.35))}
.j3-product-story .globe svg{width:100%;height:100%;animation:jps-globe 14s ease-in-out infinite}
@keyframes jps-globe{50%{transform:rotate(-4deg)}}
.j3-product-story .globe .route{transition:stroke-dashoffset 2.2s ease .4s}
.j3-product-story .globe .pin{transform-box:fill-box;transform-origin:center;animation:jps-pin 1.8s ease-in-out infinite}
.j3-product-story .globe .pin.p2{animation-delay:.9s}
@keyframes jps-pin{50%{transform:scale(1.6);opacity:.6}}
.j3-product-story.jps-s1 .globe .route,.j3-product-story.jps-s2 .globe .route{stroke-dashoffset:0}
.j3-product-story .fc.c-pass{left:4px;top:362px;width:250px;--tilt:rotateZ(-2.5deg)}
.j3-product-story .fc.c-count{left:14px;top:40px;width:190px;--tilt:rotateY(14deg) rotateZ(-4deg)}
.j3-product-story .fc.c-noroam{left:4px;top:372px;width:230px;--tilt:rotateZ(-2.5deg);transition-delay:.35s}
.j3-product-story .fc.c-biz{left:4px;top:362px;width:250px;--tilt:rotateZ(-2.5deg)}
/* fmc */
.j3-product-story .fc.dev{left:-4px;width:196px;--tilt:rotateY(16deg) rotateZ(-5deg)}
.j3-product-story .fc.dev.d1{top:56px}.j3-product-story .fc.dev.d2{top:170px;transition-delay:.25s}.j3-product-story .fc.dev.d3{top:284px;transition-delay:.5s}
.j3-product-story .fc.dev .kv b{display:flex}
.j3-product-story .fc.dev .wave{height:14px}
.j3-product-story .fc.c-one{right:0;top:120px;width:214px;--tilt:rotateY(-14deg) rotateZ(4deg);transition-delay:.7s}
.j3-product-story .fc.c-sim{right:0;top:110px;width:214px;--tilt:rotateY(-14deg) rotateZ(4deg)}
.j3-product-story .fc.dev2{left:-4px;top:140px}
.j3-product-story .fc.c-hist{width:250px}
.j3-product-story .fc.c-one2{left:0;top:150px;width:196px;--tilt:rotateY(16deg) rotateZ(-5deg);transition-delay:.4s}
.j3-product-story[data-story="esim-intro"] .fc.c-hist{right:0;top:56px;width:232px}

/* ---------- host layout ---------- */
body.j3-page[data-j3-page="home-page"] .j3-section .prd-img:has(.j3-product-story),body.j3-page[data-j3-page="home-page"] .j3-section-telephony .prd-img:has(.j3-product-story),body.j3-page[data-j3-page="home-page"] .j3-section-esim-intro .prd-img:has(.j3-product-story){background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:visible!important}
body.j3-page[data-j3-page="home-page"] .prd-img:has(.j3-product-story) :is(.img-ph,.img-ph-clip){overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important;aspect-ratio:auto!important;height:auto!important;padding:0!important}
body.j3-page[data-j3-page="home-page"] .prd-img:has(.j3-product-story) .img-ph-clip::before,body.j3-page[data-j3-page="home-page"] .prd-img:has(.j3-product-story) .img-ph-clip::after{content:none!important}
@media (prefers-reduced-motion:reduce){.j3-product-story .disp b.ring,.j3-product-story .led,.j3-product-story .orb,.j3-product-story .globe svg,.j3-product-story .globe .pin{animation:none!important}.j3-product-story .lead{transition:none!important}}

.j3-product-story .scr.on .chk{transform:none}

/* FMC (UA): larger phone, fewer words */
.j3-product-story[data-variant="fmc"] .phone.ph-c{width:268px;height:540px;left:186px;top:8px;border-radius:42px}
.j3-product-story[data-variant="fmc"] .phone .screen{inset:10px;border-radius:34px}
.j3-product-story[data-variant="fmc"] .phone .scr{padding:52px 16px 20px;gap:10px}
.j3-product-story[data-variant="fmc"] .phone .who{font-size:22px;margin-top:8px}
.j3-product-story[data-variant="fmc"] .phone .numl{font-size:12.5px}
.j3-product-story[data-variant="fmc"] .phone .ava{width:96px;height:96px;font-size:30px;margin-top:26px}
.j3-product-story[data-variant="fmc"] .phone .esim{font-size:11px;margin-top:22px}
.j3-product-story[data-variant="fmc"] .phone .act{width:58px;height:58px}
.j3-product-story[data-variant="fmc"] .phone .acts{gap:44px}
.j3-product-story[data-variant="fmc"] .phone .aphead{font-size:15px}
.j3-product-story[data-variant="fmc"] .phone .call{font-size:12px;padding:12px}
.j3-product-story[data-variant="fmc"] .phone .tile{font-size:12px}
.j3-product-story[data-variant="fmc"] .phone .tile .big{font-size:16px}
.j3-product-story[data-variant="fmc"] .phone .kv{font-size:12px}
.j3-product-story[data-variant="fmc"] .phone .task{font-size:12px}
.j3-product-story[data-variant="fmc"] .fc.dev{width:176px;left:0;padding:12px 14px}
.j3-product-story[data-variant="fmc"] .fc.dev .k{margin:0;font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--ink)}
.j3-product-story[data-variant="fmc"] .fc.dev .k .wave{margin-left:auto;height:14px}
.j3-product-story[data-variant="fmc"] .fc.dev.d1{top:120px}.j3-product-story[data-variant="fmc"] .fc.dev.d2{top:236px}.j3-product-story[data-variant="fmc"] .fc.dev.d3{top:352px}
.j3-product-story[data-variant="fmc"] .fc.c-one{right:0;top:200px;width:180px}
.j3-product-story[data-variant="fmc"] .fc.c-sim{right:0;top:200px;width:196px}
.j3-product-story[data-variant="fmc"] .fc.c-hist{left:auto;right:0;top:300px;width:224px;--tilt:rotateY(-14deg) rotateZ(4deg)}
.j3-product-story[data-variant="fmc"] .fc.c-hist .row small{display:none}

/* Messenger: larger laptop */
.j3-product-story[data-story="messenger"] .laptop{right:0;top:20px;transform:scale(1.16);transform-origin:top right}
.j3-product-story[data-story="messenger"] .lbase{right:-8px;top:408px;transform:scale(1.16);transform-origin:top right}
.j3-product-story[data-story="messenger"] .fc.c-tr{top:96px}
.j3-product-story[data-story="messenger"] .fc.c-ai{top:180px}
.j3-product-story[data-story="messenger"] .fc.c-task{top:250px}

/* ---------- feature-section stories (product pages, AI landings) ---------- */
.j3-feature-story-scene .dev{position:absolute;top:10px}
.j3-feature-story-scene[data-cards="left"] .dev{right:0}
.j3-feature-story-scene[data-cards="right"] .dev{left:0}
.j3-feature-story-scene[data-cards="left"] .fc.a{left:0;--tilt:rotateY(14deg) rotateZ(-3deg)}
.j3-feature-story-scene[data-cards="right"] .fc.a{right:0;--tilt:rotateY(-14deg) rotateZ(3deg)}
.j3-feature-story-scene .fc.a{top:150px;width:236px}
.j3-feature-story-scene .dev-phone{width:268px;height:540px}
.j3-feature-story-scene .dev-phone .phone{left:0;top:0;width:268px;height:540px;border-radius:42px}
.j3-feature-story-scene .dev-phone .phone .screen{inset:10px;border-radius:34px}
.j3-feature-story-scene .dev-phone .phone .scr{padding:52px 16px 20px;gap:10px}
.j3-feature-story-scene .dev-phone .phone .who{font-size:22px;margin-top:8px}
.j3-feature-story-scene .dev-phone .phone .numl{font-size:12.5px}
.j3-feature-story-scene .dev-phone .phone .ava{width:96px;height:96px;font-size:30px;margin-top:26px}
.j3-feature-story-scene .dev-phone .phone .esim{font-size:11px;margin-top:22px}
.j3-feature-story-scene .dev-phone .phone .act{width:58px;height:58px}
.j3-feature-story-scene .dev-phone .phone .acts{gap:44px}
.j3-feature-story-scene .dev-phone .phone .aphead{font-size:15px}
.j3-feature-story-scene .dev-phone .phone :is(.tile,.kv,.task,.bub,.note,.call){font-size:12px}
.j3-feature-story-scene .dev-phone .phone .tile .big{font-size:16px}
.j3-feature-story-scene .dev-dash{width:390px;top:40px}
.j3-product-story .dash{width:390px;height:400px;border-radius:20px;background:var(--white);border:1px solid var(--line);box-shadow:0 30px 70px rgba(13,13,26,.22);padding:14px;display:flex;flex-direction:column;z-index:5;position:relative}
.j3-feature-story-scene[data-cards="left"] .dash{transform:perspective(1000px) rotateY(-8deg)}
.j3-feature-story-scene[data-cards="right"] .dash{transform:perspective(1000px) rotateY(8deg)}
.j3-product-story .dash-h{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px;margin-bottom:10px}
.j3-product-story .dash-b{position:relative;flex:1;min-height:0}
.j3-product-story .dash-b .scr{padding:2px;gap:8px;font-size:12px}
.j3-product-story .dash-b .tile .big{font-size:18px}
.j3-product-story .dash-b .row{padding:7px 0}
.j3-product-story .dash-b .bars{height:40px;margin-top:6px}
.j3-product-story .scr.on .bars i{transform:scaleY(1)}
.j3-product-story .opts{display:flex;flex-direction:column;gap:4px}
.j3-product-story .opts span{padding:6px 9px;border-radius:8px;background:var(--sage);color:var(--muted);font-weight:700;font-size:11.5px}
.j3-product-story .opts span.on{background:var(--peach);color:var(--brand)}
.j3-product-story .day{text-align:center;color:var(--muted);font-size:9.5px;font-weight:700}
.j3-product-story .file{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11.5px}
.j3-product-story .file svg{width:18px;height:18px;fill:none;stroke:var(--brand);stroke-width:2;flex:none}
.j3-product-story .file b{display:block}.j3-product-story .file small{color:var(--muted);font-weight:600;font-size:10px}
.j3-product-story .call{background:var(--navy);color:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:8px;font-size:11.5px}
.j3-product-story .call b{display:block;font-weight:800}.j3-product-story .call small{opacity:.7;font-weight:600;font-variant-numeric:tabular-nums}
.j3-product-story .call .av{width:26px;height:26px;font-size:9px}
.j3-product-story .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.j3-product-story .dash-b .grid4{grid-template-columns:repeat(4,1fr)}
.j3-product-story .grid4 span{height:64px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
.j3-product-story .dash-b .grid4 span{height:44px;font-size:12px}
.j3-product-story .grid4 span.ringing{animation:jps-led 1s ease-in-out infinite}
.j3-product-story .scr .tag{align-self:flex-start}
.j3-product-story .mini-laptop{position:absolute;left:-150px;bottom:48px;width:220px;height:150px;border-radius:12px 12px 4px 4px;background:var(--phone-frame);box-shadow:0 20px 50px rgba(13,13,26,.35),inset 0 0 0 3px #3b3b4d;padding:8px;z-index:6}
.j3-product-story .mini-laptop::after{content:'';position:absolute;left:-14px;right:-14px;bottom:-12px;height:12px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#3b3b4d,#1b1d33)}
.j3-product-story .mini-screen{height:100%;border-radius:6px;background:var(--screen-bg);padding:10px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.j3-product-story .mini-screen .bub{font-size:10.5px;padding:6px 9px;max-width:85%}
.j3-product-story .mini-screen .bub.me{margin-left:auto}
.j3-feature-story-scene .steps{bottom:6px}
/* hosts */
body.j3-page :is(.fcat-img,.j3-feature-art,.results-media-card):has(.j3-product-story){background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important}
body.j3-page :is(.fcat-img,.j3-feature-art,.results-media-card):has(.j3-product-story)::before,body.j3-page :is(.fcat-img,.j3-feature-art,.results-media-card):has(.j3-product-story)::after{content:none!important}
body.j3-page #results .results-media-col:has(.j3-product-story){max-width:560px}
body.j3-page[data-j3-page] #results .results-media-card.j3-product-story-host,body.j3-page[data-j3-page] .results-media-card.j3-product-story-host{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;overflow:visible!important}
body.j3-page[data-j3-page] .results-media-card.j3-product-story-host::before,body.j3-page[data-j3-page] .results-media-card.j3-product-story-host::after{content:none!important;display:none!important}

/* scene-objects.css */
/* Paper-style scene objects for the feature-section stories. Follows the look of the existing illustrations:
   white paper sheets, notebooks, envelopes, desk phones, headsets and 3D bars on the dark page, orange / violet accents. */
.jso{--pp:#f7f7fc;--pp2:#ececf4;--ink:#1f2140;--mut:#7b7f99;--ln:#d6d7e4;--navy:#1b1d33;--navy2:#2c2f48;--orange:#ff6b35;--violet:#6b4fbb;--teal:#4fb8b0;--green:#2fae84;font-family:inherit}
.jso .o{position:absolute;box-sizing:border-box}
/* paper */
.jso .pp{background:var(--pp);color:var(--ink);border-radius:10px;box-shadow:0 34px 60px rgba(8,8,20,.45),0 3px 0 #d0d1df,inset 0 0 0 1px rgba(255,255,255,.7);padding:22px 24px}
.jso .pp .h{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 4px}
.jso .pp .h.sm{font-size:15px}
.jso .pp .sub{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 10px}
.jso .pp .rule{height:1px;background:var(--ln);margin:8px 0 12px}
.jso .ln{height:3px;border-radius:2px;background:var(--ln);margin:10px 0;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.jso .ln.w60{--w:60%}.jso .ln.w80{--w:80%}.jso .ln.w100{--w:100%}.jso .ln.w45{--w:45%}
.jso .show .ln,.jso .ln.show{width:var(--w,80%)}
.jso .ln:nth-child(2){transition-delay:.25s}.jso .ln:nth-child(3){transition-delay:.5s}.jso .ln:nth-child(4){transition-delay:.75s}.jso .ln:nth-child(5){transition-delay:1s}
.jso .hw{font-size:12.5px;font-weight:700;line-height:1.7;color:var(--ink)}
.jso .hw.o{position:static}
.jso .tw{display:block;white-space:nowrap;overflow:hidden;width:0;transition:width 1.4s steps(28)}
.jso .show .tw,.jso .tw.show{width:100%}
.jso .show .tw:nth-child(2){transition-delay:.6s}.jso .show .tw:nth-child(3){transition-delay:1.2s}.jso .show .tw:nth-child(4){transition-delay:1.8s}
.jso .chk{width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:800;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);vertical-align:middle;margin-right:8px;flex:none}
.jso .chk.v{background:var(--violet);color:#fff}.jso .chk.g{background:var(--green);color:#fff}
.jso .show .chk,.jso .chk.show{transform:none}
.jso .li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;margin:9px 0;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s}
.jso .li small{display:block;font-size:10px;color:var(--mut);font-weight:600}
.jso .li .n{font-size:9px;color:var(--mut);font-weight:800;width:16px}
.jso .show .li,.jso .li.show{opacity:1;transform:none}
.jso .show .li:nth-of-type(2){transition-delay:.5s}.jso .show .li:nth-of-type(3){transition-delay:1s}.jso .show .li:nth-of-type(4){transition-delay:1.5s}
.jso .show .li:nth-of-type(2) .chk{transition-delay:.7s}.jso .show .li:nth-of-type(3) .chk{transition-delay:1.2s}.jso .show .li:nth-of-type(4) .chk{transition-delay:1.7s}
.jso .scrib{height:14px;width:120px;border-bottom:2px solid var(--violet);border-radius:0 0 40% 40%/0 0 100% 100%;opacity:.8}
/* open notebook (two pages + spine) */
.jso .nb{display:flex;padding:0;background:none;box-shadow:none}
.jso .nb .pg{flex:1;background:var(--pp);padding:22px 20px;min-height:100%;box-shadow:0 34px 60px rgba(8,8,20,.45),0 3px 0 #d0d1df}
.jso .nb .pg.l{border-radius:12px 3px 3px 12px;transform:perspective(900px) rotateY(12deg);transform-origin:right}
.jso .nb .pg.r{border-radius:3px 12px 12px 3px;transform:perspective(900px) rotateY(-12deg);transform-origin:left}
.jso .nb .spine{width:14px;background:linear-gradient(90deg,#b9a6e6,#8f78cf 50%,#b9a6e6);border-radius:3px;box-shadow:0 20px 40px rgba(8,8,20,.4)}
/* spiral notebook */
.jso .sp-nb{border-radius:6px 14px 14px 6px;padding-left:34px}
.jso .sp-nb::before{content:'';position:absolute;left:8px;top:16px;bottom:16px;width:14px;background:radial-gradient(circle at 7px 7px,#9a9cb5 3px,transparent 3.5px) 0 0/14px 22px repeat-y}
.jso .sp-nb::after{content:'';position:absolute;left:-6px;top:16px;bottom:16px;width:16px;background:radial-gradient(circle at 8px 7px,transparent 5px,#6d7090 5.5px,#6d7090 7px,transparent 7.5px) 0 0/16px 22px repeat-y;opacity:.9}
/* envelope */
.jso .env{background:var(--navy);border-radius:8px;box-shadow:0 30px 50px rgba(8,8,20,.5)}
.jso .env::before{content:'';position:absolute;inset:0 0 auto 0;height:55%;background:var(--navy2);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:8px 8px 0 0}
.jso .env::after{content:'';position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(180deg,#252840,#1b1d33);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border-radius:0 0 8px 8px}
.jso .env .seal{position:absolute;left:50%;top:48%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;z-index:2;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.jso .env.show .seal{transform:none}
.jso .env .letter{position:absolute;left:8%;right:8%;bottom:45%;background:var(--pp);border-radius:8px;padding:16px 18px;color:var(--ink);box-shadow:0 10px 30px rgba(8,8,20,.35);transform:translateY(60%);transition:transform 1s cubic-bezier(.2,.8,.2,1);z-index:1}
.jso .env.show .letter{transform:translateY(0)}
/* desk phone */
.jso .dp{background:linear-gradient(160deg,#30334d,#1b1d33);border-radius:22px;box-shadow:0 34px 60px rgba(8,8,20,.5),inset 0 0 0 2px #3b3e58;transform:perspective(900px) rotateY(12deg) rotateX(6deg)}
.jso .dp .hs{position:absolute;left:14px;top:18px;width:40px;height:72%;border-radius:20px;background:linear-gradient(180deg,#e9e9f2,#b8b9c9);box-shadow:inset 0 -4px 0 #8f90a6}
.jso .dp .hs::before,.jso .dp .hs::after{content:'';position:absolute;left:5px;width:30px;height:34px;border-radius:14px;background:#cfd0dd}
.jso .dp .hs::before{top:6px}.jso .dp .hs::after{bottom:6px}
.jso .dp .disp{position:absolute;left:68px;right:16px;top:18px;height:68px;background:var(--pp);border-radius:10px;padding:9px 12px;color:var(--ink);font-size:11px;font-weight:700;line-height:1.35}
.jso .dp .disp small{display:block;font-size:8.5px;color:var(--mut);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.jso .dp .disp b{display:block;font-size:14px}
.jso .dp .keys{position:absolute;left:68px;right:16px;bottom:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.jso .dp .keys span{height:22px;border-radius:7px;background:#3d4060;color:#e6e6f0;font-size:9.5px;font-weight:800;display:grid;place-items:center}
.jso .dp .keys span.hot{background:var(--orange);color:#fff}
/* standalone handset */
.jso .hand{width:56px;height:210px;border-radius:30px;background:linear-gradient(180deg,#eeeef5,#b9bacb);box-shadow:0 24px 40px rgba(8,8,20,.45),inset 0 -6px 0 #8f90a6;transform:rotate(22deg)}
.jso .hand::before,.jso .hand::after{content:'';position:absolute;left:7px;width:42px;height:54px;border-radius:22px;background:#d3d4e0;box-shadow:inset 0 0 0 2px #a9aabd}
.jso .hand::before{top:8px}.jso .hand::after{bottom:8px}
/* microphone */
.jso .mic{width:84px;height:210px}
.jso .mic .cap{position:absolute;left:0;top:0;width:84px;height:130px;border-radius:42px;background:radial-gradient(circle at 30% 20%,#5c5f7c,#25273a 70%);box-shadow:0 24px 50px rgba(8,8,20,.5),inset 0 0 0 3px #3d4060;background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.08) 6px 8px),repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.08) 6px 8px)}
.jso .mic .cap::after{content:'';position:absolute;left:50%;bottom:10px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);animation:jps-led 1.4s ease-in-out infinite}
.jso .mic .stem{position:absolute;left:50%;top:128px;width:8px;height:56px;margin-left:-4px;background:#8f90a6;border-radius:4px}
.jso .mic .base{position:absolute;left:0;bottom:0;width:84px;height:26px;border-radius:50%;background:linear-gradient(180deg,#4a4d68,#25273a);box-shadow:0 10px 30px rgba(8,8,20,.5)}
/* headset */
.jso .hset{width:230px;height:150px}
.jso .hset .band{position:absolute;left:0;right:0;top:0;height:200px;border:22px solid #d9dae6;border-bottom:0;border-radius:120px 120px 0 0;box-shadow:0 20px 40px rgba(8,8,20,.4);box-sizing:border-box}
.jso .hset .cup{position:absolute;top:96px;width:54px;height:76px;border-radius:24px;background:linear-gradient(180deg,#3b3e58,#1b1d33);box-shadow:0 20px 40px rgba(8,8,20,.5),inset 0 0 0 3px #4a4d68}
.jso .hset .cup.l{left:-10px}.jso .hset .cup.r{right:-10px}
.jso .hset .boom{position:absolute;left:24px;top:150px;width:110px;height:22px;border-radius:0 0 40px 40px/0 0 60px 60px;border-bottom:8px solid #b9bacb;border-left:0}
/* gauge */
.jso .gauge{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--orange) calc(var(--v,0)*1%),#3d4060 0);box-shadow:0 20px 40px rgba(8,8,20,.5),inset 0 0 0 4px #1b1d33;display:grid;place-items:center;transition:--v 1.5s;font-weight:800;color:#fff}
.jso .gauge::before{content:'';position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3b3e58,#1b1d33)}
.jso .gauge .val{position:relative;font-size:22px;letter-spacing:-.02em}
.jso .gauge .val small{display:block;font-size:9px;color:#b9b6cd;text-align:center;text-transform:uppercase;letter-spacing:.08em}
/* slider / timeline */
.jso .slide{height:34px;border-radius:17px;background:linear-gradient(180deg,#e3e4ee,#b9bacb);box-shadow:0 20px 40px rgba(8,8,20,.45);background-image:repeating-linear-gradient(90deg,transparent 0 14px,#8f90a6 14px 16px);background-size:100% 40%;background-position:0 100%;background-repeat:repeat-x}
.jso .slide .mk{position:absolute;top:-8px;left:var(--x,20%);width:14px;height:50px;border-radius:7px;background:var(--orange);box-shadow:0 8px 20px rgba(255,107,53,.5);transition:left 2.2s cubic-bezier(.2,.8,.2,1)}
/* 3d bars */
.jso .b3{width:64px;background:var(--c,#6b4fbb);transform-origin:bottom;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 60px rgba(8,8,20,.5)}
.jso .b3::before{content:'';position:absolute;top:-14px;left:0;width:100%;height:14px;background:var(--c,#6b4fbb);filter:brightness(1.35);transform:skewX(-45deg);transform-origin:bottom left}
.jso .b3::after{content:'';position:absolute;top:-14px;right:-14px;width:14px;height:100%;background:var(--c,#6b4fbb);filter:brightness(.7);transform:skewY(-45deg);transform-origin:top left}
.jso .show .b3,.jso .b3.show{transform:scaleY(1)}
.jso .b3:nth-child(2){transition-delay:.25s}.jso .b3:nth-child(3){transition-delay:.5s}
/* magnifier */
.jso .mag{width:150px;height:150px;border-radius:50%;border:12px solid #cfd0dd;background:radial-gradient(circle at 35% 30%,#3b3e58,#1b1d33);box-shadow:0 30px 60px rgba(8,8,20,.5),inset 0 0 30px rgba(255,255,255,.08)}
.jso .mag::after{content:'';position:absolute;right:-56px;bottom:-30px;width:80px;height:22px;border-radius:11px;background:linear-gradient(180deg,#d9dae6,#9a9cb5);transform:rotate(45deg);transform-origin:left center;box-shadow:0 10px 20px rgba(8,8,20,.4)}
.jso .mag svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.jso .mag svg path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.6s ease .3s}
.jso .show .mag svg path,.jso .mag.show svg path{stroke-dashoffset:0}
/* calendar */
.jso .cal{padding:0;overflow:visible}
.jso .cal .ch{background:var(--navy);color:#fff;border-radius:10px 10px 0 0;padding:14px 18px 10px;font-weight:800;font-size:14px}
.jso .cal .rings{position:absolute;top:-14px;left:10%;right:10%;height:28px;background:radial-gradient(circle at 10px 10px,#cfd0dd 5px,transparent 5.5px) 0 0/25% 28px repeat-x}
.jso .cal .days{display:grid;grid-template-columns:repeat(5,1fr);padding:10px 12px 0;gap:6px}
.jso .cal .days span{text-align:center;font-size:9px;font-weight:800;color:var(--mut);text-transform:uppercase}
.jso .cal .days span b{display:block;font-size:14px;color:var(--ink);margin-top:2px}
.jso .cal .cells{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px 12px 14px}
.jso .cal .cells i{display:block;height:88px;border-radius:8px;background:var(--pp2);position:relative}
.jso .cal .cells i.ev::before{content:'';position:absolute;left:6px;right:6px;top:8px;height:26px;border-radius:6px;background:#dcdcea;transform:scaleX(0);transform-origin:left;transition:transform .5s ease var(--d,0s)}
.jso .cal .cells.show i.ev::before{transform:none}
.jso .cal .cells i.hot::after{content:'✓';position:absolute;left:6px;right:6px;top:42px;height:38px;border-radius:6px;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.jso .cal .cells.show i.hot::after{transform:none}
/* pocket watch */
.jso .watch{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3b3e58,#1b1d33);box-shadow:0 24px 50px rgba(8,8,20,.5),inset 0 0 0 6px #cfd0dd,inset 0 0 0 8px #8f90a6;background-image:repeating-conic-gradient(from 0deg,#8f90a6 0 1deg,transparent 1deg 30deg)}
.jso .watch::before{content:'';position:absolute;left:50%;top:-22px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:5px solid #cfd0dd}
.jso .watch i{position:absolute;left:50%;bottom:50%;width:4px;border-radius:2px;background:#eaeaf3;transform-origin:bottom;margin-left:-2px}
.jso .watch i.h{height:30px;transform:rotate(60deg)}.jso .watch i.m{height:44px;transform:rotate(var(--r,0deg));transition:transform 3s linear}
.jso .watch.show i.m{--r:340deg}
/* folded map */
.jso .map{display:flex;gap:2px;filter:drop-shadow(0 24px 40px rgba(8,8,20,.45))}
.jso .map i{flex:1;position:relative;overflow:hidden;background-color:#f1f2f8;background-image:radial-gradient(ellipse 30% 20% at 24% 26%,#d5ead9 0 62%,transparent 64%),radial-gradient(ellipse 24% 16% at 76% 74%,#d8e9d6 0 62%,transparent 64%),radial-gradient(ellipse 18% 12% at 62% 22%,#dcebe0 0 62%,transparent 64%),linear-gradient(112deg,transparent 0 44%,#cfe0f3 44% 51%,transparent 51%),linear-gradient(0deg,transparent 0 47%,#c9ccdf 47% 52%,transparent 52%),linear-gradient(90deg,transparent 0 58%,#c9ccdf 58% 63%,transparent 63%),repeating-linear-gradient(0deg,transparent 0 21px,#dfe1ec 21px 23px),repeating-linear-gradient(90deg,transparent 0 25px,#dfe1ec 25px 27px)}
.jso .map i:nth-child(1){transform:skewY(6deg);border-radius:6px 0 0 6px}
.jso .map i:nth-child(2){transform:skewY(-6deg);filter:brightness(1.03)}
.jso .map i:nth-child(3){transform:skewY(6deg);border-radius:0 6px 6px 0}
.jso .map::after{content:'';position:absolute;inset:6% 5%;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 170%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M22 128C58 92 84 146 118 104S164 44 180 34%22 fill=%22none%22 stroke=%22%23ff6b35%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-dasharray=%227 6%22/%3E%3Ccircle cx=%2222%22 cy=%22128%22 r=%225%22 fill=%22%236b4fbb%22/%3E%3Ccircle cx=%2222%22 cy=%22128%22 r=%222%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none;z-index:0}
.jso .map>.o{z-index:1}
.jso .pin{width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,107,53,.25);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.jso .pin.show,.jso .show .pin{transform:none}
/* suitcase */
.jso .suit{background:linear-gradient(180deg,transparent 0 62%,#3b3e58 62% 65%,transparent 65%),repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.045) 11px 13px),linear-gradient(90deg,#2a2d45,#1b1d33 30%,#2a2d45 50%,#1b1d33 70%,#2a2d45);border-radius:18px;box-shadow:0 30px 60px rgba(8,8,20,.55),inset 0 0 0 3px #3b3e58}
.jso .suit::after{content:'';position:absolute;left:14px;right:14px;top:44px;height:34px;border:3px solid #4a4e6c;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.jso .suit .lk{position:absolute;left:50%;top:14px;width:26px;height:10px;margin-left:-13px;border-radius:3px;background:#ff6b35;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.jso .suit::before{content:'';position:absolute;left:50%;top:-30px;width:70px;height:40px;margin-left:-35px;border:8px solid #3b3e58;border-bottom:0;border-radius:14px 14px 0 0}
.jso .suit .tagl{position:absolute;right:-30px;top:-10px;width:70px;height:40px;background:var(--pp);border-radius:6px;transform:rotate(14deg);color:var(--ink);font-size:9px;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 20px rgba(8,8,20,.4);transform-origin:top left;animation:jso-swing 3s ease-in-out infinite}
@keyframes jso-swing{50%{transform:rotate(22deg)}}
/* light phone */
.jso .phl{background:#e9e9f2;border-radius:26px;box-shadow:0 30px 60px rgba(8,8,20,.5),inset 0 0 0 3px #3b3e58,inset 0 0 0 6px #d9dae6;padding:10px;color:var(--ink)}
.jso .phl .scrn{background:var(--pp);border-radius:18px;height:100%;padding:22px 12px 12px;font-size:11px;font-weight:700;position:relative;overflow:hidden}
.jso .phl .scrn::before{content:'';position:absolute;left:50%;top:8px;width:40px;height:6px;margin-left:-20px;border-radius:3px;background:#1b1d33}
.jso .phl .t{font-size:14px;font-weight:800;margin:2px 0 6px}
.jso .phl .bb{background:#e6e6f1;border-radius:10px;padding:7px 9px;margin:6px 0;font-size:10.5px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.jso .phl .bb.me{background:var(--violet);color:#fff}
.jso .phl .show .bb,.jso .phl .bb.show{opacity:1;transform:none}
.jso .phl .show .bb:nth-of-type(2){transition-delay:.7s}.jso .phl .show .bb:nth-of-type(3){transition-delay:1.4s}
.jso .rng{position:relative;width:74px;height:74px;border-radius:50%;margin:10px auto;background:conic-gradient(var(--violet) calc(var(--v,0)*1%),#e0e0ec 0);display:grid;place-items:center;transition:--v 1.5s}
.jso .rng::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--pp)}
.jso .rng b{position:relative;font-size:13px}
/* ticket / small card */
.jso .tk{background:var(--pp);border-radius:8px;padding:12px 14px;color:var(--ink);font-size:11px;font-weight:700;box-shadow:0 20px 40px rgba(8,8,20,.45),0 2px 0 #d0d1df;opacity:0;transform:translateY(16px) rotate(var(--r,0deg));transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1)}
.jso .tk.show,.jso .show .tk{opacity:1;transform:rotate(var(--r,0deg))}
.jso .tk .n{font-size:9px;color:var(--mut);font-weight:800}
.jso .tk b{display:block;font-size:13px}
.jso .tk small{color:var(--mut);font-weight:600;font-size:10px}
.jso .tk .tkd{border-top:1px dashed #b9bacb;margin:8px 0 6px}
/* dark chip / wave card */
.jso .chip{background:var(--navy);color:#fff;border-radius:10px;padding:10px 12px;font-size:10.5px;font-weight:700;line-height:1.4;box-shadow:0 20px 40px rgba(8,8,20,.5);opacity:0;transform:translateY(12px) rotate(var(--r,0deg));transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1)}
.jso .chip small{display:block;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.jso .chip.show,.jso .show .chip{opacity:1;transform:rotate(var(--r,0deg))}
.jso .wv{display:flex;align-items:center;justify-content:center;gap:3px;height:26px}
.jso .wv i{display:block;flex:none;width:3px;border-radius:2px;background:var(--orange);height:30%}
.jso .show .wv i,.jso .wv.show i{animation:jhs-wave .8s ease-in-out infinite}
.jso .wv i:nth-child(2n){animation-delay:.1s}.jso .wv i:nth-child(3n){animation-delay:.2s}.jso .wv i:nth-child(5n){animation-delay:.3s}
/* medal */
.jso .medal{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb08a,#ff6b35 60%,#d94f1e);box-shadow:0 20px 40px rgba(8,8,20,.45),inset 0 0 0 4px rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;transform:scale(0) rotate(-20deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.jso .medal::before,.jso .medal::after{content:'';position:absolute;top:52px;width:18px;height:46px;background:#3457c4;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.jso .medal::before{left:12px;transform:rotate(12deg)}.jso .medal::after{right:12px;transform:rotate(-12deg)}
.jso .medal.show,.jso .show .medal{transform:none}
/* coin icon */
.jso .coin{width:54px;height:54px;border-radius:50%;background:#ffe3d4;color:var(--orange);display:grid;place-items:center;box-shadow:0 14px 30px rgba(8,8,20,.35)}
.jso .coin.v{background:#e8e2f7;color:var(--violet)}
.jso .coin svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jso .coin.ringing{animation:jhs-bump 1.1s ease-in-out infinite}
/* pen / pencil */
.jso .pen{width:8px;height:150px;border-radius:4px;background:linear-gradient(180deg,#2c2f48 0 70%,#f2c9a4 70% 92%,#1b1d33 92%);transform:rotate(-32deg);box-shadow:0 14px 24px rgba(8,8,20,.4)}
/* light laptop */
.jso .lapl{background:#dfe0ea;border-radius:10px 10px 4px 4px;padding:8px;box-shadow:0 30px 60px rgba(8,8,20,.5),inset 0 0 0 3px #3b3e58}
.jso .lapl .scrn{background:var(--pp);border-radius:6px;height:100%;padding:12px;font-size:10.5px;font-weight:700;color:var(--ink)}
.jso .lapl::after{content:'';position:absolute;left:-16px;right:-16px;bottom:-12px;height:12px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#cfd0dd,#9a9cb5)}
/* dark device slabs (tablet / laptop behind) */
.jso .slab{background:linear-gradient(160deg,#2e3149,#1b1d33);border-radius:14px;box-shadow:0 30px 60px rgba(8,8,20,.5),inset 0 0 0 3px #3b3e58}
/* flow lines */
.jso .flow path{fill:none;stroke:#8f78cf;stroke-width:2;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.4s ease}
.jso .flow.show path{stroke-dashoffset:0}
.jso .flow.show path:nth-child(2){transition-delay:.3s}.jso .flow.show path:nth-child(3){transition-delay:.6s}
.jso .hub{width:96px;height:96px;border-radius:50%;background:var(--pp);color:var(--violet);display:grid;place-items:center;font-weight:800;font-size:14px;box-shadow:0 0 0 14px rgba(107,79,187,.12),0 24px 50px rgba(8,8,20,.5)}
.jso .devc{background:var(--pp);border-radius:12px;padding:10px 12px;color:var(--ink);font-size:10.5px;font-weight:800;display:flex;align-items:center;gap:8px;box-shadow:0 20px 40px rgba(8,8,20,.45);opacity:0;transform:scale(.9);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1)}
.jso .devc.show,.jso .show .devc{opacity:1;transform:none}
.jso .devc svg{width:18px;height:18px;fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jso .pill{background:var(--pp);color:var(--ink);border-radius:999px;padding:10px 18px;font-weight:800;font-size:13px;box-shadow:0 16px 40px rgba(8,8,20,.45);display:flex;align-items:center;gap:8px}
.jso .pill svg{width:16px;height:16px;fill:none;stroke:var(--violet);stroke-width:2.2;stroke-linecap:round}
.jso .arc{border:2px dashed #6d7090;border-radius:50%;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}
.jso .disc{border-radius:50%;background:radial-gradient(ellipse at center,#2a2d45,#12121c 70%);opacity:.9}
.jso .dot{width:10px;height:10px;border-radius:50%;background:var(--teal)}
.jso .dot.o{background:var(--orange)}
/* generic float-in for any object with data-from */
.jso .o[data-from]{opacity:0;transform:translateY(14px) rotate(var(--r,0deg));transition:opacity .6s,transform .8s cubic-bezier(.2,.9,.2,1)}
.jso .o[data-from].show{opacity:1;transform:rotate(var(--r,0deg))}
.jso .o.keep[data-from]{opacity:1;transform:rotate(var(--r,0deg))}
.jso .show .pl{stroke-dashoffset:0!important}
.jso .grp{display:block}
@media (prefers-reduced-motion:reduce){.jso *{animation:none!important;transition:none!important}}
@property --v{syntax:'<number>';inherits:false;initial-value:0}
.jso .gauge.show,.jso .show .gauge{--v:var(--to,90)}
.jso .rng.show,.jso .show .rng{--v:var(--to,100)}

/* .g inside scenes is a green badge, not the site-wide gradient text helper */
html body.j3-page .jso .chk.g{background:var(--green);background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;-webkit-text-fill-color:#fff}

/* motion.css */
/* Motion changes paint only; the approved page geometry stays intact. */
@keyframes j3-menu-arrive {from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference) {
  .j3-page .j3-nav-group[open] > .j3-nav-panel {animation:j3-menu-arrive .2s ease-out both;}
  .j3-page .j3-nav-panel a {transition:background-color .18s,color .18s;}
  .j3-page :is(.btn-main,.btn-primary,.btn-out,.btn-watch,.nav-dl,.nav-cta) {
    transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;
  }
  .j3-page :is(.btn-main,.btn-primary,.btn-out) > svg {transition:translate .2s;}
  .j3-page :is(.btn-main,.btn-primary,.btn-out):hover > svg {translate:2px 0;}
  .j3-page .btn-watch-circle {transition:background-color .2s,transform .2s;}
  .j3-page .btn-watch:hover .btn-watch-circle {transform:scale(1.08);}
  .j3-page :is(.btn-main,.btn-primary,.btn-watch):active {transform:translateY(1px);}
  .j3-page :is(.faq-a,.faq-body,.facc-body) {transition:max-height .3s cubic-bezier(.22,.75,.2,1);}
  .j3-page :is(.faq-ico-wrap,.faq-toggle) {transition:background-color .2s,border-color .2s;}
  .j3-page :is(.faq-arrow,.faq-icon,.facc-icon) {transition:transform .3s cubic-bezier(.22,.75,.2,1);}
  .j3-page #roi :is(.jl-cc-bar-productive,.jl-cc-bar-routine) {transition:width .3s ease-out;}
}
@media(prefers-reduced-motion:reduce) {
  .j3-page .j3-nav-group[open] > .j3-nav-panel {animation:none;}
  .j3-page :is(.btn-main,.btn-primary,.btn-out):hover > svg {translate:none;}
  .j3-page .btn-watch:hover .btn-watch-circle {transform:none;}
}

/* Shared interaction language: only actionable surfaces lift. */
@media(prefers-reduced-motion:no-preference){
 body.j3-page :is(.cta-demo-btn,.btn-call-micro,.cta-cross-link,.sol-card,.j3-post-card__link,.ftab-btn,.cases-tab-btn,.region-btn,.calc-preset-btn,.faq-q,.facc-hd,.lang-btn,.j3-mobile-groups a){transition:translate .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease}
 body.j3-page :is(.j3-post-card__arrow,.sol-card-link svg,.cta-cross-link svg,.fcat-link svg){transition:translate .22s ease}
 body.j3-page :is(.btn-main,.btn-primary,.btn-out,.cta-demo-btn,.nav-cta,.nav-dl):active{translate:0 1px}
 body.j3-page input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]),body.j3-page :is(textarea,select){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
 body.j3-page input:not([type=range]):not([type=checkbox]):not([type=radio]):focus-visible,body.j3-page :is(textarea,select):focus-visible{border-color:var(--j3-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--j3-accent) 16%,transparent)}
 body.j3-page :is(.cmpv-col,.price-card,.calc-card):focus-within{border-color:var(--j3-accent)}
 body.j3-page :is(.j3-post-card__link,.cta-cross-link,.sol-card):focus-within :is(.j3-post-card__arrow,.sol-card-link svg){translate:3px 0}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 body.j3-page :is(.btn-main,.btn-primary,.btn-out,.cta-demo-btn,.nav-cta,.nav-dl):hover{translate:0 -2px;box-shadow:0 5px 14px #102d3520}
 body.j3-page :is(a.cta-cross-link,a.sol-card,.sol-card:has(a[href]),a.country-card,.j3-post-card__link):hover{translate:0 -3px}
 body.j3-page :is(.j3-post-card__link,.sol-card,.cta-cross-link,.fcat-link):hover :is(.j3-post-card__arrow,.sol-card-link svg,.cta-cross-link svg,.fcat-link svg){translate:3px 0}
 body.j3-page :is(.ftab-btn,.cases-tab-btn,.region-btn,.calc-preset-btn):hover{border-color:var(--j3-accent);box-shadow:inset 0 -2px 0 var(--j3-accent)}
 body.j3-page :is(.faq-q,.facc-hd):hover{background-color:color-mix(in srgb,var(--j3-accent) 7%,transparent)}
 body.j3-page :is(.j3-nav-panel a,.j3-mobile-groups a,.lang-btn):hover{color:var(--j3-accent)}
 body.j3-page #jl-footer a:hover{color:var(--j3-accent);text-decoration:underline;text-underline-offset:4px}
}
@media(prefers-reduced-motion:reduce){
 body.j3-page *,body.j3-page *::before,body.j3-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Feature descriptions gently advance without changing the document layout. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body.j3-page :is(.feat-card,.fcat-item,.hl-card,.why-card,.sec-block,.benefit,.sol-card,.pipeline-step,.p-card,.p-step,.feature-card,.feature-item,.related-card,.facc-item,.rights-card,.compliance-block-item,.uc-resolution-item) {
    position:relative;
    transform-origin:center;
    transition:scale .24s cubic-bezier(.2,.7,.2,1),translate .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s ease,border-color .24s ease,background-color .24s ease;
  }
  body.j3-page :is(.feat-card,.fcat-item,.hl-card,.why-card,.sec-block,.benefit,.sol-card,.pipeline-step,.p-card,.p-step,.feature-card,.feature-item,.related-card,.facc-item,.rights-card,.compliance-block-item,.uc-resolution-item):is(:hover,:focus-within) {
    scale:1.025;
    translate:0 -4px;
    z-index:2;
    border-color:color-mix(in srgb,var(--j3-accent) 45%,var(--j3-line));
  }
  body.j3-page :is(.hl-card,.why-card,.sec-block,.benefit,.sol-card,.p-card,.feature-card,.related-card,.rights-card):is(:hover,:focus-within) {
    box-shadow:0 12px 28px -14px color-mix(in srgb,var(--j3-ink) 22%,transparent);
  }
}

/* Flat editorial rows need a surface gutter when they lift. Negative margins
   preserve their original text alignment and available reading width. */
@media (min-width:761px) and (hover:hover) and (pointer:fine) {
  body.j3-page .j3-section .why-cards > .why-card {
    padding-inline:16px;
    margin-inline:-16px;
    overflow:visible;
  }
  body.j3-page .j3-highlights > .hl-card {
    padding-left:12px;
    margin-left:-12px;
    overflow:visible;
  }
  body.j3-page #results .results-stack .benefits-grid > .benefit {
    padding-inline:8px;
    padding-bottom:12px;
    margin-inline:-8px;
    margin-bottom:-12px;
    overflow:visible;
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* The pipeline clips its own raised first/last steps unless this is explicit. */
  body.j3-page .j3-functional .pipeline-steps {overflow:visible;}
  body.j3-page :is(.why-card,.hl-card,.benefit):is(:hover,:focus-within) {
    border-radius:12px;
  }
  body.j3-page :is(.hl-card,.benefit):is(:hover,:focus-within) {
    scale:1.015;
  }
}

/* contrast.css */
/* Keep text/background pairs together, including legacy functional islands. */
:root {--j3-accent-text:var(--j3-accent);--j3-positive-text:#373067;--j3-negative-text:#aa3737;--j3-muted:#56566b;}
html[data-theme=dark] {--j3-accent-text:#ff6b35;--j3-positive-text:#aca6d4;--j3-negative-text:#ffa7a7;}

/* Menus must resolve their colors again when the theme changes. */
body #nav.j3-header .j3-nav-panel a,
body .j3-menu-drawer .j3-mobile-groups a {color:var(--j3-ink);transition:none;}
body #nav.j3-header .j3-nav-panel a:is(:hover,:focus-visible,[aria-current=page]),
body .j3-menu-drawer .j3-mobile-groups a:is(:hover,:focus-visible,[aria-current=page]) {color:var(--j3-accent-text);background:var(--j3-sage);}
body #nav.j3-header .nav-dl.j3-download {background:var(--j3-brand);border-color:var(--j3-brand);color:#fff;}
body #nav.j3-header .nav-dl.j3-download:hover {background:#ff5722;border-color:#ff5722;}
body #nav.j3-header .nav-dl.j3-download :is(span,svg) {color:#fff;}
body #jl-footer .j3-motion-toggle {color:#bdbdcd;}

/* CTA bands stay dark in either theme; their cards need the same local palette. */
body.j3-page .j3-section-cta {
  --j3-white:#1c1c30;--j3-ink:#f8f7fc;--j3-muted:#c8c6d6;
  --j3-line:#4e496d;--j3-accent-text:var(--j3-accent);
}
body.j3-page .j3-section-cta .cta-step {color:var(--j3-ink);background:var(--j3-white);}
body.j3-page .j3-section-cta .cta-step-text {color:var(--j3-muted);}
body.j3-page .j3-section-cta .cta-step-text strong {color:var(--j3-ink);}

/* Orange text has a deeper shade on paper; filled orange buttons retain white text. */
body.j3-page :is(.sol-card-tag,.ann-k,.rc-kicker,.cal-footer strong,#compliance-label),
body.j3-page .dtab.is-on :is(.dtab-n,.dtab-p),
body.j3-page .dh--op .vmono {color:var(--j3-accent-text);}
html:not([data-theme=dark]) body.j3-page :is(.g,.grad) {color:var(--j3-accent);}
html body.j3-page .j3-section-cta :is(.g,.grad),
html:not([data-theme=dark]) body.j3-page .j3-section-cta :is(.g,.grad) {color:var(--j3-accent);}
body.j3-page #efficiency-leak :is(.j3-leak-solution-label,.uc-resolution-item span) {color:#4a4664;}
body.j3-page #esim-intro .prd-img .j3-product-note :is(.pb-card-lbl,.pb-meta-muted) {color:#494563;}
html:not([data-theme=dark]) body.j3-page #efficiency-leak .uc-card-stat {color:var(--j3-accent-text);}
body.j3-page .country-region {color:var(--j3-muted);}
html:not([data-theme=dark]) body .jlw-teaser-cta {color:#362f68;}

/* ROI: distinct readable labels on both pale panels and colored chart segments. */
body.j3-page .jl-cc-root {
  --jl-cc-ai-color:var(--j3-positive-text);--jl-cc-human-color:var(--j3-accent-text);
}
body.j3-page .jl-cc-prod-pct {color:var(--j3-positive-text);}
body.j3-page :is(.jl-cc-bar-productive,.jl-cc-bar-routine) {color:#08080f;}
body.j3-page .jl-cc-bar-routine {background:#c8895f;}
body.j3-page .jl-cc-tax-tag {color:#8f3e20;background:#ffe4db;}

/* Script-updated labels: keep IDs, values, backgrounds and interactions intact. */
html:not([data-theme=dark]) body.j3-page .prod-noise-badge {color:#594181;}
html:not([data-theme=dark]) body.j3-page .prod-stat--cost .prod-stat-n {color:var(--j3-negative-text);}
html:not([data-theme=dark]) body.j3-page :is(#lead-counter,.case-msg-tag--lead,.calc-cta-note) {color:#302a5c;}
/* The animated counter carries an inline color from the original page script. */
html:not([data-theme=dark]) body.j3-page #lead-counter {color:#302a5c!important;}
html:not([data-theme=dark]) body.j3-page .case-badge {color:#264f78;}
html:not([data-theme=dark]) body.j3-page .case-msg-tag--filter {color:var(--j3-negative-text);}
body.j3-page .prod-seg--faq .prod-seg-lbl,
body.j3-page .prod-seg--lead .prod-seg-lbl,
body.j3-page .prod-seg--book .prod-seg-lbl {color:#08080f;}
body.j3-page[data-j3-page="ai-lead-qualification"] .prod-seg--wrong .prod-seg-lbl {color:#08080f;}
body.j3-page:not(.pricing-page) :is(.calc-preset-btn.active,.calc-mod-price-val,.calc-total-val) {color:var(--j3-accent-text);}
body.j3-page:not(.pricing-page) .calc-usage-free {background:#2e2858;color:#fff;}
body.j3-page :is(.book-phone-kicker,.book-phone-sep) {color:var(--j3-muted);}
body.j3-page .prod-seg--spam {background:#bb3535;}
body.j3-page .prod-seg--spam .prod-seg-lbl,
body.j3-page .prod-seg--other .prod-seg-lbl,
body.j3-page[data-j3-page="ai-appointment-automation"] .prod-seg--faq .prod-seg-lbl {color:#fff;}
body.j3-page #filter-counter {color:var(--j3-negative-text)!important;}
html[data-theme=dark] body.j3-page :is(.prod-noise-badge,.case-msg-tag--filter) {color:var(--j3-negative-text);}
html[data-theme=dark] body.j3-page .case-msg-tag--lead {color:var(--j3-positive-text);}
body.j3-page:not(.pricing-page) .calc-preset-btn.active {color:var(--j3-accent-text);}
body.j3-page:not(.pricing-page) :is(.preset-popular-tag,.calc-module-badge) {color:#fff;background:var(--j3-accent);}
body.j3-page :is(.dv--jl b,.dh--jl b,.switch-num) {color:var(--j3-accent-text);}
body.j3-page .cta.cta-call {color:#fff;background:var(--j3-brand);}
body.j3-page .cta.cta-call:hover {background:#ff5722;}
body.j3-page :is(input,textarea)::placeholder {color:var(--j3-muted);opacity:1;}
/* Transient calculator notices also need a complete color pair. */
body.j3-page .calc-fly-badge.pos {background:#e8e7f0;color:#2e2858;}
body.j3-page .calc-fly-badge.neg {background:#fff0e3;color:#8f3e20;}

/* original-palette.css */
/* Product accents: sourced from the original content/pages.json.
   General pages use the approved brand orange-to-deep-orange gradient.
   Keep page identity, legacy widget aliases and heading gradients in one place. */
:root {
 --j3-ink:#0d0d1a;--j3-muted:#56566b;--j3-paper:#f5f5f7;
 --j3-white:#fff;--j3-sage:#eeeef2;--j3-line:#d9d9e2;--j3-peach:#ffd5c5;
 --j3-brand:#ff6b35;--j3-accent:#ff6b35;--j3-accent-text:#ff6b35;
 --j3-positive-text:#087f5b;--j3-negative-text:#dc2626;
}
html[data-theme=dark] {
 --j3-ink:#f8f7fc;--j3-muted:#bdbdcd;--j3-paper:#101018;
 --j3-white:#12121f;--j3-sage:#171727;--j3-line:#36364b;
 --j3-positive-text:#34d399;--j3-negative-text:#f87171;
}
body.j3-page {
 --j3-accent:#ff6b35;--j3-accent2:#e84e0f;
 --j3-source-orange:#ff6b35;--j3-source-pink:#e84e0f;
 --j3-source-purple:#e84e0f;--j3-source-green:#10b981;
 --j3-source-orange-rgb:255,107,53;--j3-source-pink-rgb:232,78,15;
 --j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:255,107,53;
 --j3-heading-start:var(--j3-accent);--j3-heading-end:var(--j3-accent2);
}
body.j3-page[data-j3-page="ai-messenger"] {--j3-accent:#8b5cf6;--j3-accent2:#ec4899;--j3-source-orange:#ff6b35;--j3-source-pink:#ec4899;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:255,107,53;--j3-source-pink-rgb:236,72,153;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:139,92,246;}
body.j3-page[data-j3-page="ai-business-telephony"] {--j3-accent:#06b6d4;--j3-accent2:#10b981;--j3-source-orange:#ff6b35;--j3-source-pink:#ec4899;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:255,107,53;--j3-source-pink-rgb:236,72,153;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:6,182,212;}
body.j3-page[data-j3-page="ai-crm"] {--j3-accent:#1d4ed8;--j3-accent2:#38bdf8;--j3-source-orange:#38bdf8;--j3-source-pink:#ec4899;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:56,189,248;--j3-source-pink-rgb:236,72,153;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:29,78,216;}
body.j3-page[data-j3-page="esim-fmc"] {--j3-accent:#10b981;--j3-accent2:#04786e;--j3-source-orange:#ff6b35;--j3-source-pink:#ec4899;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:255,107,53;--j3-source-pink-rgb:236,72,153;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:16,185,129;}
body.j3-page[data-j3-page="ai-lead-qualification"] {--j3-accent:#818cf8;--j3-accent2:#c4b5fd;--j3-source-orange:#818cf8;--j3-source-pink:#c4b5fd;--j3-source-purple:#c4b5fd;--j3-source-green:#10b981;--j3-source-orange-rgb:129,140,248;--j3-source-pink-rgb:196,181,253;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:129,140,248;}
body.j3-page[data-j3-page="ai-receptionist"] {--j3-accent:#3b82f6;--j3-accent2:#38bdf8;--j3-source-orange:#3b82f6;--j3-source-pink:#38bdf8;--j3-source-purple:#6366f1;--j3-source-green:#06b6d4;--j3-source-orange-rgb:59,130,246;--j3-source-pink-rgb:56,189,248;--j3-source-green-rgb:6,182,212;--j3-source-accent-rgb:59,130,246;}
body.j3-page[data-j3-page="ai-appointment-automation"] {--j3-accent:#0d9488;--j3-accent2:#06b6d4;--j3-source-orange:#0d9488;--j3-source-pink:#06b6d4;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:13,148,136;--j3-source-pink-rgb:6,182,212;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:13,148,136;}
body.j3-page[data-j3-page="ai-analytics"] {--j3-accent:#8b5cf6;--j3-accent2:#38bdf8;--j3-source-orange:#8b5cf6;--j3-source-pink:#38bdf8;--j3-source-purple:#6366f1;--j3-source-green:#06b6d4;--j3-source-orange-rgb:139,92,246;--j3-source-pink-rgb:56,189,248;--j3-source-green-rgb:6,182,212;--j3-source-accent-rgb:139,92,246;}
body.j3-page[data-j3-page="demo-barbershop"] {--j3-accent:#b8925a;--j3-accent2:#dcc5a0;--j3-source-orange:#b8925a;--j3-source-pink:#dcc5a0;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:184,146,90;--j3-source-pink-rgb:220,197,160;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:184,146,90;}
body.j3-page[data-j3-page="demo-real-estate"] {--j3-accent:#2fae84;--j3-accent2:#8fd9bd;--j3-source-orange:#2fae84;--j3-source-pink:#8fd9bd;--j3-source-purple:#8b5cf6;--j3-source-green:#10b981;--j3-source-orange-rgb:47,174,132;--j3-source-pink-rgb:143,217,189;--j3-source-green-rgb:16,185,129;--j3-source-accent-rgb:47,174,132;}

/* Resolve aliases locally: custom properties inherited from :root otherwise
   retain the wrong page's resolved values inside functional components. */
body.j3-page,body.j3-page .j3-functional {
 --j3-accent-text:var(--j3-accent);
 --orange:var(--j3-source-orange);--pink:var(--j3-source-pink);
 --purple:var(--j3-source-purple);--green:var(--j3-source-green);
 --cyan:#06b6d4;--blue:#3b82f6;--teal:#0d9488;--gold:#f59e0b;--red:#ef4444;
 --accent:var(--j3-accent);--accent2:var(--j3-accent2);
 --orange-rgb:var(--j3-source-orange-rgb);--pink-rgb:var(--j3-source-pink-rgb);
 --green-rgb:var(--j3-source-green-rgb);--accent-rgb:var(--j3-source-accent-rgb);
}
/* These gradients match the original page-specific heading treatments. */
body.j3-page[data-j3-page=ai-lead-qualification] {--j3-heading-start:#6366f1;--j3-heading-end:#7c3aed;}
body.j3-page[data-j3-page=ai-analytics] {--j3-heading-start:#7c3aed;--j3-heading-end:#38bdf8;}
html[data-theme=light] body.j3-page[data-j3-page=ai-analytics] {--j3-heading-start:#6d28d9;--j3-heading-end:#0ea5e9;}
body.j3-page[data-j3-page=ai-receptionist] {--j3-heading-start:#1d4ed8;--j3-heading-end:#38bdf8;}
html[data-theme=light] body.j3-page[data-j3-page=ai-receptionist] {--j3-heading-start:#1e40af;--j3-heading-end:#0ea5e9;}
html body.j3-page :is(.g,.grad,.grad-alt,.text-gradient),
html body.j3-page .j3-section-cta :is(.g,.grad),
html:not([data-theme=dark]) body.j3-page .j3-section-cta :is(.g,.grad),
html body.j3-page[data-j3-page=pricing] h1 span {
 color:var(--j3-accent);
 background-image:linear-gradient(135deg,var(--j3-heading-start),var(--j3-heading-end));
 background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
html body.j3-page :is(.case-dept,.p-big,.card-heading .eyebrow,.step-number) {color:var(--j3-accent);}
html body.j3-page .j3-section-cta {
 --j3-white:#1c1c30;--j3-paper:#0d0d1a;--j3-ink:#f8f7fc;
 --j3-muted:#c4c4d5;--j3-line:#414159;--j3-accent-text:var(--j3-accent);
}
body.j3-page :is(.jl-cc-ai-title,.jl-cc-highlight-title) {color:var(--j3-positive-text);}
/* Download remains the brand orange on every page, in both modes. */
body #nav.j3-header .nav-dl.j3-download,
body.j3-page .cta.cta-call {background:var(--j3-brand);border-color:var(--j3-brand);color:#fff;}
body #nav.j3-header .nav-dl.j3-download:hover,
body.j3-page .cta.cta-call:hover {background:#ff5722;border-color:#ff5722;}
body.j3-page .j3-section-cta :is(.cta-stat-n,.cta-step-n,.cta-step-num,.cta-stat-icon) {color:var(--j3-accent);}
body.j3-page .j3-section-cta :is(.btn-main,.btn-primary,.btn-submit) {background:var(--j3-brand);color:#fff;}
body.j3-page #jl-footer {--orange:var(--j3-brand);}
body.j3-page #jl-footer :is(.jlf-links a,.jlf-col a.jlf-on):hover {color:var(--j3-brand);}
body.j3-page #efficiency-leak :is(.uc-resolution-label,.j3-unified-promise::before) {color:var(--j3-brand);}
body.j3-page #efficiency-leak .uc-resolution::before {background:var(--j3-brand);}
body.j3-page .jl-cc-bar-routine {background:var(--j3-brand);}
body.j3-page .jl-cc-bar-productive {background:#10b981;}
body.j3-page :is(.preset-popular-tag,.calc-module-badge) {background:var(--j3-accent);}
body.j3-page .pricing-page .calc-module-badge {background:var(--j3-white);}

/* Dark illustration surrounds use the same surfaces as their SVG scenes. */
html[data-theme=dark] body.j3-page .j3-home-feature-story#messenger .prd-img .img-ph-clip{background:#231c34}
html[data-theme=dark] body.j3-page #esim-intro .prd-img{background:#1a1b2c;color:var(--j3-ink)}
html[data-theme=dark] body.j3-page #esim-intro .prd-img .j3-product-note{color:var(--j3-ink);border-color:#3a3e56}
html[data-theme=dark] body.j3-page #esim-intro .prd-img .j3-product-note :is(strong,.pb-card-val,[data-i18n]){color:var(--j3-ink)}
html[data-theme=dark] body.j3-page #esim-intro .prd-img .j3-product-note :is(.pb-card-lbl,.pb-meta-muted){color:#c0c6d8}
html[data-theme=dark] body.j3-page :is(#esim-intro,#telephony) .prd-img{--j3-ink:#f8f7fc;--j3-muted:#c0c6d8;--j3-line:#3a3e56}
html[data-theme=dark] body.j3-page #telephony .prd-img{background:#1c2031}
html[data-theme=dark] body.j3-page :is(.results-media-card,.j3-post-card__media){background:#1c1d32;color:#f8f7fc}

/* Illustration frames stand on their own: no external blobs or blurred glows. */
body.j3-page :is(.j3-hero-art,.img-ph,.hero-img-wrap,.fcat-img)::before{content:none;display:none}
body.j3-page .number-art::after{content:none;display:none}
/* Resolution cards belong to the active theme, including their own text colors. */
html[data-theme=dark] body.j3-page #efficiency-leak .j3-leak-solution{background:none;border-color:var(--j3-line)}
html[data-theme=dark] body.j3-page #efficiency-leak .j3-leak-solution-label{color:var(--j3-accent-text)}
html[data-theme=dark] body.j3-page #efficiency-leak .uc-resolution-item strong{color:var(--j3-ink)}
html[data-theme=dark] body.j3-page #efficiency-leak .uc-resolution-item span{color:var(--j3-muted)}
html[data-theme=dark] body.j3-page #efficiency-leak .j3-leak-scene img{background:#1c1c30}
html[data-theme=dark] body.j3-page .results-media-card{background:#1c1d32!important;border-color:var(--j3-line)!important}

/* artwork-open.css */
/* Artwork is part of the page, without a second panel or clipping frame. */
body.j3-page :is(.j3-hero-art,.j3-feature-art,.prd-img,.fcat-img,.img-ph,.img-ph-clip,.results-showcase,.j3-leak-scene):has(img[src*="/illustrations/"]){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
body.j3-page img[src*="/illustrations/"]{background:transparent!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important}
body.j3-page :is(.j3-hero-art,.j3-feature-art,.prd-img,.fcat-img,.img-ph,.img-ph-clip):has(img[src*="/illustrations/"])::before,
body.j3-page :is(.j3-hero-art,.j3-feature-art,.prd-img,.fcat-img,.img-ph,.img-ph-clip):has(img[src*="/illustrations/"])::after{content:none!important}
body.j3-page[data-j3-page="home-page"] #esim-intro .prd-img{max-width:560px}
body.j3-page[data-j3-page="home-page"] #esim-intro .prd-img img{max-height:none}

/* Balance adjacent content and artwork without stretching or clipping the scenes. */
body.j3-page .results-media-card:has(img[src*="/illustrations/"]){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
body.j3-page .results-media-card img[src*="/illustrations/"]{display:block;height:auto;max-height:none}
@media(min-width:1201px){
  body.j3-page .j3-feature-story:not(.j3-home-feature-story):not([data-feature-count="4"]) .j3-feature-index{row-gap:20px}
  body.j3-page .j3-feature-story:not(.j3-home-feature-story):not([data-feature-count="4"]) .j3-feature-index > .fcat-item{padding-top:14px}
  body.j3-page .j3-feature-story:not(.j3-home-feature-story):not([data-feature-count="4"]) .j3-feature-index > .fcat-item::before{margin-bottom:8px}
  body.j3-page .j3-feature-story:not(.j3-home-feature-story):not([data-feature-count="4"]) .j3-feature-index .fcat-item-title{margin-bottom:8px}
  body.j3-page .j3-feature-story:not(.j3-home-feature-story):not([data-feature-count="4"]) .j3-feature-index .fcat-item-desc{line-height:1.65}
  body.j3-page .j3-feature-story:not(.j3-home-feature-story) .j3-section-frame > .fcat-img{width:calc(100% + clamp(16px,calc((100vw - 1100px)*.18),56px));max-width:660px}
  body.j3-page .j3-feature-story[data-feature-count="4"] .j3-section-frame > .fcat-img{width:100%;max-width:520px}
  body.j3-page #results .results-media-col{max-width:440px}
  body.j3-page[data-j3-page="home-page"] #esim-intro .j3-detail-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  body.j3-page[data-j3-page="home-page"] #esim-intro .prd-img{max-width:none;width:100%}
  body.j3-page[data-j3-page="investors"] .j3-hero-art{width:calc(100% + 40px);max-width:none;justify-self:center}
}
/* Stack before either column becomes too narrow; keep the artwork at a useful size. */
@media(min-width:761px) and (max-width:1200px){
  body.j3-page .j3-feature-story > .j3-section-frame{grid-template-columns:1fr;gap:32px}
  body.j3-page .j3-feature-story .j3-section-frame > :is(.fcat-img,.prd-img){grid-column:1;grid-row:2;max-width:640px;width:100%}
  body.j3-page .j3-feature-story .j3-section-content{grid-column:1;grid-row:3}
}

/* Final collection: size the visible drawing, not its former 800x590 gallery canvas. */
body.j3-page[data-j3-page] #hero.j3-hero .j3-hero-art img{height:auto;max-height:none}
@media(min-width:1201px){
 body.j3-page .j3-feature-story .j3-section-frame > :is(.fcat-img,.prd-img){width:calc(100% + 48px);max-width:680px;align-self:center}
 body.j3-page .j3-feature-story[data-feature-count="4"] .j3-section-frame > .fcat-img{width:100%;max-width:560px}
 body.j3-page:is([data-j3-page="ai-analytics"],[data-j3-page="ai-receptionist"],[data-j3-page="ai-lead-qualification"],[data-j3-page="ai-appointment-automation"]) #results > .j3-section-frame{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
 body.j3-page #results .results-media-col{width:100%;max-width:none}
 body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{width:calc(100% + 32px);max-width:none;justify-self:center}
 body.j3-page[data-j3-page="home-page"] #esim-intro .prd-img{width:calc(100% + 32px);max-width:660px;justify-self:center}
}
@media(min-width:761px) and (max-width:1200px){
 body.j3-page #results:has(.results-showcase) > .j3-section-frame{grid-template-columns:1fr;gap:32px}
 body.j3-page #results .results-media-col{grid-column:1;grid-row:2;width:100%;max-width:640px}
 body.j3-page #results .results-stack{grid-column:1;grid-row:3}
 body.j3-page #results:has(.results-showcase) .metrics-grid{grid-row:4}
}
/* Product and AI hero art supports the heading at a restrained, natural scale. */
body.j3-page:is([data-j3-page="ai-business-telephony"],[data-j3-page="ai-messenger"],[data-j3-page="ai-crm"],[data-j3-page="esim-fmc"],[data-j3-page="ai-analytics"],[data-j3-page="ai-appointment-automation"],[data-j3-page="ai-lead-qualification"],[data-j3-page="ai-receptionist"],[data-j3-page="ai-receptionist-comparison"]) #hero.j3-hero .j3-hero-art{width:100%;max-width:720px;margin-inline:auto}
@media(max-width:600px){
 body.j3-page:is([data-j3-page="ai-business-telephony"],[data-j3-page="ai-messenger"],[data-j3-page="ai-crm"],[data-j3-page="esim-fmc"],[data-j3-page="ai-analytics"],[data-j3-page="ai-appointment-automation"],[data-j3-page="ai-lead-qualification"],[data-j3-page="ai-receptionist"],[data-j3-page="ai-receptionist-comparison"]) #hero.j3-hero .j3-hero-art{max-width:280px}
}

/* Adjacent copy determines the drawing height; the SVG scales uniformly inside it. */
body.j3-page img.j3-context-fitted[src*="/illustrations/"]{height:var(--j3-context-height)!important;max-height:none!important;width:100%!important;object-fit:contain!important;object-position:center!important}
body.j3-page .j3-about-hero{min-height:0}

/* illustrations-live.css */
/* The image keeps its original size, responsive picture and accessible description. */
.j3-live-anchor{position:relative!important}
picture.j3-live-anchor{display:block}
.j3-live-scene{display:block!important;position:absolute!important;pointer-events:none!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important;max-width:none!important;max-height:none!important;overflow:visible!important;line-height:0!important;z-index:1}
img.j3-live-image{opacity:0!important}
@media print{.j3-live-scene{display:none!important}img.j3-live-image{opacity:1!important}}

/* responsive-fixes.css */
/* Responsive fixes (audit 2026-09-18). Loaded last, after artwork-open / illustrations-live. */

/* 1. Home hero on phones: the illustration keeps its natural height. Earlier
   rules capped .j3-hero-art at max(220px, 100svh - 470px) while the <img>
   inside kept its aspect-ratio height, so on 568-740px tall phones the
   picture spilled over "Start with one module..." and the fact tiles. */
@media(max-width:900px){
 body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:none;display:block}
 body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art :is(picture,img,svg){max-height:none;width:100%;height:auto}
}

/* 2. Home "Telephony" story on phones: illustration goes to row 2 under the
   heading (composition-finish.css forced grid-row:1, which is the heading row
   in the .j3-feature-story grid, so the phone artwork covered the title). */
@media(max-width:760px){
 .j3-page[data-j3-page="home-page"] #telephony .j3-section-frame > .prd-img{grid-row:2}
}

/* 3. Home hero fact tiles (3 columns) on narrow phones: smaller value type so
   "AI Active" / "AI активний" wraps inside its 88px cell instead of overflowing. */
@media(max-width:400px){
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note{padding:4px 6px}
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note :is(strong,div>span:first-child),
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note > span:not(.pb-meta-muted){font-size:16px}
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note :is(span,strong,div){overflow-wrap:anywhere;min-width:0}
}

/* 4. Final CTA stats: columns may shrink below their min-content width, long
   single words ("Безкоштовно") wrap instead of pushing the page wider. */
@media(max-width:760px){
 .j3-page .j3-section-cta .cta-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .j3-page .cta-stat{min-width:0}
 .j3-page .cta-stat :is(.cta-stat-n,.cta-stat-l,.cta-stat-d){overflow-wrap:break-word}
}
@media(max-width:480px){
 .j3-page .cta-stat .cta-stat-n{font-size:clamp(18px,5.5vw,30px)}
}

/* 7. Inline brand mark in the header: ring = page accent, wordmark = header ink. */
body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{display:block;width:150px;height:36px;color:var(--j3-ink);filter:none!important}
@media(max-width:760px){body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{width:135px;height:36px}}
@media(max-width:360px){body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{width:99px;height:28.8px}}

/* 8. AI landing hero console: chat bubbles sit inside #hs-tr, a plain block that
   swallowed the column's grid gap, so consecutive messages touched. Margin-based
   rhythm works even if the wrapper is re-rendered by hero-scenes.js. */
body.j3-page #hero.hs .hs-c #hs-tr{display:grid;gap:0;min-width:0}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr{max-width:86%;margin:0}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr + .hs-tr{margin-top:14px}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr.c{justify-self:start}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr.a{justify-self:end}

/* 9. Legacy scroll-progress line (#scroll-progress / #sp) from the old page builds.
   It is position:fixed at a hard-coded offset, so with the WP admin bar or any
   header height change it cuts through the logo. Removed everywhere. */
body.j3-page #scroll-progress,body.j3-page #sp,#scroll-progress,#sp{display:none!important}

/* buy-a-ukrainian-phone-number: the standalone page has no hero padding for the fixed shared header */
body.j3-page[data-j3-page="buy-a-ukrainian-phone-number"] main#main-content{padding-top:112px}
@media (max-width:1080px){body.j3-page[data-j3-page="buy-a-ukrainian-phone-number"] main#main-content{padding-top:88px}}