/* Cuttleflow network flywheel (homepage #network) and the mini ring used on
   product pages. Meridian tokens come from meridian-v2.css. */

/* ---- Homepage flywheel ---- */
.nw{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:44px;align-items:start;margin-top:30px}
.nw-stage{position:relative;width:100%;container-type:inline-size;margin-bottom:56px}
.nw-map{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}
.nw-map>svg,.nw-orbit,.nw-slow{position:absolute;left:0;top:0;width:100%;height:100%}
.nw-orbit,.nw-slow{pointer-events:none;animation:nw-spin 18s linear infinite}
.nw-slow{animation-duration:90s}
.nw-orbit span{position:absolute;left:calc(50% - 5px);top:calc(16.13% - 5px);width:10px;height:10px;border-radius:50%;background:var(--green)}
.nw-flow{stroke-dasharray:4 6;animation:nw-dash 1.2s linear infinite}
@keyframes nw-spin{to{transform:rotate(360deg)}}
@keyframes nw-dash{to{stroke-dashoffset:-20}}
.nw-paused .nw-orbit,.nw-paused .nw-slow,.nw-paused .nw-flow{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.nw-orbit,.nw-slow,.nw-flow{animation:none}}

.nw-hub{position:absolute;left:32.26%;top:32.26%;width:35.48%;height:35.48%;box-sizing:border-box;padding:0 4%;
  border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.nw-hub svg{width:max(22px,5.5cqw);height:auto}
.nw-hub .nw-hub-k{font-family:var(--mono);font-size:max(8px,1.65cqw);letter-spacing:.08em;color:var(--vellum)}
.nw-hub .nw-hub-t{font-family:var(--serif);font-weight:600;font-size:max(14px,3.6cqw);line-height:1.15;color:var(--paper)}

.nw-node{position:absolute;width:30.65%;box-sizing:border-box;padding:2% 2.2% 2.4%;background:var(--paper);
  border:1px solid var(--ink);border-radius:6px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.nw-node:hover{background:var(--paper-2)}
.nw-node[aria-pressed=true]{box-shadow:inset 0 -4px 0 var(--green)}
.nw-node .nw-n{display:block;font-family:var(--mono);font-size:max(9px,1.75cqw);letter-spacing:.08em;color:var(--green)}
.nw-node .nw-t{display:block;font-family:var(--serif);font-weight:600;font-size:max(12px,2.75cqw);line-height:1.2;margin-top:3px}
.nw-n1{left:34.68%;top:9.35%}
.nw-n2{left:68.55%;top:43.23%}
.nw-n3{left:34.68%;top:77.1%}
.nw-n4{left:.8%;top:43.23%}

/* Corner panels: overlaid on the map on wide screens, listed below it on narrow ones */
.nw-feeds{position:absolute;inset:0;pointer-events:none}
.nw-feed{position:absolute;pointer-events:auto;width:28%;box-sizing:border-box;display:block;color:var(--ink)}
.nw-feed:hover{color:var(--ink)}
.nw-feed .nw-fk{display:block;font-family:var(--mono);font-size:max(9px,1.6cqw);letter-spacing:.08em;color:var(--green)}
.nw-feed .nw-ft{display:block;font-weight:600;font-size:max(12px,2.1cqw);margin-top:2px}
.nw-feed .nw-fd{display:block;font-size:max(11.5px,1.95cqw);line-height:1.35;color:var(--ink-72);margin-top:2px}
.nw-feed.box{background:var(--vellum);border-radius:6px;padding:1.6% 2%}
.nw-feed.box:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.nw-f1{left:0;top:0}
.nw-f2{right:0;top:0;width:29%}
.nw-f3{left:0;top:64.5%}
.nw-f4{right:0;top:64.5%}
.nw-chips{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.nw-chips span{font-size:max(11px,1.9cqw);padding:4px 8px;border:1px solid rgba(28,25,21,.22);border-radius:4px;background:var(--paper)}
.nw-feed:not(.box):hover .nw-chips span{border-color:var(--ink)}

/* Stage detail */
.nw-detail{padding-top:6px}
.nw-bars{display:flex;gap:6px;margin-bottom:16px}
.nw-bars span{display:block;width:40px;height:4px;border-radius:2px;background:var(--vellum)}
.nw-bars span.on{background:var(--green)}
.nw:not(.nw-js) .nw-bars{display:none}
.nw-panel+.nw-panel{margin-top:28px}
.nw-js .nw-panel+.nw-panel{margin-top:0}
.nw-panel h3{font-size:28px;margin-top:8px}
.nw-panel>p:not(.kick){margin-top:10px;font-size:16px}
.nw-for{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.nw-for div{background:var(--vellum);border-radius:6px;padding:12px 14px}
.nw-for p:not(.kick){font-size:14px;line-height:1.45;color:var(--ink);margin-top:5px}
.nw-panel .nw-more{margin-top:14px;font-size:15px}
.nw-legal{margin-top:22px;font-size:12.5px;color:var(--ink-72)}

@media (max-width:980px){
  .nw{grid-template-columns:minmax(0,1fr)}
  .nw-stage{max-width:560px}
}
@media (max-width:640px){
  .nw-stage{margin-bottom:0}
  .nw-feeds{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .nw-feed,.nw-f2{position:static;width:auto}
  .nw-feed.box{padding:10px 12px}
  .nw-map>svg .nw-flow{display:none}
  .nw-for{grid-template-columns:minmax(0,1fr)}
  .nw-node .nw-n{display:none}
}
@media (max-width:380px){.nw-feeds{grid-template-columns:minmax(0,1fr)}}

/* ---- Mini ring on product pages ---- */
.nw-mini{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.nw-mini svg{flex:none;width:64px;height:64px}
.nw-mini p:not(.kick){margin-top:4px;font-size:15px}
.nw-mini strong{color:var(--ink);font-weight:600}