/* JMS Cloud: light register on the shared j2 system, with a soft tinted hero */
.cl-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f5f0f4 0%,#fff 100%);color:#1d1d1f;padding:clamp(56px,8vh,96px) 0 0}
.cl-hero-copy{position:relative;z-index:2;text-align:center}
.cl-hero .j2-name{font-size:1.05rem;font-weight:600;color:var(--j2-purple);margin-bottom:.7rem}
.cl-hero h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:.98;font-weight:700!important;letter-spacing:-.03em;margin:0 auto;max-width:22ch}
.cl-hero .j2-sub{margin:1.2rem auto 1.5rem;max-width:40ch;font-size:clamp(1.05rem,1.5vw,1.35rem)}
.cl-hero .j2-links{justify-content:center}
.cl-hero-fig{position:relative;z-index:1;margin:clamp(28px,4vw,56px) auto 0;max-width:1100px;padding-inline:12px}
.cl-hero-fig img{display:block;width:100%;height:auto;border-radius:22px 22px 0 0;box-shadow:0 30px 80px rgba(60,20,55,.25)}
.cl-hero-fig .cl-devices{position:absolute;right:max(12px,4%);bottom:-6%;width:clamp(120px,18%,220px);border-radius:26px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:no-preference){.cl-hero-fig img{opacity:0;transform:translateY(30px);animation:j2-rise 1s cubic-bezier(.2,.7,.2,1) .35s forwards}}

/* the gap: three plain statements */
.cl-gaps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px)}
.cl-gaps>div{border-top:1px solid rgba(29,29,31,.18);padding-top:1rem}
.cl-gaps h3{font-size:1.15rem;margin-bottom:.4rem}
.cl-gaps p{margin:0;color:var(--j2-text-2);font-size:.95rem;line-height:1.45}
@media (max-width:700px){.cl-gaps{grid-template-columns:1fr}}

/* live diagram: desktop, cloud, bench */
.cl-diagram{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);align-items:center}
.cl-node{background:#fff;border:1px solid rgba(29,29,31,.1);border-radius:20px;padding:clamp(18px,2.4vw,28px);box-shadow:0 10px 30px rgba(0,0,0,.05)}
.cl-node h3{font-size:1.1rem;margin-bottom:.3rem}
.cl-node p{margin:0;color:var(--j2-text-2);font-size:.92rem}
.cl-node ul{margin:.8rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.cl-node li{font-size:.8rem;padding:.25rem .6rem;border-radius:999px;background:#f5f5f7;color:#1d1d1f}
.cl-cloud{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(150px,18vw,220px);aspect-ratio:1;border-radius:50%;background:var(--j2-purple);color:#fff;text-align:center;padding:1rem;position:relative}
.cl-cloud b{font-size:1.3rem;letter-spacing:-.02em}
.cl-cloud span{font-size:.8rem;opacity:.85;margin-top:.2rem}
.cl-cloud::before,.cl-cloud::after{content:"";position:absolute;top:50%;width:clamp(16px,3vw,40px);height:2px;background:rgba(119,33,108,.5)}
.cl-cloud::before{right:100%}.cl-cloud::after{left:100%}
.cl-sync{grid-column:1/-1;text-align:center;color:var(--j2-text-2);font-size:.9rem;margin-top:.4rem}
@media (max-width:820px){.cl-diagram{grid-template-columns:1fr;justify-items:center}.cl-node{width:100%}.cl-cloud::before,.cl-cloud::after{display:none}}

/* light two-ups reuse .jp-two with light colours */
.j2-cloud .jp-copy p{color:var(--j2-text-2)}
.j2-cloud .jp-copy .j2-kicker{color:var(--j2-purple)}
.j2-cloud .jp-fig img{filter:none;border-radius:14px;box-shadow:0 2px 4px rgba(0,0,0,.06),0 24px 60px rgba(0,0,0,.16)}
.j2-cloud .jp-fig.cl-phone img{max-height:min(560px,70vw);border-radius:32px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.j2-cloud .jp-quote blockquote{color:#1d1d1f}
.j2-cloud .jp-quote figcaption{color:var(--j2-text-2)}
.cl-pair{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(16px,3vw,40px);align-items:center;margin-top:clamp(36px,5vw,64px)}
@media (max-width:820px){.cl-pair{grid-template-columns:1fr}}

/* journey: enquiry to invoice */
.cl-journey{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem;margin-top:clamp(36px,5vw,64px);counter-reset:j}
.cl-journey>div{position:relative;background:#fff;border:1px solid rgba(29,29,31,.1);border-radius:16px;padding:1rem .9rem;min-height:120px}
.cl-journey>div::before{counter-increment:j;content:counter(j,decimal-leading-zero);display:block;color:var(--j2-purple);font-size:.72rem;font-weight:600;letter-spacing:.04em;margin-bottom:.4rem}
.cl-journey h3{font-size:.98rem;line-height:1.2;margin-bottom:.3rem}
.cl-journey p{margin:0;color:var(--j2-text-2);font-size:.82rem;line-height:1.4}
.cl-journey>div:not(:last-child)::after{content:"";position:absolute;right:-.6rem;top:50%;width:.6rem;height:1px;background:rgba(29,29,31,.25)}
@media (max-width:1100px){.cl-journey{grid-template-columns:repeat(4,1fr)}.cl-journey>div::after{display:none}}
@media (max-width:640px){.cl-journey{grid-template-columns:1fr 1fr}}

/* integrations */
.cl-works{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .8rem;margin:clamp(28px,4vw,48px) auto 0;padding:0;list-style:none;max-width:900px}
.cl-works li{padding:.6rem 1rem;border:1px solid rgba(29,29,31,.14);border-radius:12px;font-weight:500;font-size:.95rem;background:#fff}
.cl-works li span{display:block;font-weight:400;color:var(--j2-text-2);font-size:.78rem;margin-top:.1rem}

/* quotes row */
.cl-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);margin-top:clamp(36px,5vw,64px)}
.cl-quotes figure{margin:0;background:#fff;border-radius:20px;padding:clamp(20px,2.6vw,32px);border:1px solid rgba(29,29,31,.08)}
.cl-quotes blockquote{margin:0;font-size:1.05rem;line-height:1.45;font-weight:500}
.cl-quotes figcaption{margin-top:1rem;color:var(--j2-text-2);font-size:.9rem}
.cl-quotes figcaption b{display:block;color:#1d1d1f;font-weight:600}
@media (max-width:900px){.cl-quotes{grid-template-columns:1fr}}
.cl-award{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:clamp(28px,4vw,48px);color:var(--j2-text-2);font-size:.95rem}
.cl-award img{height:56px;width:auto}

/* how you get it */
.cl-get{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:clamp(36px,5vw,64px)}
.cl-get>a{display:block;background:#fff;border:1px solid rgba(29,29,31,.1);border-radius:20px;padding:clamp(22px,3vw,36px);color:inherit;transition:transform .2s,box-shadow .2s}
.cl-get>a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.1)}
.cl-get h3{font-size:1.3rem;margin-bottom:.4rem}
.cl-get p{margin:0;color:var(--j2-text-2);font-size:.98rem;line-height:1.45}
.cl-get .j2-kicker{color:var(--j2-purple);font-weight:600;font-size:.85rem;margin:0 0 .4rem}
.cl-get span.cl-more{display:inline-block;margin-top:.9rem;color:var(--j2-purple-link);font-weight:500}
.cl-get span.cl-more::after{content:" \203A"}
@media (max-width:700px){.cl-get{grid-template-columns:1fr}}

/* data */
.cl-data{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(28px,4vw,48px)}
.cl-data>div{border-top:1px solid rgba(245,245,247,.18);padding-top:.9rem}
.cl-data b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.cl-data p{margin:0;color:#a1a1a6;font-size:.9rem}
@media (max-width:820px){.cl-data{grid-template-columns:1fr 1fr}}

/* section titles on this page: a wider measure so they break at two lines, not three */
.j2-cloud .j2-narrow{width:min(880px,100% - 44px)}
.j2-cloud .j2-scene h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.j2-cloud .j2-sub{max-width:44ch}