/* ==========================================================================
   Connections (product.html; first built for index.html), after Zip's "One platform to orchestrate everything".
   Static, like theirs: eight bands stepped around an orb, a plus and a category on
   each, then the tools. A white radial wash over the right edge fades the bands out.
   Tools with a mark are connected today; plain names are planned, not built.
   ========================================================================== */
.cn-sec{overflow:hidden}
.cn-sh{margin-bottom:24px;max-width:none}   /* left-aligned like the other heads; wide enough for a one-line heading (the lead keeps its 60ch) */
.cn-sh .lead{max-width:none;text-wrap:pretty}   /* one line on desktop; where it must wrap, no one-word last line */
.cn-key{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px 20px;margin:0 0 56px;font:500 14px var(--web);color:var(--mute)}
.cn-key span{display:inline-flex;align-items:center;gap:8px}
.cn-key i{width:10px;height:10px;border-radius:50%;background:var(--blue)}
.cn-key .cn-k2 i{background:transparent;box-shadow:0 0 0 1.5px var(--rail) inset}

.cn{position:relative;isolation:isolate;display:flex;justify-content:flex-end;align-items:center;width:100%}
.cn:after{content:"";position:absolute;top:0;bottom:0;left:0;width:120%;pointer-events:none;
  background:radial-gradient(circle at left,rgba(255,255,255,0) 60%,#fff 90%)}
.cn-orb{position:absolute;z-index:-1;left:-96px;top:50%;width:626px;height:626px;margin-top:-313px;pointer-events:none;
  display:flex;align-items:center;justify-content:center}
/* the orb, like an AI voice glow, in blue and purple: a white middle ringed by sky
   blue, periwinkle, violet and lilac. motion.css turns each
   at its own speed and direction and ripples its outline, so the rims keep crossing.
   On this white page the rims glow in colour (the reference is white on black). */
/* a pale lavender core under the name, over the lava: soft lavender, never stark white,
   with a faint deeper band about the width of the name (the "ring" behind it) */
.cn-blob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;filter:blur(14px);
  background:radial-gradient(circle,#f8f6ff 0,#ebe6ff 31%,#f0ecff 46%,rgba(236,231,255,.85) 58%,rgba(230,225,255,0) 74%)}
/* the lava: two large, overlapping bands of the blue-to-purple gradient, masked to a
   ring so the middle stays white. Each turns and changes shape on its own rhythm (one
   each way); blurred and overlapping, they read as one connected mass that swells,
   stretches and flows into itself, like a lava lamp. */
.cn-lava{position:absolute;left:50%;top:50%;width:70%;height:70%;margin:-35% 0 0 -35%;filter:blur(20px);opacity:.78;
  -webkit-mask-image:radial-gradient(circle,rgba(0,0,0,.12) 18%,#000 52%);mask-image:radial-gradient(circle,rgba(0,0,0,.12) 18%,#000 52%)}
.cn-l1{border-radius:62% 38% 54% 46% / 44% 58% 42% 56%;
  background:conic-gradient(from 0deg,#6fa6ff,#8b85ff,#b08cff,#c3a2ff,#8fa8ff,#6fa6ff)}
.cn-l2{width:60%;height:66%;margin:-33% 0 0 -30%;border-radius:40% 60% 46% 54% / 60% 40% 58% 42%;opacity:.7;
  background:conic-gradient(from 180deg,#a58cff,#7a9cff,#5f98ff,#9d86ff,#c29bff,#a58cff)}
.cn-mark{position:relative;z-index:2;width:28%;height:auto}

/* particles: small glowing motes that rise and fade through the orb, white over the
   coloured ring and lilac over the pale core. Motion: CONNECTIONS in motion.css.
   Resting (motion off) they sit still at a soft opacity. */
.cn-pt{position:absolute;z-index:1;display:block;border-radius:50%;opacity:.6;
  background:#fff;box-shadow:0 0 3px 1px rgba(255,255,255,.95),0 0 6px 1px rgba(160,140,255,.35)}
.cn-pl{background:#a995ff;box-shadow:0 0 3px 1px rgba(169,149,255,.5)}
.cn-q1{left:30%;top:36%;width:3px;height:3px;animation-delay:-0s;animation-duration:7s}
.cn-q2{left:64%;top:31%;width:2px;height:2px;animation-delay:-1.2s;animation-duration:8s}
.cn-q3{left:72%;top:56%;width:3px;height:3px;animation-delay:-2.6s;animation-duration:9s}
.cn-q4{left:34%;top:66%;width:2px;height:2px;animation-delay:-3.4s;animation-duration:7.5s}
.cn-q5{left:50%;top:26%;width:2px;height:2px;animation-delay:-4.1s;animation-duration:8.5s}
.cn-q6{left:26%;top:50%;width:3px;height:3px;animation-delay:-5.0s;animation-duration:9.5s}
.cn-q7{left:59%;top:72%;width:2px;height:2px;animation-delay:-0.6s;animation-duration:8s}
.cn-q8{left:74%;top:41%;width:2px;height:2px;animation-delay:-1.9s;animation-duration:7s}
.cn-q9{left:41%;top:28%;width:2px;height:2px;animation-delay:-2.9s;animation-duration:9s}
.cn-q10{left:67%;top:66%;width:3px;height:3px;animation-delay:-3.8s;animation-duration:8.5s}
.cn-q11{left:28%;top:59%;width:2px;height:2px;animation-delay:-4.7s;animation-duration:7.5s}
.cn-q12{left:54%;top:76%;width:2px;height:2px;animation-delay:-5.6s;animation-duration:9s}
.cn-q13{left:38%;top:41%;width:2px;height:2px;animation-delay:-0.9s;animation-duration:10s}
.cn-q14{left:60%;top:46%;width:2px;height:2px;animation-delay:-2.2s;animation-duration:11s}
.cn-q15{left:47%;top:60%;width:2px;height:2px;animation-delay:-3.1s;animation-duration:10.5s}
.cn-q16{left:51%;top:36%;width:2px;height:2px;animation-delay:-4.4s;animation-duration:9.5s}


.cn-list{display:flex;flex-direction:column;gap:15px;width:900px;max-width:70vw}
.cn-row{position:relative;display:flex;align-items:center;gap:74px;height:76px;flex:0 0 auto;
  background-image:linear-gradient(90deg,rgba(243,244,246,0),rgba(243,244,246,.95) 30%,rgba(243,244,246,.95) 80%,rgba(243,244,246,0))}
.cn-i1{left:84px}
.cn-i2{left:158px}
.cn-i3{left:192px}
.cn-intro{display:flex;align-items:center;gap:44px;flex:0 0 auto;width:236px}
.cn-plus{position:relative;width:9px;height:9px;flex:0 0 auto}
.cn-plus:before,.cn-plus:after{content:"";position:absolute;background:var(--blue)}
.cn-plus:before{left:4px;top:0;width:1.25px;height:9px}
.cn-plus:after{left:0;top:4px;width:9px;height:1.25px}
.cn-row h3{margin:0;font:600 15px/1.37 var(--web);color:var(--navy);white-space:nowrap}
.cn-tools{display:flex;align-items:center;gap:52px;flex:0 0 auto}
.cn-t{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap;font:500 16px var(--web);color:var(--t4)}
.cn-t.cn-on{color:var(--navy);font-weight:600}
.cn-t img{display:block;width:auto;height:22px}
.cn-t img.cn-wm{height:24px}
.cn-t img.cn-nt{height:34px;margin:-5px 0}

/* the block at 80% (orb, name and rows together); zoom rather than a transform so
   the layout box shrinks too and nothing below leaves a gap. Stacked layouts below
   991 are already compact, so they reset. */
.cn{zoom:.8;width:1331px;max-width:125%;margin-left:0;margin-right:auto;left:-92px}
/* the group is one composition, centred under the heading: the orb (626) set beside
   the 900px rows so its glowing rims stop short of them (it no longer overlaps), 1331
   wide in the block's own units. left offsets the orb's transparent outer edge so the
   VISIBLE group centres.
   max-width:125% keeps it within the column (125% x .8 zoom = 100%). */
.cn-orb{left:auto;right:705px}   /* the rims clear every row by 40px or more (glow included) */
.cn-list{max-width:none}

@media (max-width:991px){
  .cn{zoom:1;width:100%;max-width:none;left:0}
  .cn-key{margin-bottom:24px}
  .cn{flex-direction:column;align-items:stretch}
  .cn:after{display:none}
  .cn-orb{position:relative;left:auto;right:auto;top:auto;width:420px;height:300px;margin:0 auto -40px;max-width:100%}
  .cn-mark{width:136px;margin:0}
  .cn-list{width:100%;max-width:none;gap:10px}
  .cn-row{left:auto;height:auto;gap:48px;padding:10px;border-radius:6px;background:#f3f4f6;background-image:none;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .cn-row.cn-i1,.cn-row.cn-i2,.cn-row.cn-i3{left:auto}
  .cn-intro{width:180px;gap:16px}
}
@media (max-width:767px){
  .cn-row{gap:30px}
  .cn-intro{width:auto}
  .cn-plus{display:none}
  .cn-row h3{font-size:13px}
  .cn-tools{gap:28px}
}
@media (max-width:479px){
  .cn-orb{height:240px;margin-bottom:-24px}
  .cn-mark{width:108px}
  .cn-row{background:#f3f4f6;gap:20px}
  .cn-row h3{width:92px;white-space:normal;font-size:12px}
  .cn-tools{gap:20px}
  .cn-t{font-size:14px;gap:6px}
  .cn-t img{height:16px}
  .cn-t img.cn-wm{height:18px}
  .cn-t img.cn-nt{height:24px;margin:-3px 0}
}