/* ===========================================================================
   Cycle diagram styling (paired with cycle.js). Appearance only — positions
   and the flank/stack switch are applied by cycle.js. The ring's hub/nodes
   are sized in container-query units (cqw) so they scale with the ring; the
   detail boxes use fixed sizes (the JS keeps them wide enough on desktop and
   full-width when stacked).
   =========================================================================== */
.cyc { position: relative; width: 100%; max-width: 1100px; margin: 30px auto 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; container-type: inline-size; }
.cyc-svg, .cyc-conn { pointer-events: none; }
.cyc-prog { transition: none; }

/* ----- ring (square; children scale with it) ----- */
.cyc-ring { container-type: inline-size; }
.cyc-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 43cqw; height: 43cqw; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 8px 26px rgba(80, 70, 200, .14), 0 2px 8px rgba(20, 18, 40, .06);
  border: 1px solid #F1F1F6; z-index: 3;
}
.cyc-hub-ic { width: 13.3cqw; height: 13.3cqw; border-radius: 4cqw; background: #F7F7FB; display: flex; align-items: center; justify-content: center; margin-bottom: 2cqw; }
.cyc-hub-ic svg { width: 6.4cqw; height: 6.4cqw; }
.cyc-hub-t { font-size: 4.7cqw; font-weight: 700; color: #1B1A2E; letter-spacing: -0.2px; line-height: 1.12; }
.cyc-hub-s { font-size: 3.5cqw; font-weight: 600; color: #9A9AAB; margin-top: 1cqw; }

.cyc-node {
  position: absolute; transform: translate(-50%, -50%) scale(1);
  width: 18.8cqw; height: 18.8cqw; border-radius: 5.4cqw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(20, 18, 40, .08);
  transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), box-shadow .5s; z-index: 3;
}
.cyc-node svg { width: 8.2cqw; height: 8.2cqw; }
.cyc-node.on { transform: translate(-50%, -50%) scale(1.1); }
/* Labels live in the full canvas (not the ring), so they scale with .cyc */
.cyc-label {
  position: absolute; white-space: nowrap; font-size: 1.3cqw; font-weight: 700;
  letter-spacing: -0.2px; line-height: 1.1; color: #6A6A7C; transition: color .4s; z-index: 3;
}
.cyc-label.on { color: var(--deep); }

/* ----- detail boxes ----- */
.cyc-box {
  background: #fff; border-radius: 18px; border: 1px solid #ECECF3;
  box-shadow: 0 1px 2px rgba(20, 18, 40, .04), 0 14px 30px rgba(20, 18, 40, .08);
  padding: 16px; box-sizing: border-box; display: flex; flex-direction: column;
  max-width: 430px;
  opacity: 0; transform: translateY(7px) scale(.985);
  transition: opacity .24s ease-out, transform .3s cubic-bezier(.22, .61, .36, 1); z-index: 4;
}
.cyc-box.on { opacity: 1; transform: translateY(0) scale(1); }
.cyc-box-h { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.cyc-box-n { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 700; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cyc-box-t { font-size: 16.5px; font-weight: 700; color: #1B1A2E; letter-spacing: -0.3px; }
.cyc-box-b { font-size: 12.5px; line-height: 1.45; color: #6A6A7C; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: auto; }
.cyc-box-f { margin-top: 9px; }

/* When stacked (mobile), the ring's side labels would overflow the small circle —
   the titles already show on each stacked box below, so hide them there. */
@media (max-width: 1000px) {
  .cyc-label { display: none; }
  /* Stacked boxes are content here, not a ring-synced reveal — keep every step
     fully readable regardless of how far the (desktop) animation has progressed. */
  .cyc-box, .cyc-box.on { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cyc-node, .cyc-label, .cyc-box { transition: none; }
}

/* Crawlable fallback inside .cyc[data-proc]: the four process stages as plain
   HTML. cycle.js overwrites the container when it runs, so this is only ever
   seen by crawlers, by no-JS visitors, and briefly before the script executes. */
.cyc-fallback { margin: 0; padding: 0 0 0 22px; max-width: 780px; }
.cyc-fallback li { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.cyc-fallback li b { color: var(--ink); font-weight: 800; }