/* JMS 2D overview: a stylised product page. All classes are prefixed j2- so
   nothing here collides with Bootstrap or joinerysoft.css. Light theme only,
   to match the rest of the site. */
.j2{
  --j2-bg:#ffffff; --j2-bg-dark:#0b0b0d; --j2-text:#1d1d1f; --j2-text-2:#6e6e73;
  --j2-on-dark:#f5f5f7; --j2-on-dark-2:#a1a1a6; --j2-rule:#e8e8ed;
  --j2-purple:#77216c; --j2-purple-link:#6e1f64; --j2-line:#b8b8bf;
  color:var(--j2-text);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;
}
.j2 *{box-sizing:border-box}
.j2 a{color:var(--j2-purple-link);text-decoration:none}.j2 a:hover{text-decoration:underline}
.j2 h1,.j2 h2,.j2 h3{margin:0;letter-spacing:-.02em;text-wrap:balance;color:inherit;font-size:inherit;line-height:inherit;text-transform:none}
/* joinerysoft.css sets heading weights with !important, so these must too */
.j2 h1,.j2 h2{font-weight:700!important}
.j2 h3{font-weight:600!important}
.j2 .j2-big h3{font-weight:700!important}
.j2 h3.j2-more{margin-top:clamp(56px,8vw,104px);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2}
/* same widths and gutters as Bootstrap's .container, so the page's left edge
   lines up with the site header's logo */
.j2-wrap{width:100%;padding-inline:12px;margin-inline:auto}
@media (min-width:576px){.j2-wrap{max-width:540px}}
@media (min-width:768px){.j2-wrap{max-width:720px}}
@media (min-width:992px){.j2-wrap{max-width:960px}}
@media (min-width:1200px){.j2-wrap{max-width:1140px}}
@media (min-width:1400px){.j2-wrap{max-width:1320px}}
.j2-narrow{width:min(760px,100% - 44px);margin-inline:auto}

/* section nav: sits under the site's sticky header */
.j2-lnav{position:sticky;top:var(--j2-nav-h,0px);z-index:20;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--j2-rule);font-size:17px}
.j2-lnav .j2-wrap{display:flex;align-items:center;min-height:52px;gap:2rem}
.j2-lnav .j2-name{font-size:1.25rem;font-weight:600;color:var(--j2-text)}
.j2-lnav nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto;font-size:.8rem}
.j2-lnav nav a{color:var(--j2-text)}.j2-lnav nav a:hover{text-decoration:none;color:var(--j2-purple-link)}
.j2-pill{display:inline-block;background:var(--j2-purple);color:#fff!important;border-radius:999px;padding:.35rem .9rem;font-size:.8rem;font-weight:500}
.j2-pill:hover{text-decoration:none!important;filter:brightness(1.1)}

/* scenes */
.j2-scene{padding-block:clamp(72px,10vw,140px);background:var(--j2-bg)}
.j2-scene.j2-dark{background:var(--j2-bg-dark);color:var(--j2-on-dark)}
.j2-scene.j2-dark .j2-sub,.j2-scene.j2-dark .j2-cap{color:var(--j2-on-dark-2)}
.j2-scene.j2-tint{background:#f5f5f7}
.j2-scene h2{font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.05;font-weight:700}
.j2-sub{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.35;color:var(--j2-text-2);font-weight:400;margin:1.1rem 0 0;max-width:34ch}
.j2-center{text-align:center}.j2-center .j2-sub{margin-inline:auto}
.j2-cap{font-size:.85rem;color:var(--j2-text-2);margin:1rem 0 0}
.j2-media{margin-top:clamp(36px,5vw,64px)}

/* hero: the laptop photo is the scene; copy sits over its dark left third */
.j2-hero{position:relative;overflow:hidden;background:#07050c;color:#f5f5f7;min-height:clamp(560px,86vh,920px);display:grid;align-items:center}
.j2-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%;will-change:transform}
.j2-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,12,.92) 0%,rgba(7,5,12,.72) 30%,rgba(7,5,12,.15) 52%,transparent 66%),linear-gradient(180deg,rgba(7,5,12,.5) 0%,transparent 22%)}
.j2-hero-copy{position:relative;z-index:1;padding-block:clamp(48px,8vh,96px)}
.j2-hero .j2-name{font-size:1.15rem;font-weight:600;margin-bottom:.8rem;color:#c983bf}
.j2-hero h1{font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:.98;font-weight:700;color:#fff;max-width:11ch;margin:0}
.j2-hero .j2-sub{margin:1.3rem 0 1.6rem;color:#c9c9ce;max-width:30ch;font-size:clamp(1.05rem,1.4vw,1.3rem)}
.j2-links{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:1.05rem;font-weight:500}
.j2-links a{color:#d69ccd}.j2-links a::after{content:" \203A"}
@media (prefers-reduced-motion:no-preference){
  .j2-rise{opacity:0;transform:translateY(22px);animation:j2-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .j2-r1{animation-delay:.05s}.j2-r2{animation-delay:.15s}.j2-r3{animation-delay:.3s}
  .j2-hero-photo{opacity:0;transform:scale(1.04);animation:j2-settle 1.6s cubic-bezier(.2,.7,.2,1) .2s forwards}
  @keyframes j2-rise{to{opacity:1;transform:none}}
  @keyframes j2-settle{to{opacity:1;transform:scale(1)}}
}
@media (max-width:900px){
  .j2-hero{min-height:0;display:block}
  .j2-hero-photo{position:relative;height:auto;aspect-ratio:16/9;object-position:50% 50%;display:block}
  .j2-hero-shade{display:none}
  .j2-hero-copy{padding-block:40px 28px;text-align:center}
  .j2-hero h1{max-width:none}
  .j2-hero .j2-sub{margin-inline:auto}
  .j2-links{justify-content:center}
}

/* screen-recording clip in a quiet dark bezel */
.j2-clip{background:#1c1c20;border:1px solid #2c2c31;border-radius:18px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.j2-clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:#000}

/* printouts: five real pages from one job, fanned; the quotation in front */
.j2-docs{position:relative;height:clamp(420px,52vw,640px);max-width:1100px;margin-inline:auto}
.j2-doc{position:absolute;margin:0;width:31%;bottom:0;left:50%;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.j2-doc img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.22);background:#fff}
.j2-doc figcaption{position:absolute;left:0;right:0;bottom:-2.2rem;font-size:.8rem;color:var(--j2-text-2);opacity:0;transition:opacity .3s;text-align:center}
.j2-docs:hover .j2-doc figcaption{opacity:1}
.j2-d1{transform:translateX(-50%) translate(-118%,-6%) rotate(-9deg);z-index:1}
.j2-d2{transform:translateX(-50%) translate(-62%,-2%) rotate(-4deg);z-index:2}
.j2-d3{transform:translateX(-50%) translate(62%,-2%) rotate(4deg);z-index:2}
.j2-d4{transform:translateX(-50%) translate(118%,-6%) rotate(9deg);z-index:1}
.j2-d5{transform:translateX(-50%) translate(0,0) rotate(0deg);z-index:3;width:34%}
.j2-docs:hover .j2-d1{transform:translateX(-50%) translate(-132%,-10%) rotate(-11deg)}
.j2-docs:hover .j2-d2{transform:translateX(-50%) translate(-70%,-4%) rotate(-5deg)}
.j2-docs:hover .j2-d3{transform:translateX(-50%) translate(70%,-4%) rotate(5deg)}
.j2-docs:hover .j2-d4{transform:translateX(-50%) translate(132%,-10%) rotate(11deg)}
.j2-docs:hover .j2-d5{transform:translateX(-50%) translate(0,-3%)}
@media (max-width:700px){.j2-docs,a.j2-docs{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}.j2-doc{position:static;width:auto;transform:none!important}.j2-doc figcaption{position:static;opacity:1;margin-top:.4rem}.j2-d5{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.j2-doc{transition:none}}

/* the printouts link: an outlined pill, the quiet sibling of "Book a demo" */
.j2-dl{margin:1.6rem 0 0;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.j2-pill-outline{display:inline-flex;align-items:center;gap:.55rem;border:1.5px solid var(--j2-purple);color:var(--j2-purple);border-radius:999px;padding:.7rem 1.4rem;font-size:1rem;font-weight:600;line-height:1;transition:background .15s,color .15s}
.j2-pill-outline svg{width:18px;height:18px}
.j2-pill-outline:hover{background:var(--j2-purple);color:#fff;text-decoration:none}
.j2-dl>span{color:var(--j2-text-2);font-size:.85rem}
a.j2-docs{display:block;color:inherit;text-decoration:none}
a.j2-docs:hover{text-decoration:none}

/* five-minute video: poster with a play button, iframe only on click */
.j2-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.j2-video img,.j2-video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.j2-video button{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));border:0;cursor:pointer;display:grid;place-items:center;color:#fff;font:inherit}
.j2-video button span{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;transition:transform .2s}
.j2-video button:hover span{transform:scale(1.06)}
.j2-video button svg{width:30px;height:30px;margin-left:5px}

/* modules gallery: full-width white cards on a tinted band, next card peeking,
   native scroll-snap so it swipes on a phone; dots and play/pause below */
.j2-gal-scene{padding-bottom:clamp(56px,7vw,96px)}
.j2-gal-head{text-align:center}
.j2-gal-head .j2-sub{margin-inline:auto}
.j2-gal{--cw:min(1320px,100vw - 120px);--gap:20px;margin-top:clamp(36px,5vw,64px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.j2-gal::-webkit-scrollbar{display:none}
.j2-gal:focus-visible{box-shadow:inset 0 0 0 3px rgba(118,35,109,.35)}
.j2-gal-track{display:flex;gap:var(--gap);list-style:none;margin:0;padding:0 calc((100% - var(--cw))/2)}
.j2-card{flex:0 0 var(--cw);scroll-snap-align:center;background:#fff;border-radius:28px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) clamp(24px,3vw,40px);display:grid;grid-template-rows:auto auto auto 1fr auto;justify-items:center;text-align:center;min-height:clamp(480px,52vw,640px);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.j2-card-name{margin:0 0 .4rem;color:var(--j2-purple);font-weight:600;font-size:.95rem}
.j2-card h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.j2-card-sub{margin:.7rem 0 0;color:var(--j2-text-2);font-size:clamp(1rem,1.3vw,1.15rem);max-width:46ch;line-height:1.4}
.j2-card-fig{width:100%;height:clamp(260px,34vw,412px);display:flex;align-items:center;justify-content:center;padding:clamp(20px,3vw,36px) 0}
.j2-card-fig img{max-width:min(100%,560px);max-height:100%;width:auto;height:auto;object-fit:contain}
.j2-card-link{font-size:.95rem;font-weight:500}
.j2-card-link::after{content:" \203A"}
.j2-gal-ctl{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:28px}
.j2-gal-dots{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.06);border-radius:999px;padding:10px 14px;height:44px}
.j2-gal-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(0,0,0,.3);cursor:pointer;transition:width .3s,background .2s}
.j2-gal-dots button[aria-selected="true"]{width:44px;background:rgba(0,0,0,.5)}
.j2-gal-play{width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:#1d1d1f;cursor:pointer;display:grid;place-items:center;padding:0}
.j2-gal-play svg{width:18px;height:18px}
.j2-gal-play[data-state="playing"] .j2-ic-play,.j2-gal-play[data-state="paused"] .j2-ic-pause{display:none}
.j2-gal-play:hover,.j2-gal-dots button:hover{filter:brightness(.9)}
@media (max-width:900px){.j2-gal{--cw:min(86vw,560px)}.j2-card{border-radius:22px;min-height:0}}

/* modules: plain grid, no cards (kept for reuse) */
.j2-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;margin-top:clamp(40px,5vw,64px)}
.j2-mods figure{margin:0;text-align:center}
.j2-mods .j2-fig{height:230px;display:flex;align-items:center;justify-content:center;padding:10px}
.j2-mods img{max-height:100%;max-width:100%;object-fit:contain}
.j2-mods figcaption{margin-top:.8rem;font-weight:600;font-size:1.05rem}
.j2-mods figcaption span{display:block;font-weight:400;color:var(--j2-text-2);font-size:.9rem}
.j2-mods figcaption a{color:inherit}

/* five selling points: one big statement per row */
.j2-big{margin-top:clamp(40px,5vw,64px);text-align:left}
.j2-big>div{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem 4rem;padding:2.2rem 0;border-top:1px solid rgba(29,29,31,.22);align-items:center}
.j2-big>div:last-child{border-bottom:1px solid rgba(29,29,31,.22)}
.j2-big h3{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.025em;font-weight:700}
.j2-big p{margin:0;font-size:1.05rem;line-height:1.45;color:var(--j2-text-2)}
.j2-num{display:block;font-size:.75rem;color:var(--j2-purple);font-weight:600;letter-spacing:.04em;margin-bottom:.7rem}
.j2-more{margin-top:clamp(56px,8vw,104px);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.02em}
@media (max-width:760px){.j2-big{text-align:center}.j2-big>div{grid-template-columns:1fr;gap:.8rem;padding:2rem 0}.j2-big h3{font-size:1.45rem;line-height:1.15}.j2-big p{font-size:1rem}.j2-num{margin-bottom:.45rem}.j2-big p{max-width:34ch;margin-inline:auto}}

/* scroll reveal: rows start dimmed and wake up as they reach the middle of the
   screen. Only active when JS adds .j2-reveal, so the page reads fine without it,
   and nothing changes size, so the scroll never jumps. */
.j2-reveal .j2-big>div{transition:opacity .5s ease}
.j2-reveal .j2-big>div:not(.is-open){opacity:.28}
.j2-reveal .j2-big p,.j2-reveal .j2-big .j2-num{transition:opacity .6s ease .1s,transform .6s cubic-bezier(.2,.7,.2,1) .1s}
.j2-reveal .j2-big>div:not(.is-open) p{opacity:0;transform:translateY(14px)}
.j2-reveal .j2-big>div:not(.is-open) .j2-num{opacity:0}
.j2-reveal .j2-feats>div{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.j2-reveal .j2-feats>div:not(.is-open){opacity:0;transform:translateY(18px)}
.j2-reveal .j2-feats>div:nth-child(3n+2){transition-delay:.08s}
.j2-reveal .j2-feats>div:nth-child(3n+3){transition-delay:.16s}
.j2-reveal .j2-cols>div{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.j2-reveal .j2-cols>div:not(.is-open){opacity:0;transform:translateY(18px)}
.j2-reveal .j2-cols>div:nth-child(2){transition-delay:.08s}
.j2-reveal .j2-cols>div:nth-child(3){transition-delay:.16s}

/* the rest of the features: rules, not cards */
.j2-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 3rem;margin-top:clamp(28px,3vw,40px);text-align:left}
.j2-feats>div{border-top:1px solid rgba(29,29,31,.22);padding-top:1.1rem}
.j2-feats h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .35rem}
.j2-feats p{margin:0;color:var(--j2-text-2);font-size:.95rem;line-height:1.45}

/* three plain columns */
.j2-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin-top:clamp(36px,5vw,64px)}
.j2-cols h3{font-size:1.25rem;margin-bottom:.5rem}
.j2-cols p{color:var(--j2-text-2);margin:0;font-size:1rem}

/* testimonial and demo */
.j2-testi blockquote{margin:0;padding:0;border:0;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.j2-testi figcaption{margin-top:1.4rem;color:var(--j2-text-2)}
.j2-demo .j2-btn{display:inline-block;background:#fff;color:#000;border-radius:999px;padding:.9rem 1.6rem;font-weight:600;margin-top:1.6rem}
.j2-demo .j2-btn:hover{text-decoration:none;filter:brightness(.92)}
.j2-demo .j2-contact{margin:1.4rem 0 0;color:var(--j2-on-dark-2);font-size:.95rem}
.j2-demo .j2-contact a{color:var(--j2-on-dark);font-weight:500}

@media (max-width:900px){.j2-mods,.j2-cols,.j2-feats{grid-template-columns:1fr 1fr}.j2-lnav nav a:not(.j2-pill){display:none}}
@media (max-width:560px){.j2-mods,.j2-cols,.j2-feats{grid-template-columns:1fr}.j2-mods .j2-fig{height:170px}.j2-mods{gap:2rem}.j2-feats,.j2-cols{text-align:center}.j2-feats p,.j2-cols p{max-width:36ch;margin-inline:auto}}

/* tech specs */
.j2-specs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px)}
.j2-spec{background:#fff;border-radius:22px;padding:clamp(22px,3vw,36px)}
.j2-spec h3{font-size:1.2rem;margin-bottom:1rem}
.j2-spec dl{margin:0;display:grid;grid-template-columns:minmax(120px,.7fr) 1.6fr;gap:0 1.2rem}
.j2-spec dt,.j2-spec dd{margin:0;padding:.7rem 0;border-top:1px solid rgba(29,29,31,.12);font-size:.95rem}
.j2-spec dt{color:var(--j2-text-2)}
.j2-spec dd{color:var(--j2-text)}
.j2-spec-notes{max-width:76ch;margin:clamp(20px,3vw,32px) auto 0;text-align:center;color:var(--j2-text-2);font-size:.95rem;line-height:1.5}
.j2-spec-notes a::after{content:" \203A"}
@media (max-width:760px){.j2-specs{grid-template-columns:1fr}.j2-spec dl{grid-template-columns:1fr}.j2-spec dt{padding-bottom:.1rem}.j2-spec dd{border-top:0;padding-top:0}}

/* anchored sections stop below the two sticky bars */
.j2 [id],section.j2[id]{scroll-margin-top:calc(var(--j2-nav-h,0px) + 53px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* BWF shortlisting badge in a hero */
.j2-shortlist{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;padding:.55rem .95rem .55rem .55rem;border:1px solid rgba(29,29,31,.14);border-radius:999px;background:#fff;color:var(--j2-text);font-size:.85rem;line-height:1.25;text-align:left}
.j2-shortlist:hover{text-decoration:none;border-color:var(--j2-purple)}
.j2-shortlist img{width:34px;height:34px;border-radius:50%;background:#fff}
.j2-shortlist b{display:block;font-weight:600}
.j2-shortlist span{color:var(--j2-text-2)}
.j2-shortlist-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#f5f5f7}
.j2-shortlist-dark span{color:#a1a1a6}
.j2-shortlist-dark:hover{border-color:#c983bf}